Read this article in English.

HTML a imagen en Make: paso a paso con el módulo HTTP

Si automatizas con Make (antes Integromat), en algún escenario acabas necesitando crear una imagen: una tarjeta para redes por cada registro nuevo, una imagen de Open Graph, un recibo o una miniatura. No hace falta un servidor ni otra aplicación. El módulo genérico HTTP → Make a request llamando a la API de Cofferdock lo resuelve, y la respuesta del módulo ya es el archivo de imagen.

Un aviso honesto, porque mucha gente lo busca así: Make no tiene un módulo de "HTML a imagen". Se hace con el módulo HTTP llamando a una API que pinta el HTML. Aquí tienes cómo, campo a campo.

Este es el tipo de imagen que devuelve la API a partir de unas líneas de HTML:

Tarjeta para redes generada desde HTML con la API de Cofferdock

Lo que necesitas

Una cuenta en Cofferdock. El plan gratis incluye 50 créditos al mes sin tarjeta, perfecto para probar.
Tu API key, que creas en tu panel con "+ Crear llave". Se muestra una vez, así que cópiala y guárdala.
El módulo HTTP → Make a request en tu escenario.

Paso a paso en el módulo HTTP

Añade HTTP → Make a request y configúralo así:

URL: https://api.cofferdock.com/capture
Method: POST
Headers: añade dos → x-api-key con tu llave, y Content-Type con el valor text/html.
Query String: añade width = 1200 y height = 630.
Body type: Raw
Content type: text/html
Request content: pega aquí tu HTML.
Deja Parse response desactivado: la respuesta es una imagen, no un JSON.

Ejecuta el módulo con Run once. En su burbuja de salida verás Data (la imagen) y las cabeceras de la respuesta.

Mapea datos de módulos anteriores en la imagen

Escribe tu HTML en Request content y, donde deba ir un valor, haz clic para mapearlo desde un módulo anterior (por ejemplo Google Sheets → Watch Rows):

<div style="width:1200px;height:630px;background:#1f1a17;color:#fff;font-family:Arial;padding:80px;box-sizing:border-box">
  <h1 style="font-size:72px">{{1.titulo}}</h1>
  <p style="font-size:34px">{{1.autor}}</p>
</div>

{{1.titulo}} es como Make muestra un valor mapeado del módulo 1; se inserta haciendo clic en el campo del panel de mapeo, no escribiéndolo. Cada paquete (bundle) que llega al módulo HTTP crea una imagen distinta.

Guarda la imagen en Google Drive (o envíala)

Añade Google Drive → Upload a file después del módulo HTTP:

File: elige Map.
File name: por ejemplo tarjeta-{{1.id}}.png (la extensión importa).
Data: mapea el campo Data del módulo HTTP.

Funciona igual con Gmail → Send an email → Attachments (File name + Data), Dropbox, Slack → Upload a file o Telegram → Send a photo.

Sin escribir HTML: usa una plantilla

Manda el nombre de una plantilla y tus textos en JSON:

Headers: deja solo x-api-key.
Body type: Raw → Content type: JSON (application/json)
Request content:

{
  "template": "social",
  "lang": "es",
  "data": { "quote": "{{1.frase}}", "author": "{{1.autor}}", "brand": "tumarca.com" },
  "output": "image"
}

Las plantillas disponibles (social, og, youtube, receipt, certificate, invoice) y sus campos están en cofferdock.com/templates.json, y puedes verlas en la página de plantillas. Los textos se escapan, así que las comillas o símbolos de tus datos no rompen el diseño.

Opciones que puedes ajustar

Se añaden en el Query String del mismo módulo:

Opción	Por defecto	Para qué sirve
`width`	`1200`	Ancho en píxeles (de 100 a 3840).
`height`	`630`	Alto en píxeles (de 100 a 2160).
`format`	`png`	`png`, `jpeg` o `webp`.
`quality`	`90`	Calidad de 1 a 100 para `jpeg` y `webp`.
`full_page`	`false`	`true` para capturar un diseño más alto que `height`.
`wait_ms`	`0`	Espera antes de la foto para que carguen tipografías o imágenes (máximo 5000).
`output`	`image`	`url` devuelve un enlace de descarga temporal (15 minutos) en vez del archivo; en ese caso activa Parse response.

Las fotos, logos y tipografías web funcionan con su enlace https://… dentro del HTML o del CSS. El diseño se pinta sin ejecutar JavaScript, así que usa solo HTML y CSS.

Errores típicos y cómo arreglarlos

Lo que ves	Por qué pasa	Solución
`401 Missing x-api-key header` / `Invalid API key`	Falta la cabecera, está mal escrita o la llave se anuló.	Nombre exacto `x-api-key`.
`400 Missing or invalid html field`	Request content está vacío, o el valor mapeado venía vacío en ese paquete.	Mira la burbuja de entrada del módulo HTTP.
Google Drive guarda un archivo que no abre	Nombre sin extensión, o Data mapeado del campo equivocado.	Usa un nombre `.png` y mapea el Data del módulo HTTP.
Faltan tipografías o imágenes	No terminaron de cargar.	Añade `wait_ms` = `1000`.
`429 Too many requests` o `Monthly limit reached`	Límite por minuto de tu plan, o no quedan créditos este mes.	Baja los paquetes por ciclo del escenario, o mejora el plan / compra créditos extra.

¿Prefieres verlo en código?

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. Todas las herramientas de Cofferdock comparten el mismo bote, así que HTML a PDF, capturas de webs, QR o gráficos no necesitan suscripciones aparte.

Preguntas frecuentes

¿Make tiene un módulo nativo de HTML a imagen? No. Se hace con el módulo HTTP genérico llamando a la API de Cofferdock, que pinta la imagen.

¿Tengo que activar "Parse response"? No. La respuesta es una imagen, no un JSON, así que déjalo desactivado. Solo actívalo si usas output = url.

¿Necesito saber programar? No. Rellenas el módulo HTTP siguiendo esta guía, o usas una plantilla y te olvidas del HTML.

¿Gasta muchas operaciones de Make? Una operación por imagen en el módulo HTTP, más lo que hagas después con el archivo.

Guías relacionadas

HTML a imagen en n8n (con flujo gratis para importar) y en Zapier
HTML a PDF en Make
Captura de webs en Make

Referencia completa con todas las opciones: API de HTML a imagen. ¿Aún sin cuenta? Crea una gratis y monta tu primer escenario hoy mismo.