Exit-intent lightboxes are a simple but effective way to increase your website’s conversion rate. This lightbox appears to visitors when they start to exit a site, allowing you to engage and capture those visitors before you lose them. A typical exit-intent lightbox example offers visitors a free guide, report, white paper, or similar document in exchange for their email address.

Here, you’ll learn how to create an Exit-Intent lightbox in Digioh that gives visitors the option to download a marketing guide in exchange for their name and email address. When visitors submit the form, they get a thank you page with a button to download the guide. We then show you how to integrate the lightbox with your Constant Contact account so visitors who download the guide are added to one of your email lists.

Part I: Create an Exit-Intent lightbox in Digioh

Step 1. Create a new lightbox

On the Name Your Lightbox screen, enter a descriptive name (e.g., Exit Intent – Download Guide) and click Save Name.

Step 2. Customize and configure your lightbox

The Layout section of the lightbox editor allows you to customize the look and feel of your lightbox including the container, text, buttons and images. For detailed help, see the Editor section of the Digioh Knowledge Base.

When you are finished customizing the layout, click the Form section below the Layout section of the editor. In the After Form Submit drop-down list, select show thank you page (for more help on this option, see How do I change what happens when my lightbox form is submitted?).

Click the Thank You Page section below the Form section and customize the look and feel of the page’s download form as needed.

Click the Buttons tab and select download file as the download button’s Click Action. Under File to Download, select or add the file to be downloaded.

To preview how your lightbox will look and work, click Save & Preview and then select Preview Exit from the drop-down menu. When your lightbox looks and works the way you want, click Save.

On the Digioh navigation bar, click Lightboxes. Your new lightbox is now listed on the Lightboxes screen. You have not yet published the lightbox so it is not live.

Step 3. Add an Exit Intent condition to your lightbox

Every Digioh lightbox has a condition that determines when it gets displayed. To make your lightbox appear when a visitor exits your website (in other words, to make it an Exit Intent lightbox), you must add an Exit Intent rule to its condition.

To start adding the condition to your lightbox, click Add in the lightbox’s Conditions column.

In the Conditions pop up, click Add Conditions.

Click Add New Rule.

In the Choose a property drop-down list, select Exit Intent under the Action section.

When the Exit Intent rule appears in the pop up, select the mouse action that will make the lightbox appear (for example, Mouse exits window top or Mouse exits window left). When you’ve made your selection, click Save.

Step 5. Publish your lightbox

Once you’ve added the Exit Intent rule and saved the condition, you’re ready to publish your lightbox.

In the condition pop up, click Save & Publish and then click Close. The Lightboxes screen now shows that a condition has been added and that the lightbox is on and live.

Part II: Integrate your lightbox with your Constant Contact account

To integrate your Exit Intent lightbox with your Constant Contact account, you must create a Constant Contact integration (if you don’t already have one) and then add the integration to the lightbox.

Step 1. Create a Constant Contact integration

Click your name on the upper right-hand corner of the screen and then click Integrations on the drop-down menu.

On the List Integrations screen, click Create a New Integration.

On the Add New Integration screen, select Constant Contact from the Integration drop-down list and then click Create Integration. If you want, you can also edit the Friendly Name.

Step 2. Connect Digioh to your Constant Contact account

When the Constant Contact login form appears, enter your Username and Password and then click Log in.

In the Allow Access? pop up, click Allow.

Step 3. Choose the Constant Contact email list

On the Choose List screen, click Select next to the Constant Contact email list you want to integrate with the lightbox.

If you need help on creating and managing email lists in Constant Contact, visit their Knowledge Base.

The new Constant Contact integration appears on the List Integrations screen. Confirm that Is Valid is set to True, the Endpoint is Constant Contact, and the email list is the correct one.

Step 4. Add the Constant Contact integration to your lightbox

On the Digioh navigation bar, click Lightboxes.

On the Lightboxes screen, click Editor in your new lightbox’s Actions column. You can also click the lightbox’s name.

In the lightbox editor, click the Integrations section and then click Add Integration.

In the Choose Integrations drop-down list, select the Constant Contact integration you created in step 1 and click Save.

At the top of the editor screen, click Save & Publish. To return to the Lightboxes screen, click Lightboxes on the Digioh navigation bar.

The screen shows your lightbox is complete with a condition and an integration. It is on and live and ready for use.

Part III: Integrate your lightbox with your website

The final piece in this tutorial is how to integrate your Exit Intent lightbox with your website. The Digioh lightbox app easily integrates with most content management systems and web builders available today. If you need help installing your lightbox, just let us know!