OneSignal's Email Drag and Drop Builder lets you visually design and build your emails just as they'll be seen in your users' inbox. It consists of three different parts:

• Settings - settings that apply to the entire message
• Rows - rows of content in the message, which can be added, removed, copied, & moved
• Content - individual content blocks: images, text, buttons, etc., which also can be added, removed, copied, and moved

Settings

Control the general settings for the message. This is very useful to build a coherent message very quickly.

Options are inherited by Row and Content blocks. For example, the font family set will be used everywhere in your message, except where you use a custom setting.

Customize Rows

Drag and drop rows into the email body to setup the structure of your message. Rows define the horizontal composition of the message. Each row can contain a number of columns in which you add content.

Every row and each column within has its own property settings that override the default settings. This gives you the kind of flexibility that before was only achieved with hand-coded email.

Saved Rows

To save a row, select the save icon. For Saved Rows, if you make an edit in one Saved Rows, you can update all instances of that row across all of your templates.

Handling Saved Rows

To access the saved rows for your project, navigate to the Rows tab within the Drag and Drop editor and select the saved rows dropdown menu.

Here’s what you’ll find in the dropdown menu by default:

1. Empty: This category includes blank row layouts that haven't been saved.
2. My Saved Rows: This section contains rows that you have personally saved.
3. Sample Rows: This includes all default templates created by OneSignal ready to be customized to your branding.

Row Properties

Select the row to pull up its properties.

You can change all aspects of the selected row and each column within including background colors and images, desktop vs mobile visibility, column sizes, padding and boarders.

For example, to set a background image in which you can overlay clickable text or buttons. Toggle on the "Row background image" property and upload your image like this:

To then expand the row, use the "Padding" property like shown below. You can also update padding of the content elements within the row if you need more space. If the row itself has no clickable content, an Image Block would be recommended instead of the row background image property.

Customize Columns

Under Customize Columns, you can adjust the sizes and select the options specific to the column.

Content

The Content section includes a series of tiles that represent the different kinds of content you can use in your message.

To use them, just drag one inside a column, it will auto-adjust to the column width.

Every content block has it owns settings, such as granular control on padding. Select the content block and the right-side panel automatically switches to a property panel for the selected content element.

Image File Manager

All images uploaded will be available for everyone on your team that can access the email editor. Be aware that when adding images to your email with the image block, the editor will show you myfiles and shared.

Note that shared is Read Only . If you want to add and use files, please use myfiles. You can create additional folders within myfiles for further file management.

Unsubscribe Link

Currently, every email sent from OneSignal requires an unsubscribe link to let users opt-out of future mailings. This unsubscribe link must be set using this literal syntax [unsubscribe_url] within the href= of your HTML or using the Special links within the Drag & Drop Template Builder.

See Unsubscribe Links & Email Subscriptions for more details.

🚧

Must contain [unsubscribe_url]

Emails that do not contain [unsubscribe_url] will have one added automatically at delivery at the bottom of the email which cannot be styled or overwritten.

HTML Blocks

HTML Content Blocks are designed to add custom HTML within your email template. Javascript is not supported by our email builder and should generally be avoided because it is not allowed by most email clients. More details here.

📘

Adding CSS styling to your HTML elements

Please keep in mind that when adding CSS to the elements within your HTML block, some web based email clients may strip the class or ID when receiving emails. Best practices for styling, are to use inline CSS for your elements.

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

Message Personalization

OneSignal supports tag substitution to customize your email messages.

Using liquid templating language, e.g. {{ first_name | default: "there" }}, you may incorporate data stored on device records into your messages. For example, set a default value if a user does not have a tag already.

To learn more about tag substitution, see Message Personalization.

Emojis

Similar to push notifications, each email platform renders emoji slightly differently, so plan accordingly:

Save Your Work

OneSignal Email Messaging supports Templates, letting you save designs you like for future use. When you've designed a layout you like, just click Templates > Save Template in the top of the create message box, and you'll be able to name your template.

Build Upon a Base Template

Many times, you will have a "default" template to build upon as new content comes out. Templates are stored in Messages > Templates and can be duplicated to build upon your base.