Subir tus emails a una URL de webhook personalizada

Envía el HTML generado o el código fuente MJML desde Emailify a tu propio endpoint en la carga JSON de un webhook.

En el panel de exportación de Emailify, selecciona la opción Custom Webhook URL en la lista desplegable y pega la URL de tu propio endpoint personalizado, preparado para gestionar la carga JSON que envía Emailify.

Cuando lo tengas todo listo, haz clic en el botón POST para exportar los emails que hayas seleccionado en Figma y enviarlos como una petición POST a tu endpoint de webhook personalizado.

Tus imágenes se suben automáticamente a nuestra CDN y se incluyen como atributo src de las etiquetas `` en la propiedad de texto html que se envía en la carga.

Tu código se exporta como HTML de forma predeterminada. Si tu endpoint necesita otro formato, puedes seleccionar MJML Source Code o un formato específico de una plataforma en las opciones de exportación del webhook.

El objeto de carga JSON que se envía por POST a tu URL ​

La carga JSON que envía Emailify contiene las claves y los valores del objeto que aparecen abajo. Asegúrate de que tu URL de webhook personalizada esté preparada para gestionar esta carga, que puedes usar como quieras.

{
  "name": "Name of the Figma frame",
  "subject": "Subject line set in Emailify settings",
  "preheader": "Preheader text set in Emailify settings",
  "html": "<html><head></head><body>Exported email HTML</body></html>"
}

Enviar el código fuente MJML a un flujo de CI ​

Elige MJML Source Code en el selector de formato del webhook cuando tu endpoint necesite el código fuente MJML generado para validarlo o compilarlo. Selecciona la misma versión de MJML que usa tu flujo de CI. Emailify añade los campos mjml y mjmlVersion y mantiene el campo html compilado:

json
{
  "name": "Name of the Figma frame",
  "subject": "Subject line set in Emailify settings",
  "preheader": "Preheader text set in Emailify settings",
  "html": "<html><head></head><body>Compiled email HTML</body></html>",
  "mjml": "<mjml><mj-body>Generated source MJML</mj-body></mjml>",
  "mjmlVersion": "mjml4"
}

El valor de mjmlVersion es mjml4 o mjml5, según la versión seleccionada en Emailify. Tu endpoint puede guardar el MJML, lanzar la validación de CI y dejar que la CI controle cualquier subida posterior a tu plataforma de email. Puedes usar los campos JSON personalizados que se describen abajo para añadir metadatos del flujo de trabajo, como el nombre de una app, una plantilla, un entorno o un idioma.

Añadir un cuerpo JSON y cabeceras personalizados a tu carga ​

Si quieres, puedes añadir tu propia cadena JSON válida en los campos que se describen abajo, y se incluirá automáticamente en el objeto header y/o en el objeto de cuerpo data de la carga que el plugin envía a la URL de tu endpoint como una petición POST:

  • Puedes definir propiedades personalizadas del objeto header en el campo Custom Request Headers (Optional) (por ejemplo, { "Authorization": "Bearer xyz" }).
  • Puedes definir propiedades personalizadas del objeto de cuerpo data en Custom Extra JSON Data (Optional) (por ejemplo, { "category": "emailify" }).
  • También puedes definir propiedades personalizadas del objeto de cuerpo data "por email" en el campo Extra Email-Specific JSON Payload Data (Optional) (por ejemplo, { "id": 26, "tag": "email", "edit": true }), que aparece bajo cada email en la lista de tu panel de exportación. Estos datos se combinan con los datos JSON globales que ya hayas definido (arriba).

Enviar tu carga JSON por POST a través de un servidor proxy ​

Como los plugins de Figma se ejecutan dentro de un elemento iFrame aislado en la app de Figma, no tienen ningún origin, así que la URL de webhook a la que envías la carga JSON por POST puede rechazar la petición por problemas de CORS entre orígenes.

Para evitarlo, puedes actualizar tu propia función de webhook con Access-Control-Allow-Origin definido como * (todos), o activar el interruptor Use Proxy (activado de forma predeterminada) en los ajustes del plugin Emailify al exportar tu email a un webhook personalizado.

Al activar el interruptor Use Proxy, tu petición pasa automáticamente por un servidor proxy antes de llegar a tu URL de webhook, para que la petición POST entrante tenga un origin, lo que debería resolver cualquier problema de CORS. Es solo un reenvío: los datos JSON pasan directamente por el proxy y se reenvían tal cual a tu propia URL de webhook.

Si activas el ajuste Use Proxy, las peticiones que pasan por el servidor proxy llegan desde una dirección IP dinámica cada vez que se envía una petición. Por eso, si necesitas una dirección IP estática (por ejemplo, si solo aceptas peticiones entrantes de determinadas IP, como un rango de direcciones IP de la red de tu oficina), desactiva este ajuste y actualiza tu función de webhook para definir Access-Control-Allow-Origin como *, de modo que acepte peticiones POST directamente desde el plugin de Figma (sin pasar por el servidor proxy).