Help Center

Lightbox Dialogue

In BlueConic, a Lightbox dialogue is a content overlay that lets you highlight information for your customers or visitors. A Lightbox grays out the webpage and displays highlighted content in a box to stand out. Your customer or visitor has to close the lightbox before proceeding.

Here's an example of a lightbox that asks for a customer's email address:

How to use content overlays in lightboxes in BlueConic

Configuring a BlueConic Lightbox content overlay

To create a new Lightbox dialogue, select Dialogues from the BlueConic navigation bar, click Add dialogue, and select "Lightbox" from the gallery. After creating the dialogue, open the What tab of your dialogue and navigate to the page where you want to add the lightbox. Click the Place on this page button to add the lightbox to the page:

How to configure a content overlay lightbox dialogue in BlueConic customer data platform

You now see an empty lightbox, ready to be edited.

How to create a content overlay lightbox dialogue in BlueConic

If you do not see the empty lightbox at first, try reloading the page to make it appear.

Adding content to a Lightbox

Lightboxes are very flexible, so to help you out we added some great templates to you get started. Click Load from Template in the Properties widget on the right, and you will get a gallery of starter templates:

Does BlueConic offer templates for creating content overlays and lightboxes?

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 lightbox where you can now start editing like in the regular Text editor:

How to use templates in BlueConic to add content overlays

Note that the form is part of the content and can be edited as well! Click the field to modify the form.

The lightbox has categorized settings that can be selected from the settings pulldown menu in the Properties box on the right-hand side of the page:

How to show content overlays to customers and visitors in BlueConic

Lightbox Styling settings

How to add custom styles and templates for content overlays and lightboxes in BlueConic

These are the styling options:

Contents
Click "Load from Template" to switch the look of your lightbox.
Width
Enter the number of pixels to use for the lightbox width. Leave this empty and the lightbox will resize automatically to accommodate for its contents.
Height
Enter the number of pixels to use for the lightbox height. Leave this empty and the lightbox will resize automatically to accommodate for its contents.
CSS URL
Enter the URL of a CSS stylesheet to load into the page to style the lightbox.
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 lightbox.

 

When to appear settings

How to use custom CSS in BlueConic for lightboxes and content overlays

These are the timing settings:

On page load
Activate this option when you want the lightbox to appear when the visitor loads the page. This option is automatically selected if you do not select any other option.
Scroll depth
Activate this option when you want the lightbox to appear when the visitor scrolls down a certain percentage of the page. Enter the percentage number.
Clicked element
Activate this to have the lightbox 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 lightbox 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 lightbox 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 settings

How to edit the appearance settings for a lightbox content overlay in BlueConic

These are the appearance settings:

No effect
Select this to have the lightbox appear upon activation.
Slide in
Select this to have the lightbox slide into vision from the direction you specify.
Fade in
Select this to have the lightbox slowly appear.

 

Close settings

How to edit close settings for a content overlay lightbox in BlueConic

These are the close settings:

Close via close icon
Check this box to display a close icon. Use the Position menu to choose the location (top right, top left, or bottom of the lightbox). Add Padding in pixels. 
Use custom icon
Activate this box to upload custom icons to use for the close icon of the lightbox. You can upload an icon file for your custom icon's normal and hover states.
When close icon is clicked, never show this lightbox again.
Activate this to specify that once a customer clicks the close icon, the lightbox isn't shown again.
Close via Esc / outside click
Closes the lightbox if the visitor presses the Escape key or clicks outside the lightbox.
Click the Insert close item button for additional options:
Insert close button
Adds a close button to the body of the dialogue. Available only in edit mode.
Insert 'Don't show again' link
Adds a link that lets a customer click to choose to never see the dialogue again. Available only in edit mode.

 

JavaScript settings

javascript.png

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

How to register conversions and click events from content overlay lightboxes in BlueConic

This advanced settings option is relevant when you want to register conversions for the lightbox. 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