Help Center

Slide-out message Dialogue

A Slide-out message in BlueConic slides a message into view from one of the borders of your page or app 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:

How to find an Example of a slide-out message in the BlueConic customer data platform

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:

How to create a slide-out dialogue in BlueConic

You now see an empty slide-out message title and content on the right-hand side of the page, ready to be edited:

How to use slide out messages for reaching your customers with BlueConic

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:

How to add content to a slide out message in BlueConic

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:

How to use a template to create content for a Slide-out message in BlueConic

Use the Edit trigger and Edit content buttons to select which part of the slide-out to edit:

How to add edit triggers and edit content buttons to a Slide-out message

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:

How to configure a Slide-out message in BlueConic

Styling settings

How to adjust style settings for a Slide-out message in BlueConic

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

How to adjust positioning settings for a Slide-out message in BlueConic

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

How to decide when a Slide-out message should appear in BlueConic

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

How to configure JavaScript settings for Slide-out messages in BlueConic

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

How to adjust Advanced settings and Click Event Selectors for Slide-out dialogues and messages in BlueConic

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

Was this article helpful?
0 out of 0 found this helpful