Submitted by Chris McIntosh on December 13, 2019

Exit intent pop-ups are a great way to make a final attempt to get the attention of a user before they leave your site.  Leveraging Mautic we will go over how to create one and place it on your website so you can start leveraging it for your various campaigns.  If your team is faced with the challenge of optimizing lead generation, this article is for you.

Leveraging Mautic you can create new growth hacking solutions that will increase the number of leads generated by your website, without also increasing the workload or cost associated with creating these leads( and by "lead generation" I am just really talking about converting a new visitor on a website into a known prospect by collecting various information like their email address).

This is exactly where the Exit Intent pop-up comes into play.  It is a simple javascript trick that is used to predict, based on browsing and mouse movements, when a user is about to leave your website.  When the intent to exit is seen, then the website will display a popup form to try and collect the user's information.  This could be an invitation to a newsletter, an offer of a free lead magnet resource, or even a special sale item.

Along with lead-gen optimizations, there is another couple of benefits that you can leverage with this tool on your website, one of the biggest is which is kind of an "onlline elevator pitch," according to this article that dives more deeply into the details and benefits of the exit intent.

Thankfully, if you already are using Mautic for your other marketing automation needs, then you already have access to this technology for no extra cost.  If you are new to Mautic and have not installed it yet, dont worry I have a guide on installing mautic that will walk you through the steps. Mautic comes with a fully customizable exit intent form that you can add into your website.  Below is the step by step guide on how to get it working.

Step 1 - Creating your Focus Item

Once you log into your Mautic dashboard, you will want to look under channels, you will see the Focus Items menu link.  Select that and click the create new Focus Item button.

mautic focus item
Using Mautic to create a nw focus item is easy, enter the url of your website.  Currently, there is a bug that prevents the preview from saving, but I am working on releasing a patch that will fix that in future versions.

I am just going to create a simple newsletter signup form.  I will enter my website when prompted as well.  This will be a useful tool when the bug is fixed because it will let you see what the focus item will look like on your site.

focus item builder

Once you have this complted you will open the builder and be able to see the preview of the site, as well as four sections where you will need to do a bit of configuraiton.

Select what the focus item should be

For this example I am using "Collect Data," but Mautic offers two other options: "Display a notice" or " Emphasize a Link" these could be useful for situations where you are looking to get the users attention at a specific point on your page.  For our demo today what we are looking for is to try and get users to signup for a newsletter.  We can also reuse newsletter forms we already created.

We then can set if we want the popup form to animate or not, I like to select yes for animation because I think it creates more movement which can get the users attention better.  

Finally, we need to set when we want to engage.  This is a important decision because you have several options.  You can display it when they land on the page, you can set it to display after the user scrolls down to a certain point on the page, or the last option which is the one we will use to create our exit intent Visitor intends to leave so that Mautic will now track the movements of the user and know when the user is about to leave the site.  This will help you make your lead generation more prominent and help you increase the number of leads your website can generate.

The biggest reason I like this mehtod the most is because it is not as obtrusive as the others.  It will let the user click around and get to the information they want to have access to and won't disrupt their journey to becoming a customer.  

Also for this case we are going to unselect the Acitvate on link click option because that would cause the popup to show if they are clicking links on the page to go to other parts of the site.

Last thing to decide is how often you want to have the popup display.  I typically go with once per session that is because if you throw a popup on every page then it may get a bit frustrating and lead to users leaving totally. Additionally, I will select Stop engaging after conversion this is because once we have their signup information we do not have anything else to offer in this situation.

Step 2 Styling the popup

As you continue down the page on the builder you will see the style section.  This allows you to select from several different options, and will provide you a updated preview of what the pop up form will look like once installed on your website.  All of these options are really cool, so you will want to experiment around with them to see what fits best with your website's design.  There are some that run from the small top bar, or a side notification, to completely taking up the entire page.

Style builder preview

For this example I am going to select a modal, it is pretty simple and places the form front and center on the screen.  You visitors will be unable to miss it, and will not ignore it.  The style you select though is totally up to your decisions on how to present the form to users each has it's strength.

Directly below this section is the Colors section, which allows you to set the colors of the border, text, background, and buttons.  This allows you some pretty good control over how the popup will look.

Step 3 - Content

Next in line for the process is the content section, this is where you will be creating the text and entering the form you want to display in the modal.  You will want to put the main Headline message and also a tagline at a minimum.  You can set the font settings for the message, and then also embed a form as needed.  If you are new to mautic and do not know how to create a new form, see my article on creating mautic forms on a step by step for that.

The final item for this is selecting the form you want to display, it is usually best to select a form that has only 1 or 2 fields at most.  In the case of newsletter signups, really you just need a single email form.  This will help you keep the presentation of the form clean and easier to read for you users.  This will have a huge benefit to your lead generation rate.

Once you have everything setup click exit builders and save the Focus item.  Once you have done this you will have a presentation of the script tag that you can copy and paste into the page you want it to show up, for Drupal and Wordpress users, I am working on creating a module and plugin that will allow you to do this automatically.  Signup for my newsletter to learn more.

focus item code


Content creator for popup
In the content section you can enter the message and select a form you want to display to the user before they leave your website.