Skip to main content
Toaster Dialogue
Updated over a year ago

A Toaster dialogue in BlueConic is a content window that slides a message into view from one of the borders of the page. Your message will stay in view even as the visitor scrolls down the page.

This example shows a BlueConic Toaster message:

What is a toast content message in the BlueConic customer data platform?

Configuring a Toaster dialogue in BlueConic

After creating a new Toaster dialogue, open the What tab and navigate to the page where you want to add the toaster. Click the "Place on this page" button to add the toaster to the page:

How to create a toaster content message in BlueConic

Now you see an empty toaster, ready to be edited:

How to edit content in a toaster popup window in BlueConic

If you do not see the empty toaster at first, try reloading the page to make it appear.

Adding content to a Toaster dialogue

Toasters are very flexible, so to help you out we added some great templates for you to start with. Click "Load from Template" in the properties widget on the right and you will get a gallery of starter templates:

How to add content to a toaster message in BlueConic

Creating custom toaster dialogues

You can edit existing templates by hovering over them and selecting the pen icon that appears, or you can design new templates with the "Add new example" button. In either case you are prompted to design the template using HTML, CSS, and JavaScript.

Select the template that fits your content best. The template is copied into your toaster where you can now start editing like in the regular Text editor:

How to use a template to quickly create a toaster message in BlueConic

The toaster has categorized settings you can select from the settings pulldown menu:

How to configure a toaster to display on screen in BlueConic

Styling

How to style a toaster message in BlueConic

These are the styling options:

Positioning settings

How to specify the postition of a toaster message in BlueConic

The positioning settings allow you to pick the side where your toaster will appear. First pick the location. By default the location of the toaster will be centered along the edge that you choose.

You also have the option to align the toaster relative to one of the adjoining page edges. Enter the number of pixels you want as distance between the page edge. Click on the name of the edge to toggle between the edges. For example, if you locate the toaster to the right of the page, you can align it to 100px from the bottom, or, click on the word "bottom" to toggle it to "top" and align the toaster to 100px from the top.

When to appear

How to specify when a toaster message should popup in BlueConic using Toaster timing settings

These are the timing settings:

How to appear

How to specify Toaster style and appearance in BlueConic

There are three ways for the toaster to appear:

Close settings

How to set Toaster slide, fade, and close settings in BlueConic

These are the close settings for a Toaster dialogue:

Click the Insert close item button for additional options (in Edit mode only):

JavaScript settings

How to use custom JavaScript in the BlueConic Toaster window

This is the JavaScript option:

Advanced settings

How to set advanced JavaScript display settings and set click events for a Toaster in BlueConic

This advanced settings option is relevant when you want to register conversions for the toaster. In order to be able to register a conversion, BlueConic needs to register a click event first:

Note that there are several instances where you do not need to specify a click event selector. See the What tab documentation for Dialogues for details.

Testing and troubleshooting dialogues

For tips on testing your dialogues with the BlueConic Simulator, see the video and tips in Testing Your Dialogues. Also see the troubleshooting dialogues section.

Did this answer your question?