Read this article in English.
Cómo convertir HTML en imagen en Zapier (Webhooks)
Si automatizas con Zapier y necesitas generar una imagen dentro de un Zap (una tarjeta para redes, una miniatura, un recibo), se puede hacer. No hay un paso nativo de "HTML a imagen", pero con Webhooks by Zapier y la API de Cofferdock montas la llamada sin programar.
Vaya por delante una verdad que conviene saber antes de empezar: Zapier maneja peor las imágenes que devuelven las APIs que herramientas como n8n o Make. Se puede hacer, pero si tu flujo va a mover muchas imágenes o necesitas encadenarlas con soltura, n8n o Make te lo pondrán más fácil. Aun así, para casos sencillos, Zapier cumple. Te lo cuento tal cual.
Qué vas a conseguir
Le mandas tu diseño en HTML y la API te devuelve la imagen. Con Zapier lo normal es recibirla y pasarla al siguiente paso (por ejemplo, subirla a Google Drive o adjuntarla a un email).
Lo que necesitas
- Una cuenta en Cofferdock. El plan gratis da 50 usos al mes sin tarjeta.
- Tu API key, que creas en tu panel con "+ Crear llave" (se muestra una vez, guárdala).
- Webhooks by Zapier, que es una función de los planes de pago de Zapier.
Paso a paso con Webhooks by Zapier
- En tu Zap, añade un paso de acción y elige Webhooks by Zapier.
- En Event, elige Custom Request.
- Configura la petición:
- Method: POST - URL: https://api.cofferdock.com/capture?width=1200&height=630 - Data Pass-Through?: No - Data: pega tu HTML (o mételo desde un paso anterior). - Headers: añade x-api-key con tu llave, y Content-Type con el valor text/html.
- Prueba el paso y comprueba qué te devuelve.
El punto delicado: la imagen de vuelta
Aquí es donde Zapier es más limitado. La API puede devolver la imagen de dos formas y en Zapier conviene elegir bien:
- Como archivo binario (por defecto). Zapier a veces expone ese archivo para el siguiente paso, pero no siempre lo trata bien.
- Como texto base64, más manejable en Zapier. Para eso, en vez de
text/html, envías la petición en modo JSON: pon la cabeceraContent-Typeaapplication/jsony en Data un objeto como{"html":"<h1>Hola</h1>","width":1200,"height":630}. La respuesta trae la imagen en el campoimageen base64, que puedes usar en los pasos que acepten base64.
Si tu app de destino (por ejemplo, Google Drive) no acepta bien ninguna de las dos, la vía más cómoda es hacer esta parte en n8n o Make, que devuelven el archivo listo para el siguiente paso sin líos.
Opciones que puedes ajustar
Se añaden en la URL, después del ?, separadas por &:
| Opción | Por defecto | Para qué sirve |
|---|---|---|
width | 1200 | Ancho de la imagen en píxeles. |
height | 630 | Alto de la imagen en píxeles. |
format | png | Formato: png o jpeg. |
full_page | false | Ponlo en true para capturar diseños más altos que el alto indicado. |
output | según modo | image fuerza el binario; json fuerza el base64. |
¿Prefieres verlo en código?
La misma llamada con curl, por si quieres probarla suelta antes de montarla en Zapier:
curl -X POST "https://api.cofferdock.com/capture?width=1200&height=630" \
-H "x-api-key: TU_LLAVE" \
-H "Content-Type: text/html" \
--data-binary "<h1 style='color:#8a5210'>Hola</h1>" \
-o imagen.png
¿Cuánto cuesta?
Cada imagen gasta 1 crédito de tu plan de Cofferdock. Todas las herramientas comparten el mismo bote de créditos.
Preguntas frecuentes
¿Zapier tiene un paso nativo de HTML a imagen? No. Se hace con Webhooks by Zapier (una función de pago) llamando a la API de Cofferdock.
¿Por qué recomendáis n8n o Make para imágenes? Porque devuelven el archivo de imagen listo para el siguiente paso, mientras que en Zapier manejar el archivo de vuelta es más engorroso.
¿Puedo recibir la imagen como base64? Sí. Envía la petición en modo JSON (Content-Type: application/json) y la respuesta traerá la imagen en el campo image en base64.
Pruébalo tú mismo
Tienes las instrucciones completas, con ejemplos para copiar y pegar, en la página de la herramienta HTML a imagen. Y si aún no tienes cuenta, puedes crear una gratis y probarlo hoy mismo.