How to Create a Smart Pop-up

With our widget builder, you can create smart pop-ups that are shown to visitors only as specified by a certain scenario. Make a personal offer at the right time, help your client choose a product or service, or collect subscribers to interact with them using the SendPulse service.

You can choose a pre-made template and use it right away or edit it according to your needs.

Let's talk about how to create a widget using a template and set up its appearance, message text, target action, and display condition.

Go to your project in the "Display scripts" tab, and click Create pop-up.

Choose a Template

A template is a widget with predefined appearance and target action settings. You can choose a pop-up template from the list of popular or festive templates based on your widget type or purpose.

Select a template based on your preferred widget appearance.

Overlay	A block that covers the entire site page. Users need to close the pop-up window to interact with your site page content.
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.
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. If you select an automated scenario, the video will start playing after any user action on the page. If you select the “Activated when click” option, users will see a video preview once the page is loaded, and the video will start playing when they click the pop-up. On mobile devices, video pop-ups are always played only when users click them.
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.
Launcher	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 template based on your preferred target action.

Cookie request	Asks site visitors for cookie consent. Your visitors can close the pop-up by clicking the button or following the link to read your cookie policy.
Call to action	Encourages visitors to take an action, for example, close the pop-up or go to your landing page.
Social media subscription	Redirects your site visitors to the selected social media or messaging platform. You can add any number of social media buttons to one pop-up. If you have a chatbot, users will be able to subscribe to it and receive a welcome message.
Chat interaction	Allows your site visitors to contact you via a social network or feedback form.
Newsletter subscription	Collects your site visitors’ email addresses.
Phone request	Collects your site visitors’ phone numbers.
Custom form	Collects additional subscriber data.

Customize Your Pop-up Appearance

Once you choose a template, you will see the opened widget builder in the "Content" tab, where you can edit your widget appearance and change its target action.

Choose whether you want to display an image or not. If you want to display an image, upload a JPG, PNG, or GIF file that is up to 1 MB large, and align it with your text and button: left, right, top, or full screen.

If you selected the "Video" pop-up type, add the link to your Youtube video, and choose when to play it (automatically or after users click on it).

Select your background color (white, black, or colored) and the placement of your pop-up on the page.

You can choose the placement only for pop-ups, video pop-ups (left or right), and long pop-ups (bottom or top).

On the right, you can see what your pop-up will look like on your site.

Add a Message

Enter a context-appropriate message for your site visitors that will encourage them to interact with your pop-up. You can format your text and add links and emoji.

For example, if a visitor has viewed a 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 the shipping cost when they are exploring your shipping options.

Choose a Target Action

Each selected template has its target action users are expected to perform: click on a button, subscribe, or provide contact information.

You can skip this setting or change your target action to remove or add fields and buttons.

The settings may vary based on your selected target action.

Action	Description	How to set it up
Call to action	Encourages your site visitors to take an action, for example, close the pop-up or go to your landing page.	Add your button text, and select what to do when users click it: close the pop-up or redirect them to another page.
Subscribe to the messenger	Redirects your site visitor to the selected social media platform. You can add up to 10 social media links to one pop-up. If you have a chatbot, users can subscribe to it and receive a welcome message.	Select a social media icon, and enter your button text. You can also redirect users to your Telegram, WhatsApp, Instagram, and Facebook Messenger chatbot if you have one.
Newsletter subscription	Asks your site visitor to provide their email address. You can also save your contacts to the Email and CRM services.	Add your hint text to the field where subscribers will provide their contact information, and enter your button name. To save your contacts to the email service, select "Save to mailing list," and choose a mailing list. If you do not have a mailing list, the service will automatically create one with the name of your project. To save your contacts to your CRM system, select "Create a deal in CRM," and choose a pipeline and stage. When you add deals to CRM, contacts are automatically created in the "Contacts" section.
Phone request	Requests your site visitor's phone number. You can also save your contacts to the Email and CRM services.
No action	Does not add elements of interaction with visitors. The widget is used only to display information.	There is no button or input field to configure.
Custom form	Asks your site visitor to provide the data you select. You can also save contacts in the Email and CRM services and add a custom variable that will be stored in the CRM card of the created or existing contact.	In the "Entry field," select a data type, and enter your hint text. If necessary, you can make any field required or optional and activate the header. You can also create your own field type: The “Input field” element is a field where users can share their data. For this field type, you can add its name and choose a data type (string, number, date, or reference). The “Checkbox” element is a text box visitors can select, for example, to consent to data processing. The “Multiple choice” element has several checkboxes users can select in the pop-up, for example, "I consent to data processing" and "I want to receive newsletters." The “Dropdown” element is a field where users can select one value from the list. For each field, enter the text your visitors will see, and select the value that will be added to your CRM variable. The “Radio buttons” element is a field where users can select one value using radio buttons. Enter the text your visitors will see, and select the value that will be added to your CRM variable. Depending on the field type, you can configure data collection in your CRM mailing list or create deals.
Link	Redirects users to the specified site page when they click the pop-up. Available only for the “Launcher” template.	In the "Enter link" field, add a link to the page where users will be directed when they click the launcher. If you want the page to be opened in a new window, select the "Open in new window" checkbox.
Open pop-up	Launches another pop-up on the page when clicked. Available only for the “Launcher” template.	In the "Choose a pop-up" field, select a pop-up by name from the drop-down list — it will be opened when visitors click the launcher.

You can add any pop-up to your launcher — it will be opened when users click the launcher. To do this, in your pop-up settings, select a launcher from the drop-down list.

Once you have set up your pop-up appearance and target action, click Next.

Set Up Your Scenario

In the next window, go to the "Targeting" tab. You can track visitor behavior and display the widget only when users perform a certain action, like scroll to a certain part of the page or spend more than 40 seconds on your site.

Condition Types

Select an event and a condition operator to track your site visitors’ behavior, and enter the value you want to track.

Event Description How to configure it

Show always

Your widget will be displayed to users who visit your site without waiting for various conditions to be met.

UTM Medium

Tracks the parameter that determines the type of traffic.

The widget is displayed only to users with the specified utm_medium parameter value.

Select the "equal to," "not equal to," or "contains" condition.

Enter a value that is equal to or containing the characters of the utm_medium parameter.

Possible values:

cpc (pay-per-click advertising);

cpm (pay-per-impression advertising);

referral, organic (traffic that comes to your site from search engines);

social (clicking on a post, setting up social media ads, and more).

UTM Content

Tracks the parameter that determines the part of the page the user came from.

The widget is displayed only to users with the specified utm_content parameter value.

Select the "equal to," "not equal to," or "contains" condition.

Enter a value that is equal to or containing the characters of the utm_content parameter.

Possible values:

/ (the user came from the main site page; the last part of the address);

/emailservice/forms (the user came from another site page).
It may also include your page element names.

UTM Term

Tracks the parameter that determines the keyword or query phrase that led the user to your site from a search engine.

The widget is displayed only to users with the specified utm_term parameter value.

Select the "equal to," "not equal to," or "contains" condition.

Enter a value that is equal to or containing the characters of the utm_term parameter.

UTM Campaign

Tracks the parameter that determines the name of your advertising campaign.

The widget is displayed only to users with the given utm_campaign parameter value.

Select the "equal to," "not equal to," or "contains" condition.

Enter a value that is equal to or containing the characters of the utm_campaign parameter.

UTM Source

Tracks the parameter that determines the traffic source where the user came from.

The widget is displayed only to users with the specified utm_source parameter value.

Select the condition equal to, not equal to, or contains.

Enter a value that is equal to or containing the characters of the utm_source parameter.

Possible values:

site.com (any site);

google (search engine);

facebook.com (social network);

direct (the user entered your site URL in the address bar or accessed your site using their bookmarks)

direct

Traffic type

Tracks where the visitor came from.

The widget is displayed only to visitors from the selected traffic sources.

Select the "equal" or "not equal" condition.

Choose one of these possible types of traffic:

referral (the user came to your site via a link);

organic (the user came to your site from a search engine);

utm (the user came to your site via a link with a UTM tag);

social (the user came to your site from social networks);

typein (the user entered your site URL into the address bar);

Time on current page

Tracks the time the user spent on the current page.

The widget will be displayed to your site visitor if they spend the specified amount of time on your page.

Select the "greater than" or "less than" condition.

Enter a value that is greater than or less than the duration of the landing page visit in seconds, minutes, or hours.

Time on site

Tracks the time spent on all pages of your site.

The widget will be displayed to your site visitor if they spend the specified amount of time on your site.

Select the "greater than" or "less than" condition.

Enter a value that will be greater or less than the duration of the site visit in seconds, minutes, or hours.

Number of sessions

Tracks the number of visitor sessions.

The widget will be displayed to the user if the specified number of sessions takes place on your site.

Select the "greater than" or "less than" condition.

Enter a value that is greater than or less than the target number of sessions per user.

Scroll over 50% of the page

Tracks how far the user scrolls the page.

The widget will be displayed to your site visitor when they scroll halfway through the page.

Choose “yes” or “no.”

Cursor off screen

Tracks the mouse cursor movement.

The widget will be displayed to your site visitor if they start or do not start moving the cursor to switch to another tab or close the current one.

Choose “yes” or “no.”

Traffic source

Tracks the page the visitor came from.

The widget will be displayed to your site visitor if the given URL matches the referral URL.

Select the "equal to," "not equal to," or "contains" condition.

Enter the page address from which the user came to your site.

Current page URL

Tracks the page the user is currently viewing.

You can choose this setting to show (or hide) the pop-up on certain pages of your site.

The widget will be displayed to your site visitor after they load the page with the given URL.

Select the condition equal to, not equal to, or contains.

Enter a value that contains the link or part of the link to the current page.

URL of the visited page

Tracks the page the user came from.

The widget will be displayed to your site visitor after they load the page with the given URL.

Select the condition equal to, not equal to, or contains.

Enter a value that contains a link or part of a link to the target page.

Page title

Tracks pages by their titles.

The widget will be displayed to the user when they visit your page with the same title.

Select the "equal to," "not equal to," or "contains" condition.

Enter a value that is equal to or containing your landing page title characters.

Browser

Tracks the browser and device your site visitor is using.

The widget will be displayed to the user when they visit your site from a specific browser or any browser on mobile/desktop.

Enter a value that matches a browser name or matches all browsers on mobile or desktop.

Date period

Tracks the date when the user visited your site.

The widget will be displayed only during the selected time.

Select the time interval when the widget will be displayed on your site.

A new day begins after 00:00 midnight. Therefore, the night time must be described according to the following formula: “before 23:59”, the “or” operator, “after 00:01.”

When you create your widget, your browser time zone is taken into account. However, when it is used, your customers’ time zone is taken into account.

Pages visited

Tracks the total number of pages visited by the user.

The widget will be displayed when the user visits more or fewer pages than you specified.

Select the "greater than" or "less than" condition.

Enter a value that will be greater or less than the number of pages visited by the user during the current session.

Pages visited in current session

Tracks the number of pages visited by the user during the current session.

The widget will be displayed when the user visits more or fewer pages during one session than you specified.

Select the "greater than" or "less than" condition.

Enter a value that is greater or less than the number of pages visited during the current session.

Browser

Keeps track of the language set in the visitor’s browser settings.

You can choose this setting to show (or hide) the pop-up on different language versions of your site.

Select the "equal to" or "not equal to" condition.

Select your browser language from the list.

Binding Operators

And / Or

If you want to add additional values to your current condition type, click the + icon on the right.

Select the "and" or "or" operator.

The "and" operator is used to strictly take into account each value — both the first and the second. If one of the conditions is not taken into account, then the pop-up will not be displayed on your site.

The "or" operator is used to take into account any of the values — the first or second.

Each / Any

You can use different types of conditions and check the information using several parameters at once.

If you want to add another condition, click Add Condition.

Select the order in which the conditions are to be met:

The "each" operator is used to display the pop-up only when all of the specified conditions are met.

The "any" operator is used to display the pop-up when any of the specified conditions are met.

Set the Scenario Name

By default, your project name is generated using the date and time when it is created. To change your project name, click on the corresponding icon next to it.

Once you have set up all the necessary conditions, click Save and publish.

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 "Scenarios on the site" section as separate tabs. Once you create your pop-up, you can view its appearance, track statistics, and edit any setting except for your pop-up type.

Last Updated: 19.05.2023

Rate this article about "How to Create a Smart Pop-up"

User Rating: 4 / 5

Popular in Our Blog

How to Create a Smart Pop-up

Contents

Choose a Template

Customize Your Pop-up Appearance

Add a Message

Choose a Target Action