Skip to main content

Creating and publishing a pop-up

Step 1. Creating a pop-up​

1. Go to "Weblayers" → "Pop-ups" and click "+ Create" at the top of the page:

2. Select pop-up type:

  • Pop-up Modal is a pop-up window that appears in the center of the screen. It attracts the user's attention as it darkens the background of the browser. Typically used to collect email addresses.

  • Floating Bar is a customizable panel that is located at the top or bottom of the page. Remains visible on the screen even when scrolling the page. Suitable for informing customers about news or limited offers.

  • Slider is a small window that appears in the lower right corner of the page. It is less intrusive and does not interfere with the visitor's viewing of the page content. Drop-down boxes can be used to display additional information, suggestions, or feedback forms.

  • Page Takeover is a pop-up window that takes up the entire browser screen. This ensures that visitors do not miss the information presented. However, full-screen windows should be used with caution, as they can be perceived as intrusive advertising and cause dissatisfaction among users.

3. Select pop-up template. The platform already has several ready-made templates. Use any of them as a base. In the next step, you can completely change the template (set text, styles, customize fields, etc.) and customize it to suit your needs.

4. Set the system name of the popup and add a description if necessary. You can also set tags for quick search and assign access groups .

Step 2. Change text and design​

The appearance of the popup is set using parameters. The options contain text, image, and CSS styles for various elements. For example, the text parameter contains the main text of the popup, the backgroundColor parameter contains its background color.

There are two tools available for working with popup content:

  • Editing parameters in a visual editor. Suitable for users not familiar with the code. To change the appearance of the popup, just enter text, select images from the gallery, or use color palettes.

  • Change HTML, CSS and JavaScript in the code editor. Suitable for users who want to work directly with the pop-up code.

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

Visual editor​

To customize the text and change the appearance of the pop-up window in the visual editor, go to the "Design" section. In this section, all parameters are divided into categories:

On the "Copywriting" tab you can set the text of the popup. The following options are available:

  • title — title;
  • text — main text;
  • <field>Label — label for form fields.
  • <field>Placeholder — text tooltip inside the form field.

You can add a </> variable to any text element to dynamically pull profile data into the pop-up. You will find a description of the variables in this article.

Code editor​

To work directly with the code, go to the "Settings" section. Recommendations for layout of a popup in the editor are collected in this article.

Step 3. Setting up actions after filling out the pop-up form​

Go to the "Actions" section. Here you can define the actions that need to be performed after the user fills out and successfully submits the popup form:

  • Import profiles allows you to load the data of the user who filled out the form into one or more databases;
  • Sending a form by email activates sending notifications about form completion to the specified email addresses.
tip

The actions after filling out the popup form are similar to the actions after filling out a standard web form. You can read more about setting up actions in this article.

Step 4. Publish a pop-up on the site​

There are two mechanisms available for displaying a popup on the site:

  • Adding a script to a site page manually — this method is used for direct access to popup management. The conditions for displaying a popup must be implemented independently.

  • Adding a script through Tag Manager is an easier way. It is enough to place the container code once on the site pages, and all further settings of the popup, including the conditions for its appearance, are set in the platform interface.

Adding a script manually​

1. Save all the specified settings and make sure that the popup status is "Active". Then click the "Publish" button:

2. In the additional actions menu, click . On the right, a window will appear where you need to select databases to search for profiles. Matching data can be sent along with the popup data request from the server. If a profile with such data is found in one of the selected databases, its information will be updated; otherwise, a new profile will be created in the database.

3. Click the "Show Code" button at the bottom of the page. Copy the popup code and give it to the developers so that they can add it to the required pages of the site.

caution

Please note that here you specify the databases for searching existing profiles. The data of users who filled out the form in the popup will be imported into the database specified in the "Actions" section.

Adding a script via Tag Manager​

1. Save the popup using the button on the top panel. After this, the "Appearance" section will become active. Go to it.

2. Click "Bind" to bind the popup to a container in Tag Manager:

3. Select container or create a new one.

4. Enter tag name. A tag is a piece of code that is executed on a website under certain conditions. In this case, the tag is a popup display.

5. Set activation settings and limits for the tag to be executed.

6. Select triggers or create a new one. A trigger is a condition for executing a tag. Triggers track specific events on a site (such as clicks or page loads) and fire tags in response to those events. In this case, the trigger will start displaying the popup.

7. To set more specific conditions for a popup to appear, use a filter. To do this, in the "Trigger activation conditions" block, select "Some events" and configure the filter:

8. Save the tag. The specified condition for displaying the pop-up will be displayed in the "Appearance" section:

9. Save the popup and publish.

10. Go to the linked container andpublish the new version. After this, the popup will be shown to site visitors when the event specified in the trigger occurs.

Profile matching​

You can independently identify a site visitor and transfer data about him to the platform using the acDataLayer.push() method. If the system finds a profile in the database, it will update its data.

Example:

acDataLayer.push({
  matching: {
    matching_mode: "email",
    matching: { email: "test@example.com", db_ids: [1, 2] },
  },
});
  • matching_mode — profile search mode; can take the following values: "email", "email_profile", "phone", "profile_id" or "custom".
  • matching — an object with one or two parameters: "field to search": "field value" and "db_id": "Database ID" - databases in which to search for the profile.

Step 5. Analyze the results​

You can analyze pop-up statistics and view the results of filling out the form in the "Analytics" section. To do this, click on the icon in the pop-up editing window or in the general list of popups.

Last updated on