Login

Security and Compliance

Integration

Website Integration

Setting Up Widgets for Your Site

Place different widget types on your site to improve visitor interaction and collect more contact data. 

Widget Types

We provide 4 widget types:

1. Subscription forms – widgets for collecting contact data: email, phone, name.

Subscription forms

2. Informers – clickable widgets to inform site visitors about promotions, discounts, new arrivals, upcoming events, and increase their involvement in social media.

Informers

3. Launchers – call buttons on web pages that allow visitors to subscribe at a convenient moment.

Launchers

4. Age gate – a widget that overlaps the main site content until the visitor confirms age.

Age gate

Note

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

 Get script

After installing the script, proceed to the widget creation. The listed website elements have similar settings and differ in minor nuances in preparation.

Select the widget type from the left menu or the drop-down list.

Widget creation

Appearance

Start widget creation with initial settings.

1. Name / Type and fields

1.1. Fill in the Name field. The name is used for search within the system. Users won't see it.

1.2. For subscription forms and informers, select the type from the available options:

  • Inline — embedded into any element of the webpage

  • Pop Up — appears on top of other elements and disables the background. When open, it prevents page scrolling.

  • Floating box — floats on top of other elements in the corner of the webpage or as a full-width bar without disturbing users’ reading experience.

  • Floating bar — floats as a full-width bar without disturbing users’ reading experience.

 Subscription forms options

1.3. For subscription forms, activate the widget’s input fields. 

1.4. Click the Next button.

Input fields

2. Style (skipped for launchers)

2.1. To create a widget based on your website style, select colours and style. The system will generate a widget based on your settings.

Colours and style

2.2. Click Next.

3. Select appearance

Select the appearance style for the element. Each widget type has different options.

Appearance style

Note

Select the most appropriate option. You’ll be able to edit it as needed.

Widget editor

You have various tools to customize the widget’s style and elements.

Basic actions

The widget structure has 3 levels:

  1. State.

  2. Container (for some types of widgets).

  3. Element.

 Widget structure

When you click the right mouse button on the widget element, the following basic actions become available:

Basic actions

1. Copy

2. Duplicate

3. Cut

4. Delete

5. Put behind all floating elements

6. Put in front of all floating images

7. To container

Top panel

The top panel menu contains buttons with the following functions:

Top panel menu

  1. Undo/Redo.

  2. Multilanguage settings:

  • Form appearance is set up only in the version with the default language. Then it's automatically applied to other language versions.
  • In other language versions, you can only change the text.
  • The form is displayed in the site language, which is determined by the value of the lang attribute in the html tag. If the page code doesn't contain it, then by the browser language.
  • Switch to the desktop version.
  1. Switch to the mobile version.

  2. Widget preview.

  3. Close without saving.

  4. Save button.

Left panel

On the left side of the screen, you can find the components of the widget you are creating. The editor works as a drag-n-drop constructor. If you need to add any element, left-click on it and drag it to the appropriate place of the widget.

Left panel settings

Right panel

When you don't have any widget items selected, you will see design settings on the right side of the screen. These settings apply to the entire widget:

  • Align inner elements

  • Distance between elements

  • Size

 Right panel settings

  • Background

  • Stroke

  • Shadow

  • Round corners

  • Spacing inside component

  • Spacing around component

  • Breakpoint

 Right panel settings

+ launcher settings: 

  • Action on click

  • Entry animation

  • Loop animation

Note

Settings marked with a lock icon sync parameters across pages. You can change the synchronization setting by clicking the icon and selecting the needed option.

Synchronization setting

Editing widget elements

If you want to edit individual widget elements, just click on the desired element.

Editing widget elements

Text settings

To edit text style, click on the widget element with some text. A panel with text settings options will appear on the editor's top.

Text settings

Note

By default, widgets use the font set on your site as the primary font.

 Image customization

To open image style settings, left-click on the image. Here you can upload your picture or choose a suitable one from the library of free photos and icons.

Note

Upload images in PNG, JPEG, SVG, GIF formats, up to 3 MB

 Image customization

In addition to the standard settings, positioning customization is also available for images:

  • Fill,

  • Fit,

  • Fit to image.

 Standard images settings

General tab

Click on the widget's element to see the General tab with such settings:

  • Action on click 

 Action on click

  • Contact fields validation

 Contact fields validation

  • Timer settings

 Timer settings

Widget Placement

1. The age gate takes the size of the screen and completely overlaps the pages of the site until the user confirms their age, so this widget has no placement settings.

2. The positioning of a launcher is configured in the appearance editing window.

3. To specify a positioning of a subscription form or informer, enter the CSS selector of the element you want to add a placement to. This tab appears after you have customized the widget's appearance and clicked the Save button.

Widget placement tab

4. Select where to add the widget relative to the found element:

  • Before the element

  • After the element

  • Inside the element, last

  • Inside the element, first

  • Replace element

Widget placement settings

If you are not ready to specify the widget placement, activate the Add placement later switch.

5. Click Done. Initially, the form will be visible only to you; on the Parameters tab, you can make it public.

 Widget Parameters

In the Parameters tab, you can:

  1. Edit the widget's appearance.

  2. Configure widget calling conditions.

  3. Edit the placement of the form or informer.

  4. Configure the actions after the user has subscribed or clicked on the launcher.

Widget calling

To set the widget display rules, click on the Edit button in the corresponding section of the Parameters tab:

Setting widget display rules

Here, you can choose the following conditions:

  • Display frequency

Display frequency

  • When to display / When to stop displaying

When to display

  • Hide for subscribed contacts

You can choose not to show your widget to the contacts, which already have the subscribed status. 

Note

The subscribed status is checked only for the contacts, which subscribed using their email. Other channels are not taken into account.

Enable the Hide for subscribed contacts slide button and select one of the options:

  • Subscribed from any widget
  • Subscribed from this widget

Hide for subscribed contacts

Our system identifies the subscription status of a contact on the basis of the contact ID. When a contact visits your site, the script sends a request to the system to check the subscription status. This request includes the contact ID, which is stored on the site as the result of the following events:

  • A contact subscribed using any or this particular widget. 
  • A contact clicked a link in an email message redirecting to the site where our script is installed. The contact ID is retrieved from the URL’s UTM tags. 
  • A contact subscribed from the web push notification.

You can select the Subscribed from any widget option for general subscription types, for example, weekly digests. In this case, if a contact has already signed up using any widget or channel, this widget will not be displayed.

If you select the Subscribed from this widget option, the widget will not be displayed only in case the contact has already subscribed using this widget.

Note

If a contact has any status other than Active contacts, the widget will be shown to that contact when the Hide for subscribed contacts condition is enabled.

  • To whom

To whom

  • On pages

On pages

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

  • In countries

In countries

  • On clicking an HTML element

On clicking an HTML element

  • API based: 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. Copy the JS function below to show the widget on some extra condition.

API based

Note

When controlling a widget display using API, control through other conditions is unavailable

Actions after subscription

1. Select the segments to add contacts to.

Adding contacts

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

Subscription confirmation

3. Select confirmation email.

Confirmation email

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

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

Subscription confirmation

When choosing the Verified domain URL, in the URL field, enter only URLs in the verified domain address of your company and its subdomains.

Verified domain URL

If you don’t have verified domains, click the Verify domain button.

Verifying domain

More details about verifying domain >

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

5. Enable onboarding.

Redirecting users

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.

Widget Posting on the Website

  1. Having saved all the settings, check how visitors will see the widget on the site. To do this, click on the Test widget button.

Test widget

  1. Enter the link to your website and click Open.

Enter the link

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

Widget display on the site

  1. After testing the form, publish it by clicking on the Published button, then click Save.

Publishing a form

Click the Unpublished button to stop displaying the form, then save the changes.

Widget Integrations

In the Integration tab, you can configure sending widget actions and custom events to Google Analytics. Note that integration is only compatible with Universal analytics script, set directly on the website.

Learn more about exporting data to Google Analytics >

Widget integrations

Widget Analytics

To see the statistics, go to the Site → Widgets tab and click on the name of the widget you are interested in.

Widget analytics

Widget statuses are displayed in the general list and in widget details:

  • Published - for published widgets with a current or no scheduled period
  • Unpublished 
  • Scheduled - the publication period is planned for the future
  • Expired - the publication period has expired

 

Statistics such as views, subscriptions, and conversions are updated once per minute. The information is presented in graphs to track the widget's effectiveness over a certain period easily.

Widget graphic information

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