Toaster (Action)

A Toaster action in BlueConic is a content window that slides a message into view from one of the borders of the page or app. 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?

Toaster configuration

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:

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

Adding content

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

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:

Contents
Click "Load from Template" to switch the look of your toaster.
CSS URL
Enter the URL of a CSS stylesheet to load into the page to style the toaster.
Custom CSS
Enter custom CSS rules to style the content. If you use a template its CSS will be loaded into this field so you can change the looks of the toaster.

 

Positioning settings

How to specify the postition of a toaster message in BlueConicThe 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:

On page load
Activate this option when you want the toaster to appear when the visitor loads the page. This option is automatically selected if you do not select any other option.
On scroll
Activate this option when you want the toaster to appear when the visitor scrolls the page in any direction.
Scroll depth
Activate this option when you want the toaster to appear when the visitor scrolls down a certain percentage of the page. Enter the percentage number.
Clicked element
Activate this to have the toaster appear when a certain element is clicked by the visitor. Use the visual picker or enter the jQuery selector to indicate the element that should be clicked.
Content appears
Activate this to have the toaster appear when a certain element is present on the page the visitor sees. Use the visual picker or enter the jQuery selector to indicate the element that should be present.
Delay appearance with X sec.
If you enter a number of seconds, the toaster will not appear immediately when the event you selected takes place for the visitor. Instead, it appears with a delay after the event took place.

 

How to appear

How to specify Toaster style and appearance in BlueConicThere are three ways for the toaster to appear:

None
The toaster instantly appears in the configured position.
Slide in
The toaster is animated to slide into the configured position from outside the page.
Fade in
The toaster is animated to slowly fade into vision in its configured position.

 

Close settings

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

These are the close settings for a Toaster interaction:

Close via close icon
Activate this to display a close button on the toaster.
Use the Position menu to choose the location (top right, top left, or bottom right side of the Toaster). Add Padding in pixels. 
Optionally, you can supply your own icon in the next step.
Use custom icon
Upload custom icons to use for the close button, one for the normal state of the button and one for when the visitor hovers over it.
When close icon is clicked, never show this toaster again.
Activate this to specify that once a customer clicks the close icon, the toaster isn't shown again.

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

Insert close button
Adds a close button to the body of the dialogue. Available only in edit mode.
Insert 'Do not show again' link
Adds a link that allows a visitor to never see the dialogue again if clicked. Available only in edit mode.

 

JavaScript settings

javascript.png

This is the JavaScript option:

Custom JavaScript
Enter JavaScript code that you would like to be executed when the toaster appears. In this code the variable blueConicVariantId is made available, e.g. register a conversion as follows:

if (somethingHappened) {
  blueConicClient.createEvent('CONVERSION', blueConicVariantId);
}

 

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:

Click Event Selector
Select the element that will fire the click event for this dialogue when the visitor clicks it. Use the visual picker or enter the jQuery selector to indicate the element that should be clicked by the visitor to fire the event.

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.