# Zapier integration

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

[Zapier integration](https://zapier.com/apps/htmlcss-to-image/integrations) [Get an API Key](https://htmlcsstoimage.com)

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

![Connect HTML/CSS to Image with Zapier](/assets/images/zapier.png)

## 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 API Key](https://htmlcsstoimage.com/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` (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](/parameters/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`. |

Variables in your HTML

Map values from earlier Zapier steps into your HTML to personalize each image.

## 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` (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` |

## Troubleshooting

If you have trouble with the Zapier integration, please send us an email: [support@htmlcsstoimage.com](mailto: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](https://pen.new). 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](https://htmlcsstoimage.com/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. Email [support@htmlcsstoimage.com](mailto:support@htmlcsstoimage.com) and we’ll help you get started.