How to create and publish a pop-up on a website

A pop-up is an interface element that appears over the content of a web page in a browser. It is used to attract new customers, display news, or collect data through a form. Typically, a pop-up looks like a floating window on the website.

Before placing a pop-up, you will need to set up the Tag Manager in advance. You can read how to do this here.

Step 1. Creating a pop-up​

Go to the «Weblayer» → «Pop-Ups» section and click on «+ Create» at the top of the page.

Select the type of pop-up:

• Pop-up modal — A pop-up window that appears in the center of the screen. It is commonly used for collecting email addresses.

• Floating bar — A customizable bar that is positioned at the top or bottom of the page. It is suitable for informing customers about news or limited-time offers.

• Slider — A small window that appears in the bottom right corner of the page. Slide-in windows can be used to display additional information, offers, or feedback forms.

• Page takeover — A pop-up window that takes up the entire browser screen. Full-screen pop-ups should be used with caution, as they can be perceived as intrusive and may cause dissatisfaction among users.

Select a pop-up template: The platform offers several pre-made templates. You can use any of them as a starting point. In the next step, you will be able to fully customize the template (set the text, styles, configure fields, etc.) to suit your specific needs.

Then, assign a system name to the pop-up and add a description if necessary.

Step 2. Editing text and design​

The appearance of the pop-up is defined by parameters. These parameters include text, images, and CSS styles for various elements. For example, the text parameter contains the main text of the pop-up, while the backgroundColor parameter specifies its background color.

There are two tools available for editing pop-up content:

• Editing parameters in the visual editor. This is suitable for users who are not familiar with coding. To change the appearance of the pop-up, simply input text, select images from the gallery, or use color palettes.

• Editing HTML, CSS, and JavaScript in the code editor. This option is for users who want to work directly with the pop-up’s code.

Any changes made in the editor are displayed in the preview window in real-time. To check how the pop-up will look on different devices, use the buttons in the upper left corner.

Detailed instructions for coding a pop-up in the code editor can be found on the documentation portal. In this article, we’ll take a closer look at working in the visual editor.

Visual editor

You can customize text and change the appearance of the pop-up in the visual editor under the «Design» section.

In this section, all parameters are divided into categories:

• Copywriting: The text of the pop-up. You can add a variable </> to any text element to dynamically load profile data into the pop-up.

• Background: Choose the background color and image, as well as the browser page’s background color when dimmed.

• Border: The borders of the pop-up window.

• Form: The configuration of data input fields.

• Actions: The button text and their CSS styles.

• Close button: The appearance of the button that allows users to close the pop-up window.

• Image: Add an image to the pop-up in this tab. Not all ready-made templates provide this option.

• Typography: CSS styles for all text elements.

Step 3. Configuring actions after submitting the pop-up form​

Go to the «Actions» section. Here you can define the actions to be taken after the user fills out and successfully submits the pop-up form:

• Profile import allows you to load the data of the user who filled out the form into one or more databases.

• Form submission to email activates notifications about the form submission to the specified email addresses.

To import profiles, you need to specify the subscriber search mode (the field by which the platform will check if a profile for the user exists in the database), the profile database, and the form element from which the platform will take the value for the search. You can also configure the import details here:

Step 4. Publishing the pop-up on your website via Tag Manager

To publish the pop-up on your website, you need to first set up a container in the Tag Manager. For details on how to do this, refer to this article.

After making all the changes to the pop-up, save it using the button on the top panel. The «Appearance» section will then become active. Go to it and click «Bind» to link the pop-up to the container in the Tag Manager:

Enter the tag name. A tag is a piece of code that executes on your site under certain conditions. In this case, the tag is for displaying the pop-up.

Set up the tag activation settings and apply restrictions. These parameters are not mandatory, but we recommend specifying them. They allow you to schedule the pop-up display, such as for a particular holiday or day of the week. Restrictions can help ensure that the pop-up does not annoy site visitors by appearing too frequently.

Choose triggers or create a new one. A trigger is a condition that activates a tag. Triggers monitor specific events on the site (such as clicks or page loads) and activate tags in response to these events. In this case, the trigger will initiate the display of the pop-up.

To set more specific conditions for the pop-up display, use a filter. To do this, in the «Trigger activation conditions» section, select «Some pages» and configure the filter:

Save the tag. The specified condition for displaying the pop-up will appear in the «Appearance» section:

Save the pop-up and publish it. Then, go to the associated container and publish the new version. After that, the pop-up will be shown to website visitors when the event specified in the trigger occurs.

Step 5. Analyze results

You can analyze the statistics for pop-ups and view form submission results in the «Analytics» section. To do this, click on the icon in the pop-up editing window or in the general list of pop-ups:

In the analytics section, there are two tabs:

• Popup statistics — general summary of the pop-up.

• Results analysis — statistics on form field submissions.

Let’s focus on the first tab. The popup statistics are divided into three sections: period statistics, conversion funnel, and analytical slices.

The period statistics display the trend of metrics over the selected timeframe:

• Unique impressions — the number of times the pop-up is shown to users. If the pop-up is shown multiple times to a user within the same session, only one unique impression is recorded.

• CTA — before the form submission event is registered, this metric shows clicks on any form element. If the form has been filled out and submitted at least once, this metric reflects the number of submissions.

• CTA, % — (Unique impressions / CTA) * 100%.

The conversion funnel represents a sequence of steps that a group of website visitors goes through. With each step, the number of users decreases. The steps include:

• Targeting hits — the number of times the conditions for showing the pop-up, set in the trigger, were met. The pop-up might not have been shown to the user due to tag limits set in the "Activation Settings" and "Restrictions" sections.

• Unique impressions — the number of times the pop-up is shown to users.

• CTA — before the form submission event is recorded, this metric shows clicks on any form element. If the form has been filled out and submitted at least once, this metric reflects the number of submissions.

In the analytical report slices, pop-up metrics are grouped by the following criteria:

• By time zone;
• By cities;
• By countries;
• By language (browser language);
• By operating system (OS on the user's device);
• By browser;
• By referrer (URL of the page where the pop-up was shown);
• By UTM parameters (content, medium, source, campaign, term).

You can also select specific metrics to display for any slice.

Conclusion

Pop-ups are one of the most commonly used tools in digital marketing. It’s hard to imagine any modern marketing strategy without them. We hope this guide helps you set up pop-ups to implement your ideas!