Categories
active arrowAccount
active arrowGetting Started
active arrowCampaign Builder
active arrowAdvanced Design Customization
active arrowEmail Campaign Customization
active arrowSegment & Targeting
active arrowAnalytics
active arrowShopify
active arrowEmail Marketing and CRM Integrations
active arrowHow to Share Your Popup Form and Submission with a Link
active arrowHow to Create a Custom Popup with a Blank Popup Template?
active arrowHow to Create a Full Screen, Lightbox, and Floating Bar Popup
active arrowHow to Create Well-Designed Campaigns with Themes?
active arrowHow to Use Column & Row Structures Efficiently in a Popup?
active arrowDiscover the Customize Step of Popupsmart
active arrowHow to Adjust Popup Style
active arrowHow to Create a Multi-step Popup?
active arrowWhat is a Success Popup? How Does it Work?
active arrowWhich Elements Can I Add to My Popup?
active arrowHow to Add Fonts on Popupsmart
active arrowHow to Prefill Form Fields
active arrowHow to Add Hidden Inputs to Your Popup Campaigns?
active arrowHow to Add New Elements & Use Drag and Drop Editor
active arrowHow to Add New Form Fields to My Popup
active arrowHow to Add a Privacy Policy on Popupsmart?
active arrowHow to Add a Coupon Code to Your Popup
active arrowHow to Activate the Countdown Timer
active arrowHow to Add an Animation to a Popup?
active arrowHow to Create a Video Popup on Popupsmart
active arrowHow to Add Lottery Ball Gamification on The Popup?
active arrowHow Debug Mode Works
active arrowHow Preview Mode Works
active arrowDesktop & Mobile Views Working Method
active arrowHow to Use Smart Tags - Dynamic Text Replacement
active arrowWhat Is Teaser? How Teaser Works
active arrowHow to Set Up Autoresponder Email Notifications
active arrowHow to Set up Self-Email Notifications
active arrowHow to Create an A/B Testing for a Popup Campaign
active arrowHow to Call JavaScript Function with a Button Using Popupsmart

What Is Teaser? How Teaser Works

A teaser popup is a mini popup that shows up before or after the main popup. It increases the popup visibility up to 65% and works as a minimal version of your campaign.

If you do not want to open a popup directly in order not to interfere with the end-user journey, keep reading this article to learn how to config teaser popups in your campaigns.

Enabling Teaser Popups

1. Go to the “Teaser” step on the popup builder by clicking the "eye" icon.

clicking teaser button

2. By the time you click on the "eye" icon to enable/disable it, the "Edit teaser" config area will be opened.

choosing layout

3. Almost every template in Playbook has its own predefined teaser template. If you want to use the default teaser template click save to continue after deciding the position and display configurations.

display configuration section

Note💡: Teaser popup is also counted as popup views and all targeting settings will be applied to the teaser as well.

Customizing Teaser Popups

You may not like the design of a predefined teaser template. Don't worry, we got you!

1. If you're going to start from scratch, select a position and layout first.

position section

2. Later decide when to display your teaser popup and whether to show it on mobile too.

3. Because teaser popups are miniature popups, there is limited space to add elements. You can only add image and text elements which are heading, body, and subtext elements.

customizing section

4. Also, you may want to go different and add a Lottie element instead of an image element!

choosing lottie

Check the "How to Add Lottie's Animation to a Popup?" article for further information.

Styling Teaser Popups

After deciding on the layout and elements of your teaser you may go different a bit in the style section if you want to add a different background to your teaser popup.

1. Navigate to the Style section from the sidebar.

styling section

2. Scroll down to the Body Style part below the Size section and find Teaser Background Settings.

background color section

You can change the teaser background color to a different color or add a background image only specific to the teaser popup.

Note💡: Although the Basic Style section enables you to change elements settings in every popup step at once, you can manage teaser style separately.

Have more questions about teaser popups? Do not hesitate to contact us!