How to Create an Exit Intent Lightbox With Constant Contact


A simple but effective way to increase your website’s conversion rate is to use an Exit Intent lightbox. This type of lightbox appears to visitors when they exit a site and can be implemented in a number of ways that engage and capture those visitors before you lose them. A typical example of an Exit Intent lightbox is an offer to download a free guide, report, white paper, or similar document. In exchange, visitors provide their name and email address to be added to an email list.

In this tutorial, we show you 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 1. Create an Exit Intent lightbox in Digioh

Step 1. Create a new lightbox

Log in to Digioh and click New Lightbox.

Click New Lightbox

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

Name your lightbox

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.

Edit lightbox layout

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

Show thank you page after 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.

Set submit button Click Action to Download File

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.

Download Exit Intent lightbox listed in Lightboxes screen

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.

Add a condition to your lightbox

In the Conditions pop up, click Add Conditions.

Click Add Conditions

Click Add New Rule.

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.

Select Exit Intent rule mouse action

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.

Condition added and lightbox published

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

Click Integrations

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

Click Create a New Integration button

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.

Create a Constant Contact integration

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 and Product Tutorials.

Choose the Constant Contact email list

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.

Open lightbox editor to add integration

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

Click Add Integration in lightbox editor

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

Choose Constant Contact integration

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.

Constant Contact Exit Intent lightbox is ready for use

Part 3. 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. In last week’s post, for example, we showed you how to integrate an Exit Intent lightbox with Magento. To learn more about other available integrations, see the JavaScript Installation section of the Digioh Knowledge Base.

Hope to see you here again next week to check out the next instalment in our How to Create an Exit Intent Lightbox series.

One thought on “How to Create an Exit Intent Lightbox With Constant Contact

  1. Pingback: 14 Must-Use Tactics to Build a Better Email List | The Digioh Blog – Lead Generation Tips

Comments are closed.