Exit intent popups without plugins

Tips
1

Hi Bubblers,

Just wanted to share a quick guide on how to set up exit intent popups without using any plugins or code snippets as I couldn’t find any similar detailed explanation in the forum otherwise.

  1. Add a Floating Group to the top of your page, stretching across its full width, and 10 px high (any smaller, and fast mouse movements might slip through). Also, make sure that it floats above your header if you have one.
    exit-intent-step1
    exit-intent-step12880×1358 391 KB
  2. Prepare the Popup you want to unveil when users flirt with the idea of leaving your website.
    exit-intent-step2
    exit-intent-step22880×1358 315 KB
  3. Go to the Workflow tab and configure a new Do when condition is true event. This event should run when the Floating Group from step 1 is hovered. Depending on your needs, set it to run Just once or Every time.
    exit-intent-step3
    exit-intent-step32880×1358 216 KB
  4. Finally, add a Show action to display your Popup.
    exit-intent-step4
    exit-intent-step42880×1358 197 KB

Now, whenever your users dance around the top of your page, the popup will show up.
exit-intent-recording

Hope anyone can benefit from this!

PS: If you’r are interested in similar tips & tutorials check out my weekly NoCode Up newsletter where I share every Friday the most useful things I’ve uncovered about Bubble in the last 7 days.

2 Likes
2

What about when they’re just switching tabs? Wouldn’t it get annoying?

3 Likes
3

You mean switching tabs in the browser?

Two thoughts on that:

  1. Only run the workflow once and not every time.
  2. This is a general trade-off regarding exit intent popups. They can improve conversion but definitely piss of certain users. Bit of an internet marketing dilemma I guess :sweat_smile:.
4

@titian.steiger nice workaround and thanks for sharing the tip. I do believe the way it is implemented can lead to several unintended consequences leading to a very annoying UX, such as when the user wants to use the header element and they hit the 10px at the top.

1 Like
5

Yes, definitely something to keep in mind. But I think it can be avoided by alining padding in your header with the Floating Group.

In my example, the header has a height of 60 px with 12 px top & bottom padding. So the 10 px Floating Group does not overlap with any of the links or buttons.

6

Nicely done