Lee este artículo en español.
How to turn HTML into an image in Zapier (Webhooks)
If you automate with Zapier and need to generate an image inside a Zap (a social card, a thumbnail, a receipt), it can be done. There's no native "HTML to image" step, but with Webhooks by Zapier and the Cofferdock API you can set up the call without coding.
One honest thing to know before you start: Zapier handles images returned by APIs less smoothly than tools like n8n or Make. It works, but if your flow will move lots of images or you need to chain them easily, n8n or Make will make your life easier. Still, for simple cases Zapier gets the job done. Here's the straight story.
What you'll get
You send your design in HTML and the API returns the image. In Zapier the usual pattern is to receive it and pass it to the next step (for example, upload it to Google Drive or attach it to an email).
What you need
- A Cofferdock account. The free plan gives 50 uses a month with no card.
- Your API key, which you create in your dashboard with "+ Create key" (shown once, save it).
- Webhooks by Zapier, which is a feature of Zapier's paid plans.
Step by step with Webhooks by Zapier
- In your Zap, add an action step and choose Webhooks by Zapier.
- In Event, choose Custom Request.
- Set up the request:
- Method: POST - URL: https://api.cofferdock.com/capture?width=1200&height=630 - Data Pass-Through?: No - Data: paste your HTML (or bring it in from a previous step). - Headers: add x-api-key with your key, and Content-Type with the value text/html.
- Test the step and check what it returns.
The tricky part: the image coming back
This is where Zapier is more limited. The API can return the image in two ways, and in Zapier it pays to choose well:
- As a binary file (the default). Zapier sometimes exposes that file to the next step, but it doesn't always handle it cleanly.
- As base64 text, which is easier to work with in Zapier. For that, instead of
text/html, send the request in JSON mode: set theContent-Typeheader toapplication/jsonand put an object in Data like{"html":"<h1>Hello</h1>","width":1200,"height":630}. The response carries the image in theimagefield as base64, which you can use in steps that accept base64.
If your destination app (Google Drive, for example) doesn't handle either one well, the easiest route is to do this part in n8n or Make, which hand back the file ready for the next step with no fuss.
Options you can tweak
Add them to the URL, after the ?, separated by &:
| Option | Default | What it does |
|---|---|---|
width | 1200 | Image width in pixels. |
height | 630 | Image height in pixels. |
format | png | Format: png or jpeg. |
full_page | false | Set to true to capture designs taller than the given height. |
output | per mode | image forces the binary; json forces base64. |
Prefer to see it in code?
The same call with curl, in case you want to try it before building it in Zapier:
curl -X POST "https://api.cofferdock.com/capture?width=1200&height=630" \
-H "x-api-key: YOUR_KEY" \
-H "Content-Type: text/html" \
--data-binary "<h1 style='color:#8a5210'>Hello</h1>" \
-o image.png
How much does it cost?
Each image spends 1 credit from your Cofferdock plan. All tools share the same pool of credits.
FAQ
Does Zapier have a native HTML to image step? No. You do it with Webhooks by Zapier (a paid feature) calling the Cofferdock API.
Why do you recommend n8n or Make for images? Because they hand back the image file ready for the next step, while in Zapier handling the returned file is more awkward.
Can I get the image as base64? Yes. Send the request in JSON mode (Content-Type: application/json) and the response will carry the image in the image field as base64.
Try it yourself
You'll find the full instructions, with copy-and-paste examples, on the HTML to image tool page. And if you don't have an account yet, you can create one for free and try it today.