Zapier: HTML/CSS to Image
Generate images on Zapier with HTML/CSS to Image. Renders exactly like Google Chrome.
Zapier integration Get an API Key
Table of contents
- Available Actions
- Authentication
- Create images from HTML/CSS
- Create images from a URL
- Troubleshooting
- Need help?
Connect HTML/CSS to Image with thousands of integrations on Zapier.
Available Actions
Our Zapier integration includes two actions.
- Create images from HTML/CSS
- Create images from a URL
Authentication
When connecting the integration to your account, you can retrieve your User ID and API Key from the dashboard.
Create images from HTML/CSS
The Zapier integration makes it simple to create an image with the API. When creating an image you will see these options:
HTML is the only required value. The rest are optional.
| Name | Type | Description |
|---|---|---|
| html* | String | This is the HTML you want to render. You can send an HTML snippet (<div>Your content</div>) or an entire webpage. |
| css | String | The CSS for your image. |
| google_fonts | String | Google fonts to be loaded. Example: Roboto. Multiple fonts can be loaded like this: Roboto|Open Sans |
| ms_delay | Integer | The number of milliseconds the API should delay before generating the image. This is useful when waiting for JavaScript. We recommend starting with 500. Large values slow down the initial render time. |
| device_scale | Double | This adjusts the pixel ratio for the screenshot. Minimum: 1, Maximum: 3. |
Variables in your HTML
When creating your HTML, the power of Zapier is using values from previous steps. You can integrate in values from Twitter, Airtable, Wordpress or any other of the Zapier integrations. Make your images unique and customized for the situation.
Create images from a URL
With this Zapier integration, you can generate a screenshot of any website.
The only required value is URL the rest are optional.
| Name | Type | Description |
|---|---|---|
| url* | String | The fully qualified URL to a public webpage. Such as https://htmlcsstoimage.com. When passed this will override the html param and will generate a screenshot of the url. |
| device_scale | Double | This adjusts the pixel ratio for the screenshot. Minimum: 1, Maximum: 3. |
| ms_delay | Integer | The number of milliseconds the API should delay before generating the image. This is useful when waiting for JavaScript. We recommend starting with 500. Large values slow down the initial render time. |
| viewport_width | Integer | Set the width of Chrome’s viewport. This will disable automatic cropping. Both height and width parameters must be set if using either. |
| viewport_height | Integer | Set the height of Chrome’s viewport. This will disable automatic cropping. Both height and width parameters must be set if using either. |
| selector | String | A CSS selector for an element on the webpage. We’ll crop the image to this specific element. For example: section#complete-toolkit.container-lg |
Troubleshooting
If you have trouble with the Zapier integration, please send us an email: support@htmlcsstoimage.com and we’ll help you out.
Designing images with HTML/CSS
Creating your image design can be the most challenging part. We suggest mocking up your image using Codepen. It allows you to see your HTML/CSS and edit it live.
429 error
If you receive this error, it means you have exceeded your plan limit for creating images this month. Take a look at your Dashboard to check your usage and upgrade your plan.
Blank images
When taking a screenshot of a URL, if you see a blank image, this often means that the screenshot was taken before the page was able to render anything. This can sometimes happen with complex pages that use a lot of JavaScript. To fix it, try adjusting the ms_delay value to slow down taking the screenshot.
Need help?
Talk to a human. Please email us support@htmlcsstoimage.com with any questions and we’ll gladly help you get started.