Engage Studioのビジュアルメールエディター（Beefree SDK搭載）に加えて、Treasure Dataはカスタムコードメールを扱うための強力なワークフローを提供しています。事前承認されたHTMLテンプレートをEngage Studioに直接インポートし、専用のHTMLエディター（GrapesJS搭載）を使用して編集できます。
このエディターは、デザインエージェンシーから事前承認されたカスタムHTMLテンプレートを持ち、コードの完全な制御を維持する必要があるマーケターに最適です。
HTMLエディターを使用して新しいテンプレートを作成するには、以下の手順に従います：
Email Templates > Create Newに移動します。
Template Nameを入力します。
Email Typeで「HTML Email」を選択し、「Create」を選択します。
HTMLエディターが開きます。エディターの上部で、Template Subject行を設定できます。
カスタムコードをインポートするには、Import HTML画面に移動します。
- 左側のツールバーで、Importアイコン（下向き矢印）を選択します。
ポップアップウィンドウで、HTMLコードを左側のテキストボックスに貼り付けます。
プレビューの生成（推奨）： **「Generate Preview」**を選択して、エディターがコードを右側でどのようにレンダリングするかを確認します。このプレビューは、配信可能性と互換性を確保するためにコードを変更する可能性のあるサニタイズ処理の後に生成されます。
- プレビューに満足したら、**「Import」**を選択します。
HTMLエディターは、インポートしたテンプレートを確認および変更するためのツールスイートを提供します。
| 機能 | 説明 |
|---|---|
| Undo/Redo | インポートの取り消しを含め、編集の完全な履歴制御が可能です。 |
| Clear Canvas | エディターからすべてのコンテンツを削除し、クリーンで空のHTMLドキュメントにします。 |
| Preview Mode | 現在のメールコンテンツのフルスクリーンプレビューを切り替えます。 |
| Code Editor | HTMLとCSSを並べて表示し、テンプレートのコードを直接制御できます。 |
| Plain Text Editor | プレーンテキストビューに切り替えます。これは最適な配信可能性のためにHTMLと一緒に自動的に保存されます。 |
| Viewports | ビューポートを切り替えて、異なるデバイス間でのメールのレスポンシブ性を確認します。 |
HTMLをインポートした後、左側のメニューから以下のコンテンツブロックをドラッグアンドドロップしてメールをさらにカスタマイズできます：
- Text
- Image
- Link
- 1 Column
- 2 Columns
- Unsubscribe Link / Unsubscribe Email（コンプライアンスに必要な特別なリンク）
テンプレートを保存すると、エディターの履歴がリセットされます。これは、Undo/Redo履歴がバックエンドのHTMLの新しい保存状態を反映するようにするためです。