A Slide-out Message slides a message into view from one of the borders when the visitor clicks a trigger. The position of the trigger will remain static while the visitors scrolls the page contents.
The following is an example of a Slide-out message:
To create a new slide-out dialogue open the Dialogues tab, click "Add dialogue" and select "Slide-out message" from the gallery. After creating the dialogue, open the "What" tab and navigate to the page where you want to add the slide-out. Click the "Place on this page" button to add the slide-out to the page:
You now see an empty slide-out message title and content on the right hand side of the page, ready to be edited:
If you do not see the empty slide-out message at first, try reloading the page to make it appear.
Slide-out messages allow for a lot of customization, so to help you we added some great starter templates. 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 sandbox where you can now start editing like in the regular Text editor:
Use "Edit trigger" and "Edit content" buttons to select which part of the slide-out to edit:
Note that the form is part of the content and can be edited as well! Click the field to modify the form.
The slide-out 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 slide-out message.
- Vertical text orientation
- Activate this option if you want to rotate the text so it will align vertically with the side of the page.
- CSS URL
- Enter the URL of a CSS stylesheet to load into the page to style the slide-out.
- 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 slide-out.
The following properties can be set:
- Select the position on the page where the slide-out trigger and message will appear.
- By default, the slide-out will be centered on the side of the page you selected for location. Alternatively, you can align the slide-out to a fixed number of pixels from the adjoining side of the page.
When to appear settings
These are the timing settings:
- On page load
- Activate this option when you want the slide-out 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 slide-out to appear when the visitor scrolls the page.
- Scroll depth
- Activate this option when you want the slide-out to appear when the visitor scrolls down a certain percentage of the page. Enter the percentage number.
- Clicked element
- Activate this to have the slide-out 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 slide-out 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 slide-out 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.
This advanced settings option is relevant when you want to register conversions for the slide-out. 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 Slideout Action is a standard plugin.