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.

The Overlay type covers the entire site page. Users need to close the pop-up window to interact with your site page content.

A floating type is 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.

A horizontal type is 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.

A video type is a window that plays YouTube videos. If you select the 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 the preview once the page is loaded, and the video will start playing when they click on the pop-up.

On mobile devices, video pop-ups are always played only when users click on them.

A modal window is 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.

Select a template based on your preferred target action.

Cookie request pop-up template ask site visitors for cookie consent. Your visitors can close the pop-up by clicking on the button or follow the link to read your cookie policy.

Call to action pop-up template encourages visitors to take an action, for example, close the pop-up or go to your landing page.

Subscribe to the messenger pop-up template redirects your site visitors to the selected social network 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 pop-up template gives your site visitors to contact you via a social network or feedback form.

Newsletter subscription pop-up template collects your site visitors’ email addresses.

Phone Request pop-up template collects your site visitors’ phone numbers.

Custom form pop-up template 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 on it: close the pop-up or open the link.
No action

Does not add any user interaction elements.

The widget is only used to display information.

Does not have a button or input field for you to customize.
Social media subscription

Redirects your site visitor to the selected social network.

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 network 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 it 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 in CRM, contacts are automatically created in the "Contacts" section.

Phone requests

Requests your site visitor's phone number.

You can also save your contacts to the Email and CRM services.

Custom form

Asks your site visitor to provide the data you select.

You can add additional fields to the form, like phone number, email address, name, nickname, location, and date of birth.

You can also save your contacts in the Email and CRM services.

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.

Publish the Pop-up

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.

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

    User Rating: 4 / 5

    Popular in Our Blog

    Try SendPulse today for free