Hello World!
" } const res = await fetch("mattermix.com/api/v1/image", { method: "POST", headers: { "Content-Type": "application/json", Authorization: `Bearer ${process.env.MATTERMIX_API_KEY}` }, body: JSON.stringify(body) }); ``` In the above example, the Mattermix API key is stored in an [environment variable](https://www.freecodecamp.org/news/what-are-environment-variables-and-how-can-i-use-them-with-gatsby-and-netlify/) named `MATTERMIX_API_KEY` to prevent the API key being exposed in committed code. # Create image {% hint style="info" %} **Before getting started:** You will need to [create your API key](/api/create-api-key). {% endhint %} ## Create and return a new image URL `POST` `https://mtmx.io/v1/image` #### Headers | Name | Type | Description | | ----------------------------------------------- | ------ | --------------------- | | Authorization\* | String | `Bearer YOUR-API-KEY` | #### Request Body | Name | Type | Description | | -------------------------------------- | ------- | ------------------------------------------------------------------------------------------------------------ | | html\* | String | The HTML you want to render for creating an image. | | content | Object | Updates values when using Handlebars templating syntax. [Learn more](/api/template-syntax). | | type | String | Defines whether to render JPEG or PNG image. Accepted values are `png` and `jpeg`. Default value is `png`. | | quality | Number | Defines the quality of JPG images. Not applicable to PNG images. Default value `80`. | | selector | String | Target a specific HTML element to perform the screenshot. Default value is `body`. | | transparent | Boolean | Hides default white background and allows capturing screenshots with transparency. Default value is `false`. | {% tabs %} {% tab title="200: OK Export created successfully" %} ```javascript { "success": true, "url": "https://cdn.mattermix.com/v1/image/62029ad452390ccfd9abcc4f-1644951564719.png" "id": "620bfdd2501f2b5c901e2800" } ``` {% endtab %} {% tab title="401: Unauthorized Unauthorized request" %} ```javascript { "success": false, "statusCode": 401, "message": "Please provide a valid API key." } ``` {% endtab %} {% tab title="402: Payment Required Inactive or cancelled subscription" %} ```javascript { "success": false, "statusCode": 402, "message": "Active subscription not found." } ``` {% endtab %} {% tab title="500: Internal Server Error Internal server error" %} ```javascript { "success": false, "statusCode": 500, "message": "Server error." } ``` {% endtab %} {% tab title="429: Too Many Requests API limit reached" %} ```javascript { "success": false, "statusCode": 429, "message": "You have reached your monthly export limit set in your account." } ``` {% endtab %} {% endtabs %} # Delete image {% hint style="info" %} **Before getting started:** You will need to [create your API key](/api/create-api-key). {% endhint %} ## Delete image from Mattermix and Google CDN `DELETE` `https://mtmx.io/v1/image/:uid` The `uid` for the image can be found in the image URL. For example, if the image URL is `https://cdn.mattermix.com/images/620d5489e8b565e74ce552c1/484ec22d-bfc9-4fc8-b764-6cf8d9b91f55.png` the `uid` is `484ec22d-bfc9-4fc8-b764-6cf8d9b91f55`. #### Headers | Name | Type | Description | | ----------------------------------------------- | ------ | --------------------- | | Authorization\* | String | `Bearer YOUR-API-KEY` | {% tabs %} {% tab title="202: Accepted Export created successfully" %} ```javascript { "success": true, } ``` {% endtab %} {% tab title="401: Unauthorized Unauthorized request" %} ```javascript { "success": false, "statusCode": 401, "message": "Please provide a valid API key." } ``` {% endtab %} {% tab title="500: Internal Server Error Internal server error" %} ```javascript { "success": false, "statusCode": 500, "message": "Server error." } ``` {% endtab %} {% tab title="404: Not Found Image not found" %} ```javascript { "success": false, "statusCode": 404, "message": "Image with URL not found." } ``` {% endtab %} {% endtabs %} # Template syntax The Mattermix API uses the [Handlebars](https://handlebarsjs.com/guide/) templating syntax to dynamically update values in HTML or CSS. For example, you could have the following in your HTML: `{{title}}
`. The title value could be updated with the API by passing a title value in the `content` object of the request body. Below is an example using the Fetch API from JavaScript: ```javascript const body = { html: "{{title}}
", content: { title: "Hello World!" } } const res = await fetch("mattermix.com/api/v1/image", { method: "POST", headers: { "Content-Type": "application/json", Authorization: `Bearer ${process.env.MATTERMIX_API_KEY}` }, body: JSON.stringify(body) }); ``` # Set API limit The API limit helps you control costs by defining a max number of exports per month for your account. This limit can be adjusted at any time from the [API Dashboard](https://www.mattermix.com/account/api).  By default your API will be limited to 50 exports per month when you first create your account. In order to increase this limit you will need to include a payment method on your subscription, which you can do from the [Subscription Dashboard](https://www.mattermix.com/account/subscription). # Zapier ### Introduction [Zapier](https://zapier.com/) makes it simple to connect the apps you already use so they can work together and automate tasks. For example, you can connect [Google Sheets](https://www.google.com/sheets/about/) or [Airtable](https://www.airtable.com/) to Mattermix and create new images when a record is created or updated. Zapier supports over 3,000 apps, so the possibilities to automate your workflows are endless! If it's your first time using Zapier be sure to check out the [Zapier Help Center](https://zapier.com/help). ### Connect Mattermix with Zapier * Head to your [App integrations](https://zapier.com/app/connections) * Click **Add connection** * Search for **Mattermix** and select * Fill out the form with your [API key](/api/create-api-key) and email * Click **Yes, Continue** ### Getting started: Create a Zapier Trigger Every Zap starts with a Trigger: something that tells Zapier it's time to start an automation. For example, a Trigger could be when a new field is added in a Google Sheet, a new contact is added to an email list, or when a new deal closes in your CRM. Not only does this start the Zapier automation, but you can also use data captured from Triggers and previous steps and pass those values down. In this example, we'll be passing values from Airtable into the Mattermix API to dynamically update values in the HTML.  ### Action: Create Image The Create Image Action will create a new image from HTML with the Mattermix API. #### Set HTML Copy and paste your HTML template in the HTML field, replacing any values you want to dynamically update from the Trigger or previous steps.  #### Test action Once you've mapped values to the fields you want to update, click **Continue**. You will now be prompted to test the Action. If the request is successful you will see a response similar to the following: ```javascript { "success": true, "url": "https://cdn.mattermix.com/images/620d5489e8b565e74ce552c1/484ec22d-bfc9-4fc8-b764-6cf8d9b91f55.png" } ``` These values will be available in the following steps to further complete your workflow. For example, you can use the URL returned from the Mattermix API in an Action to update a record in Airtable.  The last step is to turn on your new Zap by clicking the *Turn on zap* button.  # Manage subscription Mattermix uses [Stripe](https://stripe.com/) for subscription management and payment processing. ### Create subscription When your Mattermix account is created you will automatically be signed up for a Mattermix Subscription without needing to provide any credit card information. The only time you would need to include your credit card information is when you increase your [API limit](/api/set-api-limit) beyond 50 monthly exports. If your subscription is canceled you'll need to create a new subscription from the [Subscription Dashboard](https://www.mattermix.com/account/subscription) by clicking on the *Subscribe* button. This will redirect you to Stripe Checkout where you can enter your information and subscribe.  ### View subscription You can view your current and previous subscription from the [Subscription Dashboard](https://www.mattermix.com/account/subscription) by clicking on the *Manage* button. This will redirect you to the Stripe Customer Portal where you can view and update your payment method, billing information, and invoice history.  ### Cancel subscription You can cancel your subscription from the [Subscription Dashboard](https://www.mattermix.com/account/subscription) by clicking on the *Manage* button. This will redirect you to the Stripe Customer Portal where you can click the *Cancel plan* button.  Last, confirm your cancelation by clicking the next *Cancel plan* button.  Your plan will be canceled immediately and you will be invoiced for any outstanding balances on your account.