Skip to main content
All CollectionsFor WebBuildVisual Editor
How to create a Lightbox / Exit Intent using the Visual Editor
How to create a Lightbox / Exit Intent using the Visual Editor
James Harber avatar
Written by James Harber
Updated over 7 months ago

Firstly you will need to create a new test by selecting the New Test button

Then on the following page Choose Webpage >> Choose Target >> Choose Visual Editor

Click on the Visual Editor button on the bottom right of the screen.

On the next screen enter the URL of the page you wish the Lightbox to appear from. When you type in a URL the system will test to see if it’s a valid link and if so, the globe will turn green.

Click on Continue on the bottom right of the screen.

This page then shows the page based on the above URL.

Creating a Lightbox / Exit Intent using the Widget function

To create a Lightbox, click on the arrow to the right of the control.

Click on the ‘+’ sign

Then click on widgets to use the WYSIWYG editor

Select Lightbox 1

Within the menu you now can start creating your Lightbox.

Select the background colour, and alter its opacity if you wish. This is going to be the colour that will cover most of the screen to highlight the Lightbox.

Then select the colour and width of the actual Lightbox itself.

Add you headline followed by the content body. Try to make the headline impactful and the content body as short and snappy as you can.

It’s now time to design the button.

Add the button text and the destination URL for when the button is clicked. Choose a button colour and the text colour.

You will now need to add how you want the Lightbox to perform.

Immediately means that the Lightbox will be displayed as soon as the page is loaded. This can be useful for highlighting promotions.

To show the Lightbox only when the mouse is moved towards the close X on a webpage check the ‘ON EXIT INTENT’

If you want the Lightbox not to trigger on exit or immediately then check the ‘ON DELAY’ box and add a delay time in the following box.

Click on APPLY WIDGET to enable the Lightbox. You will be presented with a copy of the JavaScript code where if you have the experience you can add custom code to make your Lightbox more appropriate to your needs.

There is potentially another step if you want the Lightbox to be shown to a selected audience only. For this see Creating a Segment in the Visual Editor.

Did this answer your question?