Help Center

A Slide-out message in BlueConic slides a message into view from one of the borders of your page when a visitor clicks a trigger. The position of the trigger remains static while the visitors scrolls the page contents.

The following is an example of a slide-out message:

Configuring a Slide-out message in BlueConic

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 content

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:

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 the 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. In this code the variable blueConicVariantId is made available, e.g. register a conversion as follows:

if (somethingHappened) {
  blueConicClient.createEvent('CONVERSION', 
  blueConicVariantId);
}

 

Advanced settings and click event selectors

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.

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.