Skip to content

How to build an exit-intent popup in HubSpot

With exit-intent popups, you track the movements of a user in order to display a special offer or opt-in form when they show signs of leaving your website. I’m not going to re-invent the wheel here and write new code for the popup when you can find tons of awesome code to do this. I will just show you how I find it easy to apply the code in HubSpot. In this example I will use beeker.io’s code that you will find here.

exit-intent popup

The process:

1. Download the bioep.js file from here.

2. Open bioep.js in any editor (notepad works just fine). You want to edit the these:

  • Width & height: this can be edited at a later point inside the design manager as well, but if you already know what size you want you can edit it here.
  • Delay: how many seconds before the popup activates and begins watching for exit intent. NOTE: the same delay time applies if you have “showOnDelay” set to “true” – in that case the popup shows up after the delay time on exit intent. If it is set to “false”, the popup shows up immediately.
  • cookieExp – the number of days to set a cookie for. If it is set to “1”, a visitor will only see the popup once a day. If it is set to “0”, visitors will see the popup every time they visit the page.

Save the file and upload it to your HubSpot file manager, then choose Get File URL and copy the URL.

hubspot file manager

Head over to the Design Manager and open up the template you want to add the popup to.

3. Add code to the header. There are a few different ways to do it, in my example I will add the code to one template (for one page) – but I will add the code to the header in two ways, just to show you some of the options you have.

First – go to the GitHub page and copy the following code:

<script type=”text/javascript” src=”bioep.min.js”></script>

<script type=”text/javascript”>       

bioEp.init({          

// Options       

});   

</script>    

<style type=”text/css”>

#bio_ep_bg {} // background

#bio_ep {} // popup

#bio_ep_close {} // close button

</style>

 

and add it to the header. You can either choose Edit -> Edit Head and add the code under “Additional HTML Head Markup for this Layout” and click save,

hubspot header code

or you can do it is by adding it to a custom HTML module in your header (see image below). Note that you might want to add the CSS code to your CSS file instead of your header.

hubspot header

4. Then it’s time for the fun part. Start building the popup however you want, just like you build anything else in the Design Manager. In my case I built a signup form, so I added a Rich Text Module and a Form Module. If you want an image/CTA, add that module instead. Once you have your module(s) added, group them (select Group and click on the modules you want to group -> click Create Group).

5. Choose Edit CSS Declarations (arrow next to the gear icon). Under Custom CSS ID (advanced) you want to add “bio_ep“.

That’s it! Save your template and test it out (NOTE: there’s no styling added yet).

Then the styling begins. I’m not going to go through the styling process, just a few notes:

  • Remember to add classes/IDs to your modules inside the popup.
  • To edit the popup style, you need to edit these:

#bio_ep_bg {}  // background

#bio_ep {} // popup

#bio_ep_close {}  // close button

Since there are comments telling you what they are, you should have no problem figuring out what to edit. I mentioned in the beginning that you can edit the size inside the Design Manager – just add width & height to #bio_ep.

If you have any questions or suggestions, feel free to reach out!