Dans le panneau d’export d’Emailify, sélectionnez l’option Custom Webhook URL dans la liste déroulante, puis collez l’URL de votre propre point de terminaison, conçu pour traiter le payload JSON envoyé par Emailify.

Quand vous êtes prêt, cliquez sur le bouton POST pour exporter les emails sélectionnés dans Figma et les envoyer sous forme de requête POST à votre point de terminaison de webhook personnalisé.

Vos images sont automatiquement importées dans notre CDN et renseignées dans l’attribut src de chaque balise `` de la propriété html (une chaîne) envoyée dans le payload.

Votre code est exporté en HTML par défaut. Vous pouvez sélectionner MJML Source Code ou un format propre à une plateforme dans les options d’export Webhook lorsque votre point de terminaison a besoin d’un autre format de passation.

L’objet de payload JSON envoyé en POST à votre URL

Le payload JSON envoyé par Emailify contient les clés et valeurs ci-dessous. Assurez-vous que votre URL de webhook personnalisée est conçue pour traiter ce payload, que vous pouvez ensuite utiliser comme bon vous semble.

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

Envoyer le code source MJML à un workflow de CI

Choisissez MJML Source Code dans le sélecteur de format Webhook lorsque votre point de terminaison a besoin du code source MJML généré pour le valider ou le compiler. Sélectionnez la même version de MJML que celle de votre workflow de CI. Emailify ajoute les champs mjml et mjmlVersion tout en conservant le champ html compilé :

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

La valeur de mjmlVersion est mjml4 ou mjml5, selon la version sélectionnée dans Emailify. Votre point de terminaison peut stocker le MJML, déclencher la validation par la CI et laisser la CI gérer tout import ultérieur dans votre plateforme d’emailing. Vous pouvez utiliser les champs JSON personnalisés ci-dessous pour ajouter des métadonnées de workflow, comme le nom d’une app, d’un modèle, d’un environnement ou d’une langue.

Ajouter un corps JSON et des en-têtes personnalisés à votre payload

Vous pouvez ajouter votre propre chaîne JSON valide dans les champs ci-dessous : elle sera automatiquement incluse dans l’objet header et/ou l’objet de corps data du payload envoyé par le plugin à l’URL de votre point de terminaison sous forme de requête POST :

• Vous pouvez définir des propriétés personnalisées de l’objet header dans le champ Custom Request Headers (Optional) (par exemple, { "Authorization": "Bearer xyz" }).
• Vous pouvez définir des propriétés personnalisées de l’objet de corps data dans Custom Extra JSON Data (Optional) (par exemple, { "category": "emailify" }).
• Vous pouvez aussi définir des propriétés personnalisées de l’objet de corps data email par email dans le champ Extra Email-Specific JSON Payload Data (Optional) (par exemple, { "id": 26, "tag": "email", "edit": true }), sous chaque email de la liste de votre panneau d’export. Elles seront fusionnées avec les données JSON globales que vous avez éventuellement déjà définies (ci-dessus).

Envoyer votre payload JSON en POST via un serveur proxy

Comme les plugins Figma s’exécutent dans un élément iFrame isolé (sandbox) de l’application Figma, ils n’ont pas d’origin : l’URL de webhook à laquelle vous envoyez le payload JSON en POST peut donc rejeter la requête en raison de problèmes CORS (requêtes cross-origin).

Pour contourner ce problème, vous pouvez soit modifier votre propre fonction de webhook en réglant Access-Control-Allow-Origin sur * (tous), soit activer l’option Use Proxy (activée par défaut) dans les réglages du plugin Emailify lorsque vous exportez votre email vers un webhook personnalisé.

Activer l’option Use Proxy fait automatiquement transiter votre requête par un serveur proxy avant qu’elle n’atteigne votre URL de webhook : la requête POST entrante a ainsi une origin, ce qui devrait résoudre les problèmes CORS. Il s’agit d’un simple transfert : les données JSON passent directement par le proxy et sont relayées telles quelles à votre propre URL de webhook.

Avec le réglage Use Proxy activé, les requêtes qui transitent par le serveur proxy proviennent d’une adresse IP dynamique à chaque envoi. Si vous avez besoin d’une adresse IP statique (par exemple, si vous n’acceptez que les requêtes entrantes de certaines IP, comme une plage d’adresses IP du réseau de votre bureau), désactivez ce réglage et modifiez plutôt votre fonction de webhook en réglant Access-Control-Allow-Origin sur * pour accepter les requêtes POST directement depuis le plugin Figma (sans passer par le serveur proxy).