Monthly Archives: May 2015

How to Create an Exit Intent Lightbox With Constant Contact

ConstantContact

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.

How to Create an Exit Intent Lightbox With Magento

Magento - Open Source eCommerce

An Exit Intent lightbox appears to visitors when they leave your website and is a simple but effective way to capture and convert those visitors before you lose them. A typical example of an Exit Intent lightbox is a sign up form for an email newsletter.

In this tutorial, we show you how to create an Exit Intent lightbox in Digioh that displays an email sign up form and then integrate the lightbox with your Magento account so the form appears when visitors leave your store. To round out the tutorial, we also show you how to integrate the lightbox with your MailChimp account so subscribers are added to a list and receive a welcome email.

Part I. Create an Exit Intent lightbox in Digioh

To create an Exit Intent lightbox in Digioh, first create an associated Exit Intent rule that tells the lightbox to appear when the user’s mouse exits the browser window on one of its four sides. Then create a lightbox condition and add the Exit Intent rule to the condition in order to set up the association.

Step 1. Create a new lightbox

Log in to Digioh and click New Lightbox.

Digioh Lightboxes | New Lightbox

On the Choose a Theme screen, select one of the email sign up themes. Don’t worry about design for now.

On the Choose a Condition for Your Lightbox screen, click Skip This Step.

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

Digioh Lightboxes | Name Your Lightbox

Step 2. Create an Exit Intent rule

On the Digioh menu, click Rules and then click Create a New Rule.

Digioh Rules | Create a New Rule

On the Create a Rule screen, select Exit Intent from the Rule Property drop-down list, select the mouse exit that will trigger the lightbox (e.g., Mouse exits window top), and then click Save Rule.

Digioh Rules | Save Rule

Step 3. Create a condition

On the Digioh menu, click Conditions and then click Create a New Condition.

Digioh Conditions | Create a New Condition

On the Create New Condition pop up, enter a name for the condition (e.g., Exit Intent Condition), select the lightbox you created in step 1 from the Lightbox drop-down list (My Exit Intent Lightbox), and then select the rule you created in step 2 from the Rules drop-down list (Exit Intent).

Click Insert Rule and then click Save.

Digioh Conditions | Insert Rule and Save Condition

Step 4. Customize and preview your lightbox

On the lightbox list, click the name of the lightbox to open it in the lightbox editor.

Digioh Lightboxes | Editor

Customize the layout, text, buttons, and images on the sign up form as needed. You can also add blocks of custom HTML code. For detailed help, see the Editor section of the Digioh Help Docs.

Digioh Lightboxes  | Editor | Edit Layout

To choose what happens after a user submits the lightbox form, click the Form section below the open Layout section and make the needed changes (for detailed help, see How do I change what happens when my lightbox form is submitted?). The default behavior is to show a Thank You page.

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

Step 5. Publish your lightbox

When your lightbox looks and works the way you want, click Save & Publish and then click Lightboxes to return to the lightbox list. You can now confirm that the lightbox is live and turned on.

Digioh Lightboxes | Save and Publish Lightbox

Part II. Integrate the lightbox with your Magento store

To integrate your Exit Intent lightbox with your Magento store, copy and paste the embed code snippet generated by Digioh.

Step 1. Open the Magento design editor

Log into your Magento account.

On the Magento Admin Panel menu, click System and then click Configuration.

Magento Admin Panel | System Configuration

On the left sidebar, click Design under Configuration.

Magento Admin Panel | System Configuration | Design

Step 2. Copy the embed code snippet

Go back to your Digioh account.

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

Digioh Integrations | Setup Instructions

On the Setup Instructions screen, select and copy the code that appears in the Embed Code Snippet box.

Digioh Integrations | Setup Instructions | Embed Code Snippet

Step 3. Embed the code in Magento

Go back to the Magento design editor.

Scroll down to the Footer section and click inside the Miscellaneous HTML text box. Paste the embed code you copied in step 2.

Magento Admin Panel |  System Configuration | Design | Footer | Miscellaneous HTML

Click Save Config.

Magento Admin Panel | Save Configuration

Your Digioh Exit Intent lightbox is now integrated with your Magento store. If you need more help on using the Magento Admin Panel, visit Magento Help.

Part III. Integrate the lightbox with a MailChimp list

To integrate your lightbox sign up form with a MailChimp list, connect your Digioh account to your MailChimp account and then select the list. To automatically send subscribers a welcome email, use the MailChimp Automation feature to set up a welcome message workflow for the list (see the section on Automation in the MailChimp Knowledge Base).

Step 1. Connect your Digioh account to MailChimp

Go back to your Digioh account.

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

Digioh Integrations

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

Digioh Integrations | Create a New Integration

On the Add New Integration screen, select MailChimp from the Integration drop-down list and then click Create Integration.

Digioh Integrations | Add New MailChimp Integration

In the Connect Digioh to your account form, enter your MailChimp Username and Password, and then click Log In.

Connect Digioh to MailChimp

Step 2. Select the MailChimp list

On the EM Choose List screen, click Select next to the MailChimp list you want to integrate with the lightbox sign up form.

Note: If you want subscribers to automatically receive a welcome email, select a list that you have configured with a welcome message automation workflow (see the section on Automation in the MailChimp Knowledge Base).

Digioh Integrations | Choose MailChimp List

On the List Integrations screen, confirm that Is Valid is set to True, that the Endpoint is MailChimp, and that you have selected the correct mail list.

Digioh List Integrations

Step 3. Add the MailChimp integration to the lightbox

On the Digioh menu, click Lightboxes.

On the lightbox list, click the name of the lightbox to open it in the lightbox editor.

Digioh Lightboxes | Editor

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

Digioh Lightboxes | Editor | Add Integration to Lightbox

In the Integrations section, select the integration you created in step 1 (MailChimp) and click Save.

Digioh Lightboxes | Editor | Choose and Save Integration

Click Save & Publish and you’re done.

Be sure to test and preview your lightbox on your Magento store. Better yet, sign up through the lightbox to really see things in action.