The Email Body
Setting up Email Body
The add-on allows you to personalize your email body using dynamic markers, enabling customized and automated content.
Example:
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.
{{'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:'Payment Methods Chart',147487688,800,600}}
'Payment Methods Chart' – Sheet name.
147487688 – The chart ID (Use the Markers drop-down at the top-right of the toolbar to find the Chart ID).
800,600 – The width and height in pixels, supporting a maximum of 1280 pixels.
Images: Insert an image from a range of cells in your Google Sheet.
Example: {{Image:Monthly!A1:C13}} – Renders an image of the specified range.
Timelines: Insert timeline charts as images.
Example: {{Timeline:'Targets Timeline',800,600}}
'Targets Timeline' – Timeline name.
800,600 – Width & height.
Named Range Markers: Use these markers to insert data from a named range in your Google Sheet.
{{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.
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