Zapier integration

Generate images on Zapier with HTML/CSS to Image. Renders exactly like Google Chrome.

Zapier integration Get an API Key

Connect HTML/CSS to Image with thousands of integrations on Zapier.

Our Zapier integration includes two actions.

• Create images from HTML/CSS
• Create images from a URL

When connecting the integration to your account, you can retrieve your User ID and API Key from the dashboard.

Get your API Key

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 (required)	String	HTML to render: a snippet (<div>Your content</div>) or an entire webpage.
css	String	The CSS for your image.
google_fonts	String	Google fonts to load. Example: Roboto. Separate multiple fonts with a pipe: 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.

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 (required)	String	The full URL of the webpage to capture, such as https://htmlcsstoimage.com. Overrides html when both are supplied.
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

If you have trouble with the Zapier integration, please send us an email: support@htmlcsstoimage.com and we’ll help you out.

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.

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.

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. Email support@htmlcsstoimage.com and we’ll help you get started.