A Toaster action slides a message into view from one of the borders. The message will stay in view even is the visitor scrolls down the page.
The following is an example of a Toaster message:
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.
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:
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 that can be selected from the settings pulldown menu:
These are the styling options:
- 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.
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:
- 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.
These are the close settings:
- Via close icon
- Activate this to display a close button on the toaster. One must be supplied in the next step.
- Upload 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.
- Close button
- Adds a close button to the body of the dialogue. Only available in edit mode.
- 'Don't show again'
- Adds a link that allows a visitor to never see the dialogue again if clicked. Only available in edit mode.
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.
The Toaster Action is a certified plugin.