Help Center

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:

Learn more: Visit BlueConic University

Watch Creating a Lightbox Dialogue in the BlueConic University.

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:

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

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:

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:

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:

Lightbox Styling settings

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

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

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

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

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

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