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:
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.
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:
These are the styling options:
- Click "Load from Template" to switch the look of your lightbox.
- 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.
- 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.
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.
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.