Link Search Menu Expand Document

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

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

Connect html css to image with 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.

Get your free API Key

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.


Back to top

Built with extensive integration tests and serious care for developer happiness.
© 2018-2020 Code Happy, LLC.

Page last modified: Oct 29 2020 at 02:54 PM.

Edit this page on GitHub.