Lightbox (Action)

A Lightbox grays out a web page and displays highlighted content in a box to stand out. The visitor has to close the lightbox before proceeding.

The following is an example of a Lightbox:

Lightbox configuration

To create a new lightbox dialogue open the Dialogues tab, click "Add dialogue" and select "Lightbox" from the gallery. After creating the dialogue, open the "What" tab 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 contents

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

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:

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

Alternative close
Activate this to allow the visitor to dismiss the lightbox by pressing Esc or clicking outside of it.
Show close icon
Activate this to display a close icon on the top right of the lightbox.
Use custom close icon
Activate this to upload custom icons to use for the close icon on the top right of the lightbox.

 

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

 

The Lightbox Action is a standard plugin.