An Overlay is a simple pop-up that appears just as your visitor is about to leave your website. It is a tool that is used to reduce website and shopping cart abandonment. It provides an effective new opportunity to re-engage with the visitors and catch their attention before they leave your website.

By showing a compelling motivating message, abandoning visitors can be persuaded to return to your site and make a purchase. The effectiveness of this technology lies in visitor psychology and pre-established knowledge of visitor behavior.

The benefits of the Overlay technology can be felt nearly immediately. Your site will experience a higher conversion rate, lower bounce rate, increased sales, and higher average cart sizes. Newsletter bases grow more rapidly when spurred by the Overlay technology!

Here’s How Overlays Work

Track visitor behavior	Detect Intention to Leave	Display Targeted Offer
When a visitor lands on your website, MaxTraffic begins tracking that visitor's mouse movement, velocity, and other behaviors.	Our visitor behavior knowledge algorithm together with the Overlay technology allows MaxTraffic to determine the exact moment when a visitor is about to leave your site	Once the intention to leave has been detected, MaxTraffic displays a targeted offer to your visitor. This gives you the ability to either capture a new lead or gain a sale.

Are there any conditions for the Overlays to be triggered?

Overlays are triggered, when there is a clear movement towards the upper side of the browser AND the cursor movement has a sufficient amount of length to it. 

• An overlay is not triggered, when there are several tabs opened (only on the last opened tab of website)
• An overlay is not triggered if there have been very few mouse movements on the website (for example, user moved mouse from address bar to the top of website and back)
• Depending on the Overlay campaign targeting settings, Overlay might not be shown to a visitor if he does not meet the targeting criteria (for example, he does not match GEO, URL or any other targeting settings)

Available information includes stats, graph, campaign targeting settings and linked ads.

Pressing "Targeting" button will open campaign targeting settings.

When the script is executed, system will trigger the particular overlay to show up

1. Creating dynamic variables

To be able to create dynamic content, first, you will need to add dynamic variables into the system. In order to do that, the tracking script has to be changed a little bit.

Now, if your website ID is 999, then normally the tracking script for your website would look like this:

<script>
  window.mt=window.mt||function(){(mt.q=mt.q||[]).push(arguments)};mt.l=+new Date;
  mt('create', 999);
</script>
<script async src='//cdn.mxapis.com/mt.js'></script>

Inside this tracking script, you are going to create the dynamic variables. All of them need to be defined, as well as assigned with values within the script. 

Adding dynamic variables can be done with the help of "dynamic_field":

<script>
  window.mt=window.mt||function(){(mt.q=mt.q||[]).push(arguments)};mt.l=+new Date;
  mt('create', 999);
  mt('dynamic_field', 'name', 'John');
  mt('dynamic_field', 'surname', 'Doe');
  mt('dynamic_field', 'city', 'Nantes');
</script>
<script async src='//cdn.mxapis.com/mt.js'></script>

2. Showing dynamic info in the overlay

When you are creating a banner, you can add dynamic variables to any text element. You need to use "{{" before and "}}" after the variable, so the system would recognize it:

For a website visitor who has already entered his personal data, the banner would look like this:

3. Adding dynamic elements into your own URL

In the Elements section, you can choose all the items, that you wish to add to your system. You can do that by clicking on the Add hidden field button.

For each field, you can set a name and a value. You can either set a fixed value of your choice, or use a dynamic field.

By default, we have added a dynamic system variable called {{pageURL}}. This variable will take a value based on the exact URL page the visitor was viewing when the overlay appeared.

2) A/B testing starts automatically – each Ad is shown at least 500 times, and the most effective Ad remains active, others are deactivated. You can see statistics about each Ad when you click on campaign name in Overlays section.

3) If later with new impressions the active Ad starts to perform worse than others, then the most effective Ad is activated, others – disabled. So A/B testing process is running all the time. 

How does the system decide, which is the best performing Ad?

a) If there is any data available about Orders (conversions), then Ads are compared based on Conversion Rate.

b) If there is no conversion data, but campaign collects Leads, then Ads are compared based on Subscribe Rate.

c) And in case there is no data about Conversion or Subscribe Rate, then Ads are compared based on Click-Through Rate (CTR).

Step 2: Go to the "Elements" section and click on "20%OFF" (discount code widget) in Ad Editor

That is it - now you can configure colors and other settings:

How will it work?

If you use a discount code element in a banner, then after visitor will close this banner, he will still be able to see the discount code in a small Ribbon at the bottom area of the site. 

In case you also decide to use a countdown timer, then after closing the banner, the small Ribbon will show both the discount code and also the time left to use it. Example below:

And here you can see how the Ribbon would look like with and without the countdown timer:

Upload new ad

Clicking on "Upload New Ad" button opens a popup box.
Here you can choose two options:

Upload standard banner

Lets you upload a banner or multiple banners where you define your ads name and url it will lead to on click.
If you select multiple banners for one campaign we will commit an A/B test. i.e. platform will show different ads to different visitors,
evaluate the results of each ad and finally only the best performing ad will stay active. 

Upload email subscribe banner

This is essentially the same as standard banner, except it allows you to create simple forms on top of your design.

After uploading banner(s) you can edit them in the editor by clicking on the dots at the right and selecting "Edit"

Choose existing ad

Clicking on "Choose existing ad" button opens a section.
This section shows all your banners you created before so you can reuse them.

Show to

All incoming visitors
This option allows to show ad to any visitor opening your site.
Targeted visitors can be narrowed with other targeting options we offer.

Visitors who are about to leave your site
This is where we use Exit Intent technology to detect which visitors are about to leave.
If you choose this option banner will be shown to visitors who move their cursor out of the browser pane.

Trigger manually with JavaScript
This option provides you a script code which you can use in your code to show promobar when you call this function. 

URL targeting

Allows you to choose either to show campaign on all website or to limit where the messages can be shown.
You can make various cases on whom to show your campaign.

Click here to see detailed description about URL Targeting.

Cookie targeting

Allows you to target people based on their browser cookies.

Client Segments

Allows to show campaign to a group of people with specific information you have about your visitors.
For more info see: https://help.maxtraffic.com/i18-advanced-visitor-segmentation-for-overlays-promo-bars

Show to visitors 

Allows to target different campaigns for:
- New and Returning visitors
- Returning shoppers
- Visitors from social media
- Visitors from paid search
- Visitors from organic search

Target by device

Allows to target different devices.
For example, you can exclude phone users and show campaign only to Desktop & Tablet users.

NOTE: If you selected mobile device in step 1, this section will not be available for you.

Allows you to set start and end(optional) date of campaign.

Advanced Schedule 

Allows you to set specific days and time when to show campaign

Frequency capping

Is a term that you might have heard of when talking about regular media campaigns.
With this option you can set a period and an amount of maximum campaign impressions one visitor could get. 

We suggest to always using some kind of frequency capping so that you would not annoy your visitors with messages on each exit. 
Throughout the platform we have an additional limit so that one campaign could be shown to visitor only once per a visit.

Delay 

Show after X pageview limits how many pageviews should a visitor have before he gets to see campaigns message. 
Show after X seconds during visit limits how much time should a visitor have spent on site before he gets to see campaigns message. 
Show after X seconds during pageview limits how much time should a visitor have spent on specific pageview before he gets to see campaigns message.

Templates

Here you have a list of pre-made and your previously saved templates that you can use for your banner.

Background 

Here you select a background for your banner.
It can also be transparent which is a good way to shape your banner in non-rectangular way.

Elements

Here you have a selection of different pre-made elements that you can use for your banner.
"Add HTML" button lets you import any HTML code on to your banner.

Upload

Lets you upload images that you can use for your banner.
Previously uploaded images are saved to your collection so you can reuse them later.

Advanced

In this section you can define:

- Banner name
- Banner position on the page
- Which URL to post the form data.
- Selecting who to notify about form submit and saving subscriber to email lists (If you intergrated any)

If you uploaded a standard banner you only have an option to define

- Banner name
- Which URL it will lead to if clicked (can be ommited)
- Banner position on the page