How to Create an Intent Exit Popup

Exit Intent Popups will help you convert users into possible clients at the very last moment, just when they are about to leave the page, capture your users' attention and make them an offer they can not resist. Converting website visitors is tricky, but we have all the tools and means necessary to create powerful and capable popups that are superior in design as well. 

Design and Build a Popup

  1. From the WordPress Dashboard > Templates > Popup
  2. Click on Add New and name your template 
  3. Once you click Create Template you will be redirected to the stunning library of pre-made popup templates that you can insert with just a click, or you can always start from scratch.

Popup Settings

Layout

  1. Width - 1050px 
  2. Height - Fit to Content
  3. Close Button - OFF
  4. Entrance Animation - Slide Up 
  5. Exit Animation - Slide Down 

Add the content for the Popup 

  1. Add a section with two columns. From the Content tab let’s set the content width to the value of 1050 and the column gap will be No Gap. Go to the Styles tab and set the background color.
  2. Drag in the image element, and upload it. Set the image size to full.
  3. Now let’s click on the first column handle to open its options, set the Vertical Align to Middle and the Horizontal Align will need to be Center. Go to the Advanced Tab and add some right and left padding to the value of 80 pixels.
  4. Let’s drag in a heading element. We will write a catchy copy for the popups.
  5. Another heading element will need to be placed on the popup, this time for the main content of the popup. Let’s write it and then style it.
  6. Next, we will drag in a text editor element to show users what our popup is about and introduce them to our irresistible offer. 
  7. Go to the Styles tab and we will need to tweak the typography options. From the Advanced Tab, we will add some bottom padding of 80 pixels.

Add the Form Element to Integrate with the Popup

Layout Tab

  1. Let’s search for the form element and drag it onto the page. From the Forms Fileds section, let’s delete two of the fields until we are left with the email type only.
  2. We will need to hide the title for design purposes and only leave the placeholder text.
  3. Set the column width of the field to be 75% to have the button be displayed next to the form field. 
  4. Let’s configure the Submit button, set the column width to be 25 %.
  5. From the Action After Submit, we will have our form be integrated with MailChimp, once we select it you will see another section appear on the panel containing further configurations. 

Style Tab

  1. Set the column gap to be the value of 0. The row gap will take the same value.
  2. Field Section > Set the background color to be transparent. Select a border color, we will go with black this time. We’ll unlink the border width and put the value of 1 pixel only for the bottom.
  3. Set the border radius to the value of 0, and we will tweak the padding as well. Once again unlink the values and put the value of 12 pixels for the bottom.
  4. Design the button as well. The background color will be set to be transparent. Assign the red color for the text. Tweak the typography options, as per usual. Configure the width value. Set the border radius the value of 0 and here as well we will tweak the text padding value and assign it to be 12 pixels for the bottom part of the button. 
  5. From the Advanced Tab and add some Padding values of 30 pixels for the left and right. 
  6. One last final component to add, and that's another heading element. Type in the content. Once we do that to have our popup close after a user has clicked on our heading we will need to assign it dynamic content. Click on this database barrel icon to open the settings, from the drop-down menu choose Popup. Click on the wrench icon and under the action, choose popup.

Publish the Popup

  1. Click on Publish after you are done building your popup 
  2. Conditions - Assign it to be on the Entire Site, or choose a more specific condition 
  3. Triggers - Switch the On-Page Exit Intent ON.
  4. We won’t need to assign any Advanced Rules. 
  5. Now every time a user is about to leave your page, you will have a second chance to convert them into possible clients. 
Did this answer your question? Thanks for the feedback There was a problem submitting your feedback. Please try again later.