Creating an exit intent modal experience

  • Updated

Exit intent modals are pop-ups that appear in the middle of the screen that can be configured to either collect a user's email or display a CTA. Exit intents will be displayed after the following conditions have been met:

  • A user qualifies for the segment where the exit intent modal exists.
  • A user remains on the page for 10 seconds
  • A user mouses out of the viewport.

Because the third condition can't be fulfilled on mobile, exit intents will not display on mobile.

If you haven't already, we recommend setting up your global styles so that your exit intent modals are consistently styled across all of your experiences. Here's an example of an exit intent modal experience:

 

Creating an exit intent modal experience

Creating an exit intent modal experience is just like creating any other experience. When you arrive at the experience type selection, you'll have the option to select "Capture email" or "Redirect to another page". The first will capture an email and store it in Mutiny where it can be exported. The second will present the user with a CTA that will direct them to another page. Be sure you select the right experience type for the test you want to run.

Configuring your exit intent modal settings

You can make edits to your exit intent modal's content and style by clicking through the tabs at the top of the editor. We'll take a closer look at each of these settings below.

If you're configuring a success message for your email capture experience, you can choose to change the editor preview to display the success message instead by clicking "Success view".

Content

Under the content settings, you have the option to set your heading, subheading, CTA text and CTA link.

If you've chosen the capture email exit intent, you can define multiple options for fields that you want to capture. You'll also be able to define content for your "success page" that is shown after a user submits their email.

Style

The style tab lets you configure a number of different options that will affect how your exit intent modal looks. Generally, you'll want to set up your global styles so that your exit intent modal's have a consistent style across experiences, but there may be instances where you want to update specific styling for a single experience.

Any updates you make to the styles here will overwrite those that are set in your global styles.

Color

Your primary color will dictate the color of the exit intent modal text and CTA buttons.

Disable Mutiny branding

Check this to remove the Mutiny logo from the success page.

Success button theme

You can set your success button to be primary colors, inverted, or transparent. What these selections will do differs depending on your button styling.

Image and image URL

You can choose to display a small image at the top of your exit intent modal. To do so, upload a new image by clicking the "Upload an image" card. Once uploaded, your image URL will be displayed in the image URL box. You can choose to use the "icon" layout or a "compact image" layout, which will be a bit larger than an icon.

Inherit site fonts

Select this check box if you want to inherit the fonts from your website, rather than using the default fonts.

Custom heading, subheading and button styles

You can write your own custom CSS styles into these boxes to make additional changes to your heading, subheading and buttons. For example, if you wanted to remove the button entirely, you could place display: none !important; into the custom button styles box to set the button's display to none.

FAQs

I tried viewing my exit intent modal experience live on my site but I'm unable to see it.

If you're sure that you've qualified for the experience correctly, its likely the case that you clicked on or closed the exit intent modal previously. We prevent the exit intent modal's from being shown again after one of these actions is taken. Clearing your cookies or opening the experience in an incognito window will reset this.

If you've done this and you're still not seeing it, be sure that you're waiting 10 seconds and then moving your mouse outside the viewport. If you move your mouse outside the viewport before 10 seconds, the timer will reset.

Can I shorten the length of time necessary before the exit intent modal shows?

There's currently no way to customize this timing. Exit intent modals will render only after a user has been on the page for 10 seconds. If you're looking for something more immediate, you may want to look into another experience type.

Was this article helpful?

0 out of 0 found this helpful

Have more questions? Submit a request

Comments

0 comments

Please sign in to leave a comment.