No painel de exportação do Emailify, selecione a opção Custom Webhook URL na lista suspensa e cole a URL do seu endpoint personalizado, criado para tratar o payload JSON enviado pelo Emailify.

Quando estiver tudo pronto, clique no botão POST para exportar os e-mails selecionados no Figma e enviá-los como uma solicitação POST para o seu endpoint de webhook personalizado.

As imagens são enviadas automaticamente para a nossa CDN e incluídas como atributo src de todas as tags `` na propriedade de string html enviada no payload.

O código é exportado como HTML por padrão. Se o seu endpoint precisar de outro formato, selecione MJML Source Code ou um formato específico de plataforma nas opções de exportação do webhook.

O objeto de payload JSON enviado via POST para a sua URL

O payload JSON enviado pelo Emailify contém as chaves e os valores abaixo. Confira se a sua URL de webhook personalizada foi criada para tratar esse payload, que você pode usar como quiser.

{
  "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 o código-fonte MJML para um fluxo de CI

Escolha MJML Source Code no seletor de formato do webhook quando o seu endpoint precisar do código-fonte MJML gerado para validação ou compilação. Selecione a mesma versão do MJML que o seu fluxo de CI usa. O Emailify adiciona os campos mjml e mjmlVersion e mantém o campo html compilado:

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

O valor de mjmlVersion é mjml4 ou mjml5, de acordo com a versão selecionada no Emailify. O seu endpoint pode armazenar o MJML, disparar a validação no CI e deixar o CI controlar qualquer upload posterior para a sua plataforma de e-mail. Você pode usar os campos JSON personalizados abaixo para adicionar metadados do fluxo de trabalho, como o nome de um app, de um template, de um ambiente ou de um idioma.

Adicionar corpo e cabeçalhos JSON personalizados ao payload

Se quiser, adicione a sua própria string JSON válida aos campos abaixo. Ela é incluída automaticamente no objeto header e/ou no objeto de corpo data do payload que o plugin envia como solicitação POST para a URL do seu endpoint:

• Defina propriedades personalizadas do objeto header no campo Custom Request Headers (Optional) (por exemplo, { "Authorization": "Bearer xyz" }).
• Defina propriedades personalizadas do objeto de corpo data em Custom Extra JSON Data (Optional) (por exemplo, { "category": "emailify" }).
• Ou defina propriedades personalizadas do objeto de corpo data “por e-mail” no campo Extra Email-Specific JSON Payload Data (Optional) (por exemplo, { "id": 26, "tag": "email", "edit": true }) abaixo de qualquer e-mail da lista no painel de exportação. Esses dados são mesclados com os dados JSON globais que você já tiver definido (acima).

Enviar o payload JSON via POST por um servidor proxy

Como os plugins do Figma são executados dentro de um elemento iFrame em sandbox no app do Figma, eles não têm origin. Por isso, a URL de webhook para a qual você envia o payload JSON via POST pode rejeitar a solicitação por problemas de CORS entre origens.

Para contornar isso, você pode atualizar a sua própria função de webhook com Access-Control-Allow-Origin definido como * (todas) ou ativar a opção Use Proxy (que vem ativada por padrão) nas configurações do plugin Emailify ao exportar o e-mail para um webhook personalizado.

Ativar a opção Use Proxy encaminha automaticamente a solicitação por um servidor proxy antes de chegar à sua URL de webhook, para garantir que a solicitação POST recebida tenha um origin, o que deve resolver os problemas de CORS. É apenas um encaminhamento: os dados JSON passam direto pelo proxy e seguem diretamente para a sua URL de webhook.

Com a opção Use Proxy ativada, as solicitações encaminhadas pelo servidor proxy vêm de um endereço IP dinâmico a cada envio. Então, se você precisar de um endereço IP estático (por exemplo, se só aceita solicitações de determinados IPs, como uma faixa de endereços IP da rede do seu escritório), desative essa opção e atualize a sua função de webhook para definir Access-Control-Allow-Origin como *, para aceitar solicitações POST direto do plugin para Figma (sem passar pelo servidor proxy).