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:
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:
How to appear
There are three ways for the toaster to appear:
Close settings
These are the close settings for a Toaster dialogue:
Click the Insert close item button for additional options (in Edit mode only):
JavaScript settings
This is the JavaScript option:
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:
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.