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.
- 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.
Then, assign a system name to the pop-up and add a description if necessary.
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.
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.
- 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.
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.
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!