カスタムWebhook URLにメールをアップロードする

Emailifyで生成したHTMLまたはMJMLソースを、JSONのWebhookペイロードとして独自のエンドポイントに送信します。

Emailifyのエクスポートパネルで、ドロップダウンリストからCustom Webhook URLオプションを選択し、Emailifyから送信されるJSONペイロードを処理できるように作成した独自のURLエンドポイントを貼り付けます。

準備ができたらPOSTボタンをクリックします。Figmaで選択したメールがエクスポートされ、カスタムWebhookのエンドポイントにPOSTリクエストとして送信されます。

画像は自動的に当社のCDNにアップロードされ、ペイロードで送信されるhtml文字列プロパティ内のすべての``タグのsrc属性に設定されます。

コードはデフォルトでHTMLとしてエクスポートされます。エンドポイント側で別の形式が必要な場合は、WebhookのエクスポートオプションでMJML Source Codeまたはプラットフォーム固有の形式を選択できます。

URLにPOSTで送信されるJSONペイロードオブジェクト ​

Emailifyから送信されるJSONペイロードには、以下のキーと値が含まれます。カスタムWebhook URLがこのペイロードを処理できるように作成されていることを確認してください。受け取ったペイロードは自由に活用できます。

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

MJMLソースをCIワークフローに送信する ​

エンドポイントで検証やコンパイルのために生成されたMJMLソースが必要な場合は、Webhookの形式セレクターでMJML Source Codeを選択します。CIワークフローと同じMJMLバージョンを選択してください。Emailifyは、コンパイル済みのhtmlフィールドを残したまま、mjmlとmjmlVersionフィールドを追加します。

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

mjmlVersionの値はmjml4またはmjml5で、Emailifyで選択したバージョンと一致します。エンドポイントでは、MJMLを保存したり、CIでの検証をトリガーしたりでき、その後のメールプラットフォームへのアップロードはCIで制御できます。以下のカスタムJSONフィールドを使って、アプリ、テンプレート、環境、言語名などのワークフロー用メタデータを追加することもできます。

ペイロードにカスタムのJSONボディとヘッダーを追加する ​

必要に応じて、以下の入力欄に独自の有効なJSON文字列を追加できます。追加した内容は、プラグインからエンドポイントURLにPOSTリクエストとして送信されるペイロードのheaderオブジェクトやdataボディオブジェクトに自動で含まれます。

  • Custom Request Headers (Optional) 欄で、カスタムのheaderオブジェクトのプロパティを設定できます（例：{ "Authorization": "Bearer xyz" }）。
  • Custom Extra JSON Data (Optional) で、ボディのdataオブジェクトにカスタムプロパティを設定できます（例：{ "category": "emailify" }）。
  • また、エクスポートパネルのリストにある各メールの下のExtra Email-Specific JSON Payload Data (Optional) 欄で、ボディのdataオブジェクトのカスタムプロパティを「メールごと」に設定することもできます（例：{ "id": 26, "tag": "email", "edit": true }）。これは、上記でグローバルに設定済みのJSONデータとマージされます。

プロキシサーバー経由でJSONペイロードをPOSTする ​

FigmaプラグインはFigmaアプリ内のサンドボックス化されたiFrame要素の中で実行されるため、originを持ちません。そのため、JSONペイロードのPOST先のWebhook URLが、クロスオリジン（CORS）の問題によりリクエストを拒否する可能性があります。

これを回避するには、独自のWebhook関数でAccess-Control-Allow-Originを*（すべて）に設定するか、カスタムWebhookへのエクスポート時にEmailifyプラグインの設定でUse Proxyトグル（デフォルトでオン）を有効にします。

Use Proxyトグルを有効にすると、リクエストはWebhook URLに届く前にプロキシサーバーを自動で経由します。これにより受信するPOSTリクエストにoriginが付くため、CORSの問題は解決するはずです。これは純粋な転送リクエストなので、JSONデータはそのままプロキシを通過し、独自のWebhook URLに直接転送されます。

Use Proxy設定を有効にすると、プロキシサーバーを経由するリクエストは、送信のたびに動的なIPアドレスから送られます。そのため、静的なIPアドレスが必要な場合（オフィスのネットワークのIPアドレス範囲など、特定のIPからの受信リクエストのみを許可している場合など）は、この設定をオフにしてください。そのうえで、Webhook関数でAccess-Control-Allow-Originを*に設定し、（プロキシサーバーを経由せずに）FigmaプラグインからのPOSTリクエストを直接受け付けるようにします。