Setting up Email Body

The add-on allows you to personalize your email body using dynamic markers, enabling customized and automated content.

Customizing the Body

You can structure your email body using a combination of static text and dynamic markers.

1. Choosing an Editor

You can compose your email using one of two editors:

• WYSIWYG Editor – A rich text editor for visually composing emails.

• HTML Editor – For writing emails directly in HTML code.

This guide focuses on the WYSIWYG Editor, with notes on differences in HTML mode.

Note:

• Switching to the WYSIWYG editor may modify or remove certain HTML elements, as it does not support all tags.

• The HTML editor is not a direct mirror of the WYSIWYG editor; some formatting or code may change.

• Gmail removes interactive elements like forms, JavaScript, <iframe>, and <video>, as well as modern layouts like Flexbox, Grid, and position: fixed;. It also strips external resources such as custom fonts and stylesheets, along with advanced CSS features like animations and clip-path.

• For better rendering, use inline CSS, table-based layouts, and basic HTML. Avoid Flexbox/Grid and host images on a reliable server, as Gmail does not load external scripts.

2. WYSIWYG Editor UI Elements

Toolbar: The toolbar appears above the main editing area and provides various formatting options:

• Basic Formatting – Font selection, bold, italic, underline, strikethrough.

• Advanced Formatting – Font size, block quotes, indentation, alignment, list formatting, hyperlinks, and images.

• Font Selection – Choose a font.

• Bold – Ctrl + B

• Italic – Ctrl + I

• Underline – Ctrl + U

• Strikethrough

• Text & Background Color

• Change Text Color

• Change Background Color

• Font Size – Adjust text size.

• Remove Formatting – Reset text to default.

• BlockQuote – Emphasize text.

• Indentation – Increase or decrease indent.

• Text Direction – Switch to Right-to-Left (RTL) format.

• Text Alignment – Left, Center, Right, Justify.

• Ordered List (Numbered)

• Bulleted List

• Insert Hyperlinks

• Insert Images

3. Markers 

Markers allow you to insert real-time content (e.g., dates, spreadsheet values, charts).

Marker Categories

• Static Text – Fixed subject lines (e.g., "Weekly Sales Report").

• Dynamic Markers – Auto-inserted content like dates, times, or spreadsheet values. Click "Markers" to insert. (Hover over markers to see examples.)

Example: "Report for {{Date}}" → Automatically inserts the current date.

Date & Time Markers

• {{Date}}: Formats the current date (e.g., 02/20/2025).

• {{Date UK}}: Formats the current date in UK format (e.g., 20/02/2025).

• {{Long Date}}: Formats the current date with the full month name (e.g., February 20, 2025).

• {{Long Date UK}}: Formats the current date with the full month name in UK format (e.g., 20 February 2025).

• {{Time}}: Formats the current time (e.g., 10:25:22).

• {{Day}}: The day of the month (e.g., 20).

• {{Day Short}}: The day of the month (e.g., 20).

• {{Day Name}}: Abbreviated day of the week (e.g., Mon).

• {{Day Name Full}}: Full day of the week (e.g., Monday).

• {{Month}}: Month number (e.g., 02).

• {{Month Short}}: Month number without leading zeros (e.g., 2).

• {{Month Name}}: Abbreviated month name (e.g., Feb).

• {{Month Name Full}}: Full month name (e.g., February).

• {{Year}}: Four-digit year (e.g., 2025).

• {{Year Short}}: Two-digit year (e.g., 25).

• {{Hour 24}}: Hour in 24-hour format (e.g., 10).

• {{Hour}}: Hour in 12-hour format (e.g., 10).

• {{Hour Short}}: Hour in 12-hour format without leading zeros (e.g., 10).

• {{Minute}}: Minute (e.g., 25).

• {{Minute Short}}: Minute without leading zeros (e.g., 25).

• {{Second}}: Second (e.g., 22).

• {{Second Short}}: Second without leading zeros (e.g., 22).

• {{Meridiem Upper}}: AM or PM (e.g., AM).

• {{Meridiem Lower}}: am or pm (e.g., am).

Spreadsheet Information

• {{Spreadsheet Id}} – Inserts the unique ID of the Google Sheet (e.g., 1bPV0moERYtu7A6G5Nwd20q34vOpryifFUsPbuOrMIiA)

• {{Spreadsheet Name}} – Inserts the name of the Google Sheet file (e.g., The Veggie Stores - Sales)

Random Values

• {{Random Id}} – Generates a random alphanumeric ID (e.g., a1B2c3D4E5)

• {{Random Number}} – Generates a random number (e.g., 874593)

Cell & Range References: Retrieve spreadsheet values dynamically.

Example: 

{{'Daily Sales'!A2}} – Inserts value from cell A2 in the "Daily Sales" sheet.

{{'Daily Sales'!A1:J50}} – Inserts a range of values as an HTML-formatted table.

Charts: Use these markers to insert a chart from your Google Sheet.

Example: 

{{Chart:'Daily',1460356596}} – Inserts the chart with ID 1460356596 from the sheet titled "Daily".

Named Range Markers: Use these markers to insert data from a named range in your Google Sheet.

Example:

{{NamedRange:EoD_Balance}} – Inserts a named range value (e.g., $1,124.65).

{{NamedRange:VegetableSummary}} – Inserts a named range as an HTML table from the "Daily" sheet.

File Link Markers: Use these to insert downloadable file links from the Sheets tab. The index refers to the file’s position in the list (starting at 1).

Example:

{{FileLink:2}} – Inserts a link to the second file in the list of configured files: https://drive.google.com/file/d/1cPV0moERYtu7A6G5Nwd20q34vOpryifFUsPbuOrMIiA/view

4. HTML Editor

The HTML editor offers a code-based alternative to the WYSIWYG editor.

• Preview Toggle – Switch between code and preview mode.

• Markers – The Markers dropdown helps you easily insert markers into the HTML code body.

5. Best Practices

• Preview the Email – Verify formatting, marker replacements, and layout. Sends a test email to yourself (To, CC, and BCC fields are ignored).

• Recipient Testing – Send emails to specified recipients in the To, CC, and BCC fields. Use your own email for testing before sending to clients or teams.

Next Step: Scheduling Emails and Reports