📚 Complete Instructions 1. Setup the Editor

Drag the MailCanvas element onto your page or inside a Popup.

Fill in the element properties (Primary Color, Default Logo, Language) to match your app.

2. Saving a Template (Export)

Create a workflow (e.g., when a "Save Template" button is clicked).

Add the action: Element Actions ➔ Generate Export.

Add a new Event trigger: Elements ➔ A MailCanvas Export Generated.

In this new workflow, save the element's states (MailCanvas's current_html and MailCanvas's current_json) into your Bubble database.

3. Resuming a Template (Import)

To load a previously saved design, trigger the action: Element Actions ➔ Load Template.

Pass the JSON text you saved in your database into the Template JSON field. The editor will instantly reconstruct the design!

4. Sending the Email with Dynamic Data

In your Backend Workflows, use the action: Plugins ➔ Inject Placeholders (Free).

Provide the raw HTML saved in your database, and map your tags (e.g., key_1: {name}, val_1: Current User's Name).

Pass the Result of step X's rendered_html into your email provider.

⚠️ Pro-Tip: For the best deliverability, use a professional API (like MailerSend, Postmark, or SendGrid) and format the HTML dynamically using :formatted as JSON-safe to prevent JSON structure breaks.