Slide-out Message (Action)

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:

Slide-out configuration

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.

Adding contents

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:

Screen_Shot_2017-09-28_at_2.12.26_PM.png

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

Styling settings

These are the styling options:

Contents
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.

 

Positioning settings

The following properties can be set:

Location
Select the position on the page where the slide-out trigger and message will appear.
Alignment
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.

 

Javascript settings

This is the JavaScript option:

Custom JavaScript
Enter JavaScript code that you would like to be executed when the lightbox appears.

 

Advanced settings

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.