Help Center

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:

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:

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 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:

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:

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

Styling

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

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

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

There 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

These are the close settings for a Toaster dialogue:

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

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

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.

 

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.