Popups - The Best Converting Opt-in Tools

 

Popups are proven to be one of the most effective Opt-in Tools with Messenger Marketing. With just a few clicks, your customers will become subscribers of your brand, and you can immediately begin to engage, convert, and increase your sales opportunities with this audience.

Recart has two types of Popups: Desktop and Mobile Popups.

Before You Get Started

Important Note:

To ensure a smooth subscriber experience, make sure you always have both a OneClick popup and a regular Welcome popup active at the same time.

• If a visitor clicks “This isn’t me” on the OneClick popup, they will automatically be shown your active Welcome popup to start the opt-in process from scratch.
• ⚠️ If no standard Welcome popup is active, the visitor will not see any opt-in option and will be redirected back to your site without subscribing.

 

How to create a new Popup

1. Go to the Opt-in Tools page, click Create New, and choose between 

   Popup or OneClick Popup

   
   
   

2. Name your popup, select your settings, and click Continue to editing once ready. 
   
   

• Channels
  • Used for collecting subscribers Select SMS only, or Email and SMS
• Steps
  • If you have chosen Email and SMS, decide whether you would prefer the details to be captured in one step or two separate steps.
    • Using one step, the email field can be made optional, meaning subscribers can skip submitting their email address and subscribe with their phone number only. You can also set it up as mandatory.
    • In the case of two steps, your subscribers must provide an email address before they submit a phone number and subscribe. The Email field is mandatory and cannot be skipped.

• Platforms
  • Decide whether to create a popup for mobile devices or desktops. These need to be created as separate popups.
• SMS opt-in type
  • For some countries and phone number types, you can select whether you want customers to go through a double or a single opt-in.
  • You can also select whether you would like customers to SMS a keyword, or turn on the In-popup Confirmation feature for them to receive a unique code.
    • For more information on opt-in types, read our SMS Opt-in Types article. 
    • Read more about How to Activate In Popup Confirmations.

How to edit a Popup

• In case you would like to customize an existing Popup, click on the Popup’s name on the Opt-in Tools page.
• After creating a new Popup or clicking on an existing one you will be redirected to the General Settings in the Popup Editor.
• On the left side of the editor, you will see each section of your Popup.
• Once you choose a section, you can customize the settings of that section on the right side.

General Styling for Opt-in Pop-ups

The General Styling feature in the Opt-in Editor allows you to control the design of your opt-in popups in a streamlined way, saving approximately 15 minutes per setup!

Where to Find General Styling?

• Navigate to Layout & Styles in the Opt-in Editor.
  
• The General tab has been renamed “Settings” and is now located at the bottom of the left-hand menu.
  
• When you open the editor, you will land in the preview mode by default.

How to Use General Styling

• Styling can be edited via the right-side panel or directly using “Click to Edit.”
• Overwrite Styling Per Step – If needed, you can override styles on individual steps.
• Older Popups Do Not Auto-Update – Previously created popups will not automatically inherit General Styling.
  
  

To Apply General Styling to Older Popups:

• Identify overwritten styles in existing popups.
• Convert them to General Styles from the Layout & Styles menu.

2. Layout & Styles

Under the  section, you can:

• Select the popup size (we recommend Fullscreen as a Popup Best Practice)
  
• Add an image or GIF and place it where you want it (to the side or on top of the popup)
  
• Adjust the background color or add a background image
  
• Edit the close icon in the top right corner
  • The close icon is set to only appear after a slight delay- a default of 2 seconds. You can adjust this time to make it longer or faster, or enter 0 seconds if you wish for the close icon to be displayed immediately. 
    

👉  tips for adding images to your popup

• Add GIFs to your Popup

  • Similar to adding images to the sides or on the top of the popup, you can now add GIFs to juice up the customer experience with some animation.
    

• Upload transparent PNG images and choose a background color

  • If you would like to have a unified background color you can use PNG images with a transparent background. Uploading a PNG image to the sides or on the top will let you choose a background color to apply on the whole Popup. With this method, the Popup will not be divided into two sections.
    

3. Teaser

The teaser step allows your customers to first answer Yes or No to a discount offer before being asked to add their contact information. We recommend switching the teaser step toggle on as a Popup Best Practice. 
Under the teaser section, you can:

• Add your logo image and resize it
  
• Add a secondary product image and resize it
  
• Editing your headings
  • text
  • font type, style & size
  • text color
  • import your unique font using a URL
    
    
• Adjust the text, color, background, border, and shape of the confirm and decline buttons
  

4. Email opt-in

The email opt-in and SMS opt-in are edited separately when selecting a two-step popup.

In this section, you can edit the appearance of the popup (as seen above in the teaser step)

• Add a logo image and resize it
• Add a secondary product image and resize it
• Edit the headings
• Add a form item
  • Read more about how to set this up and use this to collect subscriber details
    
• Customize the email input field
  
• Adjust the CTA (call to action) button
• Customize the legal paragraph displayed before opting-in
• Add shadows to the following on all pages
  
  • images
  • all headings/text
  • CTA button
    

5. Errors (email)

You can edit the error message that appears should a customer enter an invalid number or email.

6. SMS opt-in 

The SMS opt-in is separate from the email opt-in if you choose to build a two-step popup.

• The settings you used for your email opt-in will be copied over to this section.
• Should you wish to customize the SMS opt-in differently than the email opt-in, simply uncheck the Use from email box.
• There is also an extra step to edit the Success message in the SMS opt-in if you are building a two-step popup.
  

7. Errors (SMS)

You can edit the error message that appears should a customer enter an invalid number or email.

8. SMS consent

If you are using the recommended In-popup Confirmation feature you will be able to edit the SMS consent page seen by the customer once the one-time confirmation code has been sent to them. 

In this section, you can:

• Add your logo image and resize it
• Add a secondary product image and resize it 
• Edit the Headings and Paragraph
• Edit the Code input field and CTA button
• Edit the Resend line
  

9. Errors (SMS consent)

You can edit the error message that appears should a customer enter an invalid code.

10. Success

Once your customer has successfully entered their details, the SMS Success popup will show, instructing them to check their phone.

In this section, you can:

• Add your logo image and resize it
• Add a secondary product image and resize it 
• Edit the Headings and Paragraph
• Edit the CTA button

• If you have selected double opt-in, the success text will direct customers to confirm via the one-time confirmation code, or by SMSing Y, that they would like to receive messages.
  • The legal message and first welcome message of your connected welcome flow will only be sent after they have confirmed this.
• The single opt-in success text will provide the customer with the legal message and first welcome message of your connected welcome flow immediately.

Customizing Your CTA Button

Your popup’s CTA button can do more than just close the popup — you can redirect visitors to a specific URL, apply discount codes, or enrich the current URL for a seamless experience.

Learn how to fully customize your CTA button and make the most out of each popup by following this guide: Customizing Your CTA Button in Popups.

11. Minimized view

If a customer clicks the close icon on your popup without entering their details, you can decide whether you would like the popup to display in a minimized view for easy access.

In the minimized view section you can customize:

• The behavior of the Popup - whether the full-screen popup or the minimized view is the default
  
• The position of the minimized Popup
  
• The button properties - such as text, font, color, and background.
  

11. Settings

For each Popup, you will have a Settings setup section.



Here you can set the following:

• Connect your popup to a welcome flow (mandatory)

• Trigger

  •  Select when the popup should be triggered- upon entering the site, or users exit intent

  • Read more about Exit Intent Popups

• Pages

  • Decide which pages of your website you would like the popup to appear or not appear

  • You can now configure your popups to remain hidden for the duration of a user’s session after they visit specific targeted URLs.

• Geotargeting

  • The countries the Popup should appear - we recommend keeping the default setup, showing in all countries

• A/B Testing

  • Add your popup to an A/B Experiment
  • Read more about Popup A/B Testing

Mobile Popup editor

The mobile popup editor works in the same way but will preview as it would on a customer's mobile phone.

The In-popup Confirmation code will automatically be entered and submitted for the customer in mobile popups. 

Messenger subscribers

If you are collecting Messenger subscribers, you can select Messenger or Messenger and Email as your chosen channels.

• The Popup Editor for Messenger (desktop or mobile) works the same way as the above instructions for other channels.
• If choosing Messenger only, there will not be any input fields to edit, only the headings, paragraph & CTA button.
  
  
  

Website preview

While setting up your Popup you have the option to see how it will look on your website by activating the Website Preview.

• Click on the setting icon in the editor and switch the toggle on.
• By default, your website will be added but you can enter any URL you would like to check the Popup on and hit Enter to see the preview.
  
• The examples below show the minimized version of a mobile and a desktop popup👇
  
  

And that’s it! 🚀 You have created your own popup.

Once you have customized your Popup to your liking, do not forget to save it in the upper right corner of the editor. You can save it as a draft, or activate it immediately.

You can activate/deactivate, rename, or duplicate a popup from the opt-in tools page.

• click on the three dots next to the popup you would like to edit
  

Duplicating a Popup

• When duplicating a popup, you will be redirected to a simplified creation wizard, where you can name your duplicated Popup and choose the device type it should appear on.

• There is no option to modify the opt-in channels.

  • For example, if the original Popup was collecting email and SMS subscribers, the duplicated version will collect subscribers via the same channels.

• Once you named the Popup and chose the device type you need to click on the Continue to editing button. 

• You will then be redirected to the Popup editor, where you can customize the look of your duplicated Popup and attach a Welcome message to it as described in the first part of this article.

Understanding Popup Visibility in Recart

We've made updates to how popups appear to returning visitors. Here’s what you need to know:

• If a visitor completes a popup, they won’t see other active popups with the same targeting rules when they return.
• Newly enabled popups (ones that weren’t active at the time of the visitor’s last completion) will still be shown.
• If a visitor clears their cookies, they will be treated as a new visitor, and popups will display based on your targeting settings.

These changes apply to both standard popups and 1-click popups, ensuring a smoother experience for your visitors.

Cookies & Popup Behavior

Recart uses cookies to help manage popup visibility and track visitor interactions. Here’s how it works:

• Cookies are stored for approximately 7 days from the visitor’s last interaction with your site (such as a page load).
• If a visitor returns after a week, they may see the popup again because their cookies will have expired.
• Even if a visitor resubscribes through the popup, they won’t be counted twice in your subscriber list.
• Cart abandonment flows also rely on cookies, so visitors must resubscribe for these flows to continue working.

Checklist to build effective, high converting Popups

Take a look at the below checklist and make sure you follow the recommendations to stay compliant and convert as many visitors as possible.

✔️ All text on the Popup is easily readable, and the background image does not interfere with the text.

✔️ The offer is clear, your visitors understand what they get in return for the subscription.

✔️ Your images or GIFs are of good quality, including your logo.

✔️ Your page targeting is set up properly when having multiple Popups, they do not appear on the same page.

✔️ Your legal language is compliant with text marketing regulations.

✔️ Your legal documents are linked within the legal language.

Next, read our article Popup Best Practices to make sure your popups shine! ✨

• This includes how to run A/B Tests, how to create an Exit Intent Popup, and how to enable In Popup Confirmation opt-ins. 

 

Please let us know if you have questions, we are happy to help. 😊