Design emails with drag-and-drop

Learn how to create beautiful, responsive emails using OneSignal’s Drag and Drop Email Builder. This guide covers global settings, row and content customization, saved templates, link tracking, personalization, and more.

Overview

The OneSignal Drag and Drop Email Builder allows you to visually design emails exactly as they will appear in your users’ inboxes. It consists of three core components:

• Settings – global configurations that apply across your message
• Rows – structural containers to layout content horizontally
• Content – individual blocks such as images, text, and buttons

---

Settings

Settings control the foundational style and layout of your message. These settings cascade down to rows and content blocks unless explicitly overridden.

Image shows settings for the builder

Option	Description
Content area width	Width of the email in pixels. Default is 600px.
Content area alignment	Align content to the left or center.
Background color	Background color behind the content area.
Content area background color	Background color within the content area.
Default font	Font applied throughout the email unless customized at the row or content level. Custom fonts require HTML.
Link color	Color for all hyperlink text.
Language	Sets the lang attribute in HTML for accessibility. Defaults to English.

---

Customize rows

Rows are the horizontal building blocks of your email layout. Each row can contain multiple columns and content blocks.

Image shows the ability to use multiple rows

Each row and its columns can override global settings, giving you granular control over design and responsiveness.

Saved rows

Click the save icon on any row to reuse it across templates. Updates to a saved row can optionally apply to all templates that use it.

How to save a row

To access saved rows, go to the Rows tab and open the saved rows dropdown:

Select saved row

Dropdown categories:

• Empty – blank row templates
• My Saved Rows – rows you’ve saved
• Sample Rows – prebuilt templates by OneSignal

Row properties

Click on a row to edit properties such as:

• Background color or image
• Visibility by device type
• Column structure
• Padding and borders

To add a background image:

Use the padding setting to expand the visual space:

If there’s no clickable content, consider using an Image Block instead of a row background image.

Customize columns

Adjust column widths and individual column settings under Customize Columns.

Image shows the ability to use multiple columns

---

Content

Content blocks represent the core of your message — images, text, buttons, and more.

Image shows the drag and drop blocks to form content

Drag a content block into a column and it will adjust to the column width. Each block has its own settings like padding, font size, and alignment.

Image shows content block settings

---

Image file manager

Uploaded images are accessible across your team. You’ll see two folders:

• myfiles (writable)
• shared (read-only)

Organize uploads in myfiles by creating subfolders.

Image shows our asset file manager for your email

---

Unsubscribe link

All OneSignal emails must contain an unsubscribe link using [unsubscribe_url].

Add it either:

• Via HTML: <a href="[unsubscribe_url]">Unsubscribe</a>
• Using the Special links option in the editor

Emails missing [unsubscribe_url] will have a default footer link automatically appended, which cannot be styled or removed.

Learn more

---

HTML blocks

Add custom HTML with HTML Blocks. JavaScript is not supported.

Inline CSS is recommended. Some email clients strip out class or ID attributes.

<div style="background: red;">This now has custom styling!</div>

---

Message personalization

Use liquid templating to personalize messages based on user tags.

Example: {{ first_name | default: "there" }}

Image shows the use of tag substitution

More on personalization

---

Emojis

Emojis may render differently across email platforms.

Image shows how emojis render on different email clients

---

Linking with email

Links can include http:// or https:// URLs and support click tracking.

Tracked links are temporarily obfuscated before redirecting to the actual destination:

https://some-domain/c/eJxU0D2uGzEMBODTrDoZJP...

This redirection is quick and usually invisible to users.

To disable link tracking:

• Uncheck Track link clicks in the dashboard
• For API: Set disable_email_click_tracking: true

Track link clicks is disabled.

Note: If disabled, click data will not be available in Email Message Reports. You cannot disable tracking on individual links.

---

Deep linking with email

For mobile deep links, see Deep Linking for caveats and configuration.

---

Unique link tracking

Add UTM parameters directly in your URLs to identify individual email links. Learn more

---

Save your work

You can save your email design as a template for future use.

Image shows how to save as a template

Build upon a base template

Start from a reusable base layout by duplicating an existing template:

Image shows how to duplicate an email template

Templates are stored in Messages > Templates.