Login

Courses

Courses

Omnichannel

Security and Compliance

Integration

Website Integration

How to Set Up a Pop Up for Your Website

A pop-up is a form for collecting contact information that floats on top of the site window.

Place widgets anywhere on your site without code changing.

Note!

To publish the form, install our script on the website. To get a script, go to Site → Widgets, click the Get script button and specify your site's domain. Install the script on the website before the closing body tag.

The script must be installed on every website page.

Get script

Creating a pop-up form for a website

Form type

1. Go to Site → Widgets and click the New subscription form button.

Creating a new widget

2. Select the Pop Up form type.

3. Enter the form name. Please note that the form name is used to search within the system; visitors won't see it on your website.

4. Select the input fields to collect data via the widget: email, phone number, and/or name.

Type and fields

5. After completing the settings in this tab, click the Next button.

Form appearance

1. To set the colors of the main title, background, and button, click on the appropriate element and select its color.

Colors of the form elements

2. To select the style of the form, click on the template you like. A total of five styles are available: Classic, Minimalist, Smooth, Decorative and Modern. Then click Next.

Form styles

3. Select the most appropriate form appearance. You’ll be able to edit it as needed:

Option #1

Option #1

Option #2

Option #2Option #3

Option #3

Option #4

Option #4.

Then click Next.

Pop Up Content

  • Edit the content for all pop up states:
  • Signup is a state that a new user sees;
  • Success is a state seen by a user who has successfully submitted a request;
  • Already subscribed is a state seen by an existing contact who has resubmitted the request;
  • Error is a state that a user sees when the request fails.

Left settings panel

On the left, there are placed form structure elements to drag and drop to the form.

Drag and drop form elements

In the top left corner placed buttons for copying, duplicating and cutting form elements, and tools for text editing.

Basic editing tools

Right settings panel

On the right, there are 3 tabs with settings – Layout, Content and General.

Right settings panel

Layout tab

Set up close icon, text style, and breakpoint here.

Close icon

1. Set up the positioning of the close icon on desktop and mobile.

Positioning

2. Select the preloaded image for the close icon or upload a custom one.

Image

Text style

By default, the widget will use the font set on the website as the main one.

To use a different font for the website, enter its name.

Breakpoint

In the Breakpoint section, specify the screen width, starting from which the display of the form switches to the mobile version. By default, this is less than 576 pixels.

Breakpoint

Content tab

The structure of a pop up can consist of the following levels:

  • state,
  • container (for some types of forms),
  • element.

Form structure

To make changes, click on the state, container, or element you want to edit. After that, you’ll see the settings for the selected item on desktop and mobile devices.

Display settings

Note! Settings marked with a lock icon apply to all elements in the level you edit. You can change the synchronization setting by clicking the icon and selecting the needed option.

Lock icon

Input field parameters such as Background, Shadow, and Stroke are set to For all by default. This means they remain unchanged on error. If you want them to change on error, in the drop-down list, select Do not sync.

You can change the arrangement of elements by dragging and dropping them. Edit the margins, padding, and round corners on the right.

Edit appearance

At the state and container level, you can change the layout of the fields: from vertical to horizontal and vice versa.

Fields settings
To show the parent element, click on it or use the arrow in the top settings panel.

Arrow to a parent element

In the widget editor, you can change the default country code for the phone field. By default, the country code is set according to the country specified in your account settings.

Default country code

Pop up has built-in validation. If the format of the entered data is incorrect, the error text will be automatically displayed. You can select the required fields. Trying to submit a form with an empty required field, the user will see the error text.

All errors are displayed in one of the languages: English, Russian, Ukrainian. The contact's browser determines the text language.

Validation

You can set an image as the background of a structure, containers, or elements (for example, buttons).

Picture as the background

General tab

In the General tab, select the action on click.

Action on click

Upper settings panel

Upper settings panel

1. The Back and Forward arrows allow you to undo or redo the changes made to the launcher.

2. Multilanguage settings.

  • widget appearance settings are performed only for the main language, from where they are automatically copied to all other language versions;
  • in language versions, only the text can be changed;
  • the widget is displayed in the language of the site, which is determined by the value of the lang attribute in the HTML tag; if it's not there, by browser language.

3. The background color of the launcher helps you to check how the button will appear on the real background.

4. Buttons for switching to the mobile or desktop version of the widget.

5. Widget preview.

6. Close without saving.

7. Save.

Parameters tab

You’ll be redirected to the settings automatically after saving the form appearance. Later you can find it in Site → Widgets → Particular form → Parameters.

Parameters tab

Widget calling parameters

Select widget calling parameters on the appropriate panel: by rules or by clicking on the launcher.

Widget calling parameters

Widget calling by rules

To configure the pop up calling by rules, click the Edit button.

Edit rules

Set up:

  • Display frequency;

Display frequency

  • When to display pop up;

When to display

  • To whom to display pop up;

To whom

  • On which pages to display pop up;

Condition cards for pages

Similar to dynamic segments builder, here you can choose pages to display the form.

  • You can manage the form display using the API: by clicking on a page element or via JavaScript. If you want to use a custom launcher for your form, insert a CSS selector of the call element. To show form on some extra condition, copy the JS function below.

Conditions for displaying the widget

Widget calling by clicking on launcher regardless of the widget display conditions

Activate this feature so that the widget is called on click on the launcher regardless of the widget display conditions.

By click on launcher

Actions after subscription

  1. Select the segments to add contacts to.

Saving contacts to segments

You can add either only new or all contacts.

Adding only new contacts

  1. Set up a subscription confirmation via email. More on Double Opt-In>>

Set up a subscription confirmation

  1. Select confirmation email.

Confirmation email

If you haven't a ready message, you can use a default email. If you already have one, click the Replace button to choose it.

  1. Select where to send the user after clicking the confirmation link.

Redirect page

You can redirect users to the default thank-you page or a custom page on your site.

  1. Enable onboarding.

Onboarding

You can select a welcome email or set up a welcome series through the workflow to engage subscribers. Activate the toggle Only to new contacts to avoid sending a welcome campaign to existing contacts.

Posting pop up on the website

Having saved all the settings, check how visitors will see the form on the site. To do this, click on the View on page button.

View on page

Enter the link to your website and click Open.

Entering the page URL

If all steps are successful, the pop up will be displayed on your website according to the specified conditions.

Displaying the form on the website

After testing the form, publish it by clicking on the Visible to website visitors button, then click Save.

Widget visibility status

To stop displaying the form, click on the Visible only to you button, then save changes.

To set up form start and end dates, use schedule button, which is placed on the created widget page.

Schedule

Analyzing form performance

Go to Site → Widgets → Particular form → Analytics to see the statistics on your form:

  • Views;
  • Subscriptions;
  • Conversion.

The following Activity dynamics visualize the same indicators on the chart. If needed, you can filter report data by date.

Analytics

Any Questions?
We’re always happy to help!
Discount services
Schedule a Call
Fill in the form, and our specialists will call you back as soon as possible.
Discount services
Chat Support
We’re waiting for your questions!
Discount services
Email
Contact the support team