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:

Linking with Email

You can add http:// and https:// URLs in your emails and have those links tracked or not.

Tracking email link click events requires obfuscating/changing the URL structure to capture the event, then redirect back to the original URL you set. This redirection happens very quickly and generally goes unnoticed.

For example, when you send a link with link-tracking and investigate the link, you may see a strange URL like:

https://some-domain/c/eJxU0D2uGzEMBODTrDoZJPW3KlSk8TUMSuTGCvYPXiWAbx_4Ve_VM8CHGT7PR5eCUjFGajZFyNZzBluBxWKoPnhIEmk2UiIAVcxGCyaXQyQMwTxLm10KsDRNWRdIqSp7lMUhujliyqYXAgpA6DF7cuHGmesSF_JBY6uxTR427utN-H2N17HZvl-jj79Db-3YzFqeY5zX5H5NdJ_ofux69d87r1_pfoy-9MajH_tnTBViDqr2A1gfMthZM9k8Sws4R6mq5lz5ra9P3SXwnDLblLBZn6hZduIsOpEANcBSwbzKn2OfPPyUL93lMfr27Q9v_hX6HwAA__95Q2Tu

This is normal! Once you click the link, it will send us the click event, then redirect the user to the correct URL. This happens instantly and the user will likely not know it is happening. By default, all emails sent from OneSignal will have link tracking enabled, causing this URL structure change.

If you plan to add deep links to emails, it may have unexpected behavior. See Deep Linking for details.

You can disable link tracking by unchecking the Track link clicks option in the dashboard email form. For Emails sent through our API set disable_email_click_tracking to true in your API requests.

If you disable link tracking:

• OneSignal cannot track link clicks and will show N/A in the Email Message Reports Click-Through Rate.
• All URLs in the email will not be tracked. There is not an option to disable link tracking for only specific links.

Deep Linking with Email

See Deep Linking for details.

Email Unique Link Tracking

To accomplish unique link tracking you can add UTM's directly to your emails. This will allow you to identify which links were clicked in an email.

Email Unsubscribe Links

See Unsubscribe Links & Email Subscriptions for details.

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.