Uploading your emails to a custom Webhook URL

Send generated HTML or MJML source from Emailify to your own endpoint in a JSON webhook payload.

In the Emailify export panel, select the Custom Webhook URL option from the dropdown list, then paste in your own custom URL endpoint that has been created to handle the JSON payload sent from Emailify.

When you're ready, click the POST button to export the emails you've selected from Figma and send them as a POST request to your custom webhook endpoint.

Your images will automatically be uploaded to our CDN and included as the src attribute for any `` tags in the html string property sent via the payload.

Your code is exported as HTML by default. You can select MJML Source Code or a platform-specific format from the Webhook export options when your endpoint needs a different handoff.

The JSON payload object sent via POST to your URL ​

The JSON payload sent from Emailify contains the object keys/values below; you need to ensure that your custom webhook URL has been created to handle this payload, which you can use however you like.

{
  "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>"
}

Send MJML source to a CI workflow ​

Choose MJML Source Code from the Webhook format selector when your endpoint needs the generated source MJML for validation or compilation. Select the same MJML version your CI workflow uses. Emailify adds the mjml and mjmlVersion fields while retaining the compiled html field:

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"
}

The mjmlVersion value is mjml4 or mjml5, matching the version selected in Emailify. Your endpoint can store the MJML, trigger CI validation, and let CI control any later upload to your email platform. You can use the custom JSON fields below to add workflow metadata such as an app, template, environment, or language name.

Adding custom JSON body and headers to your payload ​

You can optionally add your own valid JSON string to the input fields below, and those will automatically be included in your payload's header object and/or data body object that's sent to your endpoint URL from the plugin as a POST request:

  • You can set custom header object properties via the Custom Request Headers (Optional) field (for example, { "Authorization": "Bearer xyz" })
  • You can set custom body data object properties Custom Extra JSON Data (Optional) (for example, { "category": "emailify" })
  • Or, you can also set custom body data object properties on a "per-email" basis in the Extra Email-Specific JSON Payload Data (Optional) (for example, { "id": 26, "tag": "email", "edit": true }) field under any email(s) in your export panel list, which will be merged with any global JSON data you may have already set globally (above).

POST your JSON payload via a proxy server ​

As Figma plugins are run inside of a sandboxed iFrame element in the Figma app, it doesn't have any origin, so your Webhook URL that you POST the JSON payload to may reject the request due to cross-origin CORS issues.

To work around this, you can either update your own Webhook function with Access-Control-Allow-Origin set to * (all), or you can enable the Use Proxy toggle (which is turned on by default) in the Emailify plugin settings when you're exporting your email to a custom Webhook.

Enabling the Use Proxy toggle with autoamtically route your request through a proxy server before hitting your Webhook URL, to ensure that the incoming POST request has an origin and should resolve any CORS issues. This is purely a forwarding request, so the JSON data will flow directly through the proxy, and forwarded on straight to your own Webhook URL.

Enabling the Use Proxy setting means that the requests routed through the proxy server will come from a dynamic IP address each time a request is sent, so if you need a static IP address (for example, you're only allowing incoming requests from certain IPs, like a range of IP addresses in your office network), you should turn this setting off and update your Webhook function to set Access-Control-Allow-Origin to * to accept POST requests directly from the Figma plugin instead (without being routed via the proxy server).