Lightbox dialogues provide a powerful way to personalize your online visitor's experience. By overlaying targeted content in a visually prominent box, you can capture attention and deliver key information. These dialogues, designed to engage specific audiences, temporarily dim the webpage, ensuring your message stands out and requires interaction before proceeding.
Create a Lightbox dialogue
To create a new Lightbox dialogue:
Select Dialogues from the BlueConic navigation bar.
Click Add dialogue.
Select "Lightbox" from the gallery.
Give your new dialogue a name.
Save your settings.
Place a Lightbox dialogue
To place the lightbox on your channel, 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.
Design a Lightbox dialogue
Determine if you want to use a dialogue template or create a new one. In either case you are prompted to design the template using HTML, CSS, and JavaScript.
To use an existing template, 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.
To design a new template, click the Add new example button.
Once you've selected a template, it is copied into your lightbox where you start editing. Click the field to modify the form.
Now you can configure the various settings found in the menu in the Properties box on the right-hand side of the page.
Lightbox settings
Once you have chosen your template, use the below settings to customize its look and behavior.
Styling settings:
Contents - Choose an existing template or upload a new one.
Width - Set the width of the dialogue.
Height - Set the height of the dialogue.
CSS URL - Add a CSS URL to be able to use an external CSS library.
Custom CSS - Type or paste CSS to add styling to your interaction.
When to appear settings:
On page load - Select this option for your dialogue to appear on page load.
Scroll depth - Choose at what percentage of a page scroll the dialogue should appear.
Clicked element - Choose a channel element that should be clicked for the dialogue to appear.
Content appears - Select a piece of content that must be present on the page for the dialogue to appear.
Delay appearance - Enter a time in seconds to delay the appearance of your dialogue.
How to appear settings:
No effect - The dialogue will appear with no effect.
Slide in - The dialogue will appear with a slide in effect.
Fade in - The dialogue will appear with a fade in effect.
Close settings:
Close via close icon - Closes the dialogue with an icon, which can be styled here.
Close via Esc/outside click - Closes the dialogue if the 'Esc' key is pressed or a click is registered outside the dialogue.
JavaScript settings:
Custom JavaScript: Type or paste JavaScript code to add extended functionality to your dialogue.
Advanced settings:
Click Event Selector: Register a click for this dialogue if the visitor clicks the selected element.
FAQs
Can I configure my lightbox dialogue to automatically close after a set time?
Yes, you can set a lightbox to automatically close after a set time. To do this, follow these steps:
Go to the What tab of your dialogue.
In the JavaScript settings on the right side of the tab, paste the following JavaScript snippet:
setTimeout(function() {
blueConicClient.event.publish('closeoverlay', [blueConicVariantId]);
}, 10000);Replace the
blueConicVariantIdwith your Lightbox variant's ID.You can find this value in the URL of the variant’s What tab.Change the
10000value to your desired time in milliseconds.Save your changes.
Implementing this JavaScript code will close the Lightbox after the specified time, regardless of user interaction. This snippet can also close other types of overlay dialogues, such as a Toaster.
The closeoverlay event can also be used without the setTimeout() method to close the Lightbox in other situations, such as when a click on a certain element happens:
var element = document.getElementById('myElement');
// Replace 'myElement' with the actual ID of the element
element.addEventListener('click', function() {
blueConicClient.event.publish('closeoverlay', [blueConicVariantId]);
});