How to create a smart pop-up
With our pop-up service, you can create smart pop-ups and show them to visitors based on a certain scenario. Make a personal offer at the right time, help your client choose a product or service, or capture subscribers to interact with them using SendPulse.
You can select a premade template and use it right away or customize it.
Let's talk about how to create a smart pop-up using a template and set up its appearance, elements, and display conditions.
Create a pop-up
You can create a pop-up from scratch or select a premade template and edit it.
Go to your project in the Pop-ups tab, and click Create pop-up.
From scratch
To create your own pop-up using ready-made elements, click New pop-up.
Using a template
A pop-up template is a widget with a predefined appearance and target action settings. You can select a template based on its theme, pop-up type, or elements.
You can select a template with a certain theme or a set of elements only during the first steps of creating a new pop-up. If you don’t select a template but want to create a similar one, check the elements it consists of, and select them in Design > Elements.
You can switch to another pop-up type later in Design > Style.
Select a category on the right and a template on the left.
Set up your pop-up elements
Once you select a template, the pop-up builder will be opened in the Design tab, where you can edit your pop-up and its elements.
If you are creating a pop-up from scratch, click +Add element, and select an element.
You can add elements to pop-ups of the Overlay, Floating, Horizontal, and Modal window types. If you want to customize pop-ups of the Video and Launcher types, read the Additional elements section of this article.
If you are creating a pop-up using a template, you can customize it. To edit an element, click the pencil icon next to it.
You can also start editing an element by clicking it. When you hover over an element or start editing it, it will be highlighted with a green frame.
Read more about each element below.
All elements are optional. You can add, delete, combine, and use them selectively.
However, if you use elements that save user data (Entry field, Dropdown, Radio buttons, Checkbox, Multiselect, and NPS survey), you need to add the Button element.
Cover
This element displays an image within your pop-up design to enhance user experience or draw attention.
If you are creating a pop-up using a template, click Upload image, and select an image from the file manager.
To replace your template image, click the pencil icon next to it.
To upload an image to the file manager, click Upload files. Select or drag it, and click Upload. Then, close the modal window, and select your image.
Select an image placement relative to your pop-up (left, right, top, or fill the entire pop-up).
Unlike the Image element, the Cover element fills your entire pop-up relative to the selected edge.
Entry field
This element requests user data you can save to variables, including names, email addresses, phone numbers, birth dates, and more.
In the Variable field, select or create a variable to which you want to save values. You can save values of all data types (String, Number, Phone, or Email).
In the Placeholder text field, enter your text.
You can also automatically prefill pop-up fields, set up double opt-in subscription confirmation, add field names, and make fields required.
Learn more: How to set up a custom pop-up form and How to transfer custom variables.
Messaging app
This element redirects a user to a social media platform of your choice. You can add up to 10 social media icons to one pop-up. If you have a chatbot, you can link it to your pop-up to grow your chatbot audience and launch flows.
Select a social media icon, and type in your button text.
In the next field, add a link to your social media profile. If you have a WhatsApp, Instagram, Facebook Messenger, or Telegram chatbot, you can link it to your pop-up and select a flow that will run when a user interacts with your chatbot.
Text
This element displays text to your website visitors. You can add a message tailored to your pop-up scenario to engage potential clients.
For example, if a visitor has viewed your product page more than three times, your pop-up message can motivate them to make a purchase. Your widget can also help a user calculate shipping costs when they are exploring your shipping options.
Type in and format your text. You can also add links and emoji and personalize your message using variables. Click {}, and select an existing variable.
You can use variables to address website visitors by name, provide unique discounts, give recommendations based on users’ previous orders or views, send abandoned cart notifications, or share other data points from your system.
You can also edit your text as HTML code. To do this, click the three dots, and select <>. Add the HTML code, and click Save.
Dropdown
This element allows users to select an item from the list, for example, a product category.
In the Variable field, select or create a variable to which you want to save values.
In the Text field, add your text, and in the Value field, select the value you want to save to your variable.
You can also mark an option as selected by default.
To add more options, click +Add option.
Button
When a user clicks your button, the data points they entered will be sent to the Contacts section. If you configure the corresponding actions, they can also be sent to the Email and CRM sections.
You can add buttons as text or images.
Enter your text, or upload an image, and select an on-click button action: Close modal window or Open URL. If you selected the latter, insert your link in the next field.
Keep your pop-up size in mind, and make your call to action short and clear.
You can also customize the style of every button or button group.
Read more: How to customize pop-up buttons.
Image
This element adds more images to your pop-up. Unlike the Cover element, the Image element does not fill your pop-up.
Click Upload image, and select an image from the file manager.
Select a pop-up size (smaller or larger).
You can also add any link to your image. To do this, turn on the Open URL toggle, and add your link. If a visitor clicks the image, they will follow the link you added.
Radio buttons
This element allows users to select an item from the list using a radio button.
In the Variable field, select or create a variable to which you want to save values.
In the Text field, add your text, and in the Value field, select the value you want to save to your variable.
You can also mark an option as selected by default.
To add more options, click +Add option.
Checkbox
This element allows users to select a checkbox, for example, to consent to personal data processing.
In the Variable field, select or create a variable to which you want to save values. When a user selects your checkbox, its text will be saved to a variable of the String type.
You can also add a checkbox name and make it required to prevent users from submitting your form without selecting the checkbox.
Multiselect
This element allows users to select options using checkboxes. Unlike the Dropdown, Radio buttons, and Checkbox elements, the Multiselect element allows users to select multiple options instead of just one.
In the Variable field, select or create a variable to which you want to save values.
In the Text field, add your text, and in the Value field, select the value you want to save to your variable.
To add more options, click +Add option.
NPS survey
This is an element with a rating scale where users can provide their feedback.
In the Variable field, select or create a variable to which you want to save values. Depending on your selected rating options, values will be saved as numbers or words.
Select how to display your rating options (as stars, emoji, hearts, like/dislike, or numerical values).
You can also add the comment input field and select its size.
Learn more: How to create an NPS form.
Pop-up flow
This element launches another pop-up and is used to create flows.
Select the pop-up you want to launch, and add text to the button that launches it. To add more pop-up launch buttons, add another element.
You can also select your button color.
Learn more: How to create a pop-up flow scenario.
Courses
This element shows a free or paid course registration form.
If your course is paid, turn on the Enroll users in a paid course toggle, and select a course and payment method. You can also add a promo code that students can use when making payments. To do this, turn on the Ask for a promo code, and set up your checkbox.
If your course is free, turn off the Enroll users in a paid course toggle, and select a course.
Regardless of whether your course is paid or free, you can select a pipeline and deal stage to which you want to save paying students’ deals. By default, your pop-up name is used as the deal name.
When a student enters all data, they will be enrolled in your course or redirected to your payment page.
Read more: How to enroll students in a course via a pop-up.
Comment
This element allows the user to input text of up to 5000 characters. Users can leave comments directly on the page, promoting feedback collection and improving interaction with your website's audience.
In the Variable field, select or create a variable to store the value. In the Placeholder text field, enter the hint text.
Optionally, you can turn on the Display title switch and enter a title for this field. Choose the field size: small (S), medium (M), or large (L).
Video
This element displays a video on your pop-up. Unlike the Video pop-up type, this option allows you to combine videos with other builder elements of your selected pop-up type.
Insert a video link in the Link field.
The builder supports only YouTube video links.
Set up a video display style:
| Orientation | Select a horizontal or vertical orientation. |
| Size | Select a smaller or larger pop-up video size. A larger video size will remove your pop-up frame. |
| Playback option | Select a video playback scenario: autoplay or play on click. |
| Sound | Choose how to play your video: muted or unmuted. |
Spin-to-win
This element adds a wheel that your website visitors can spin to win bonuses, discounts, or gifts.
Select or create a variable that will store the value of the sector where the wheel stops. Add sectors and customize their styles. Adjust your sectors’ probability, add text, and select a wheel position relative to your pop-up.
Read more: How to set up the Spin-to-win pop-up element.
Countdown
This element shows how much time is left until a certain event, for example, before a promotion ends or a course starts.
Select a countdown mode.
| Fixed end date and time |
The element will count down to a specific date and time. Click the field and select an event end date and time zone from the calendar. In the Time zone section, select your timer’s time zone (your account time zone or your visitors' time zone). |
| Dynamic end date and time |
The element will start counting down to a specific time when a website visitor sees your pop-up. Select a countdown period from the moment it starts. |
In the Date parameters section, select a number of countdown indicators using a slider (from days to seconds).
In the Style section, select a countdown design.
Adjust your text color, size (S, M, or L), and alignment (left, center, or right) below.
Gallery
This element shows images as a slideshow or by clicking.
Click Add a cover to add the first image, and select it from the file manager. Click Add slide to add the next images.
Customize your element design in the following sections.
| Rounding | Set the corner rounding in pixels that will be applied to all images. |
| Size |
Select a scale (horizontal, square, or vertical picture). Your image will be compressed, so make sure to upload suitable images or select a medium (square) size. |
| Automate slide transition |
Select this checkbox to enable automated image scrolling. In the section below, set a scroll frequency in seconds. |
| Position | Select an element position relative to your pop-up edges (with frame or without). |
Your pop-up size can affect the size of the Gallery element, but you can still adjust these settings separately.
Accordion
This element adds an expandable space that can be filled with other pop-up elements. You can use Accordion to hide certain pop-up elements to save space. Users can still view your hidden elements by expanding the accordion.
Сustomize the accordion by selecting its Style, Button color, and Divider color.
To add elements to the accordion, click + Add element. You will be redirected to the Elements tab of your pop-up. Click + Add element under the accordion, and add more elements.
You can also drag and drop your created elements into the Accordion section of the Elements tab to place them in the accordion.
File upload
This element adds a file uploader that allows users to include files from their devices. You can use File upload when you expect users to send files, such as unique discount vouchers.
Customize the element:
| Supported file type | Select Image, Document, Video, or several options simultaneously.
All uploaded files are available in your contact’s CRM card. |
| Maximum allowed size | Set the maximum file upload size. You can set this value up to 25 MB. |
| Form text | Enter your file uploader text. |
| Field color | Customize the element’s color or use the default settings. |
To add a CRM contact correctly, we recommend adding Entry field elements along with File upload to your pop-up.
Scratch card
This element adds an area where users must type in their contact information and scratch the virtual card to reveal a promo code. You can use Scratch card to gamify the process of contact collection and enhance user experience.
Customize the element in the following sections.
| Variable | Select a variable to store customer data or create a new one. |
| Text | Enter a scratch area text. |
| Promo code | Enter a promo code that appears after the card is scratched. Users can apply this code to claim discounts or other offers on your website. You can add multiple promo codes that will be randomly distributed among users. |
| Style | Select a scratch card style. You can select a rectangular or round shape and a golden or silver color. |
Dice
This interactive element adds a virtual die that users can roll to win a promo code after sharing their contact data. You can use Dice to gamify the process of contact collection and enhance user experience.
First, select a variable to store website visitors’ dice roll outcomes and data or create a new one.
Customize the element in the following sections.
| Pop-up text | Enter the text appearing below your dice. You can format it using the toolbar. |
| Number of dice | Select the number of dice appearing in your pop-up. |
| Maximum winning value | Enter the maximum value website visitors can roll. Your dice will not roll a greater value.
The maximum available value depends on the number of dice you selected (6 for one die, 12 for 2 dice, and 18 for 3 dice). |
| Post-roll text | Enter the text appearing after the roll. You can edit this text for every outcome individually. |
You can also customize the Face and Pip color of your dice or use default website settings.
Element management
To go back to the list of elements, click the Elements icon on the upper panel.
To delete an element, in the Elements tab, click the trash can icon next to it.
To rearrange your fields or elements, hover over the icon on the left, and drag and drop it to the required place. You can move all elements except for the Cover element.
Additional elements
You can also create a pop-up of the Video or Launcher type. Select these widget types during the first steps of creating a pop-up or in the Style tab, and customize them in the Elements tab.
Video
This pop-up plays a video in your selected format.
Type in a YouTube video link, and select a placement (horizontal or vertical).
Select a video playback scenario.
| Autoplay | Your video will start playing after any user action on your page. |
| Click-to-play | Once your page is loaded, users will see your video preview. The video will start playing when users click your pop-up.
Mobile device users need to click your video pop-up to play it. |
Select a placement relative to the edge of the screen.
Select a target action.
| Without action | Your pop-up will display only the video. |
| Call to action | Aside from the video, your pop-up will also have a call-to-action button. Enter your button text, and select an action (close the pop-up or open the URL). If you have selected the second option, add a URL. |
Launcher
This is a small static icon pinned to the selected corner of the page. When users click it, a certain action is triggered, for example, another pop-up opening or user redirection to the specified site page.
Select a target action (open a pop-up or open a link).
To customize your pop-up style, you can select a background color, set the rounding, add an outline, change the icon color, and select its type.
You can select an icon when choosing a pop-up template or upload your own. To upload your own, click the pencil icon, and select an image from the file manager.
Learn more: How to create a launcher pop-up.
Customize your pop-up
To customize your pop-up, click the first tab icon (Style). In this tab, you can set your pop-up type and style and add entrance and exit animation.
Type
You can select the following pop-up types based on your widget's appearance:
| Pop-up type | Description | Style settings |
| Floating | A floating window placed on the left or right of the browser window when a user scrolls the page. Users do not need to close it to interact with your site page content. | You can customize these elements in the Style tab. Read more in the Style section. |
| Modal window | A block located in the center of the page. All the other site page content is darkened and not clickable. Users need to close the modal window to interact with your site page content. | |
| Overlay | A block that covers the entire site page. Users need to close the pop-up window to interact with your site page content. | |
| Horizontal | A horizontal window that can be placed at the top or bottom of the page. Users do not need to close it to interact with your site page content. | |
| Video | A window that plays YouTube videos.
Learn more: Video. |
You can customize these elements in the Elements tab. |
| Launcher | A small static icon pinned to the selected corner of the page. When users click it, a certain action is triggered (opening another pop-up or opening a link).
Learn more: Launcher. |
Style
You can customize your pop-up using the following settings:
Styles are applied to all elements at once, but you can also customize your elements individually in their settings.
| Position | Adjusts pop-up position relative to the edge of the screen.
Applicable to the Standard and Horizontal types. Other types will be positioned in the middle of the screen. |
| Width | Adjusts pop-up width. You can use the slider or enter a value in pixels. |
| Inner padding | Adjusts pop-up elements’ inner padding. You can use the slider or enter a value in pixels. |
| Style | Adjusts pop-up elements’ colors.
Select a color scheme — light, dark, or custom. You can apply it to checkboxes, NPS form icons, and all types of pop-up buttons. Select a color. You can apply it to checkboxes, NPS form icons, and all types of pop-up buttons. |
| Background image |
Sets an image as a pop-up background. The image will be applied to the entire pop-up and will not affect any added elements, such as Image or Cover. Click Upload image, and select a picture from the file manager. |
| Field size | Adjusts the size of all pop-up elements. Available options: small (S), medium (M), and large (L). |
Close icon
Customize your close icon’s style.
Click Settings, and select an icon style, color, and size in pixels, location, and position relative to your pop-up (completely within your pop-up, partially outside, or completely outside your pop-up).
Animation
You can also add entrance and exit animation.
| Entrance animation | Pop-up appears with the selected effect when display conditions are met. |
| Exit animation | Pop-up closes with the selected effect when a user clicks the button or the cross icon to close it.
Elements with form submission buttons: Messaging app, Button, Pop-up flow, and EDU. |
Under your animation type, select a side from which it will appear.
You can select the following animation effects: back, bouncing, fading, rotating, light speed, flipping, zoom, and sliding.
To see what an effect looks like, select it. To replay an effect, click the arrow icon.
Add a language version
You can add language versions and customize their content in one pop-up. Your website visitors will be able to choose the language they prefer.
Click the globe icon in the upper right corner of the workspace. Click Add default language, and select a language from the list — this language will be visible to all your website visitors. Then, click Add language version, select a language, and customize your pop-up content.
Read more: How to configure a multilingual pop-up.
Preview your pop-up
As you edit your pop-up, you can instantly preview how it will look on your website in real time. To view its mobile version, click the corresponding icon on the right.
Once you finish customizing your pop-up design, click Next.
Set up pop-up display conditions
In the Display conditions tab, you can set your widget to appear when a user clicks the launcher or once visitor behavior tracking conditions are met.
To display a pop-up upon clicking the launcher, turn on the toggle, and select an existing pop-up of the Launcher type.
To display a pop-up based on a visitor behavior tracking condition, select the event you want to track and the condition operator, and enter the tracked value. You can also select multiple conditions and link them to operators.
For example, you can display your widget only when users perform a certain action, like scrolling to a certain part of the page or spending more than 40 seconds on your website.
Learn more: How to set up a pop-up display scenario and How to create a launcher pop-up.
Once you configure your pop-up display conditions, click Next.
Configure data saving options
In the Data saving tab, you can select where to save subscriber data.
Turn on a toggle*, and select an option.
| Save to a mailing list | Saves data to your selected mailing list in the Email section. A variable name will be retrieved from a placeholder or element, and a value will be retrieved from a filled field or a pop-up element a user selected.
Select a mailing list where you want to save contacts. |
| Create a deal in CRM | Saves data as a deal and contact to your CRM system. You can select a pipeline, enter a deal name, and select a deal stage.
When contact data points are saved to your CRM system, new contact fields will be created. |
| Send an email notification about new subscribers | Sends email notifications about each new subscriber. Enter an email address to which you want to send notifications. |
*You can only save values from pop-ups that collect user data. If you do not have the Entry field, Dropdown, Multiselect, Radio button, Checkbox, NPS survey, and EDU elements, then the toggles will be inactive.
Name your pop-up
By default, your project name is generated using the date and time when it was created. To rename your project, click the corresponding icon, enter your text, and press Enter.
Publish your pop-up
Once you set up all the necessary conditions, click Save and publish or Save and close.
To make sure that all the changes are displayed in your browser, clear your browser cache and cookies after saving your pop-up.
All of your pop-ups are displayed in the Pop-ups section as separate tabs. Once you create your pop-up, you will be able to view it, track its statistics, and edit it. However, you will not be able to change its pop-up type.
Last Updated: 09.10.2024
or