Setting up Widgets for Your Site

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

After installing the script, proceed to widget creation. All widget types have similar settings.

To personalize widgets, use Merge Tags or prefill form fields with contact data from eSputnik, URL query parameters, JavaScript variables, Local storage, cookies, or Data layer events. In multi-step widgets, add branches to direct users to different pages based on their responses.

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

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
• Popup — 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. 

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

1.4. Click the Next button.

2. Style (Skipped for Launchers)

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

2.2. Click Next.

3. Select Appearance

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

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.

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

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:

1. Switch to the desktop/mobile version.
2. Undo/Redo
3. 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.
4. Widget preview.
5. Close without saving.
6. 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.

The NPS/Rating and gamified components described in the separate articles.

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

• Background
• Stroke
• Shadow
• Round corners
• Spacing inside component
• Spacing around component
• Breakpoint

Launcher settings: 

• Action on click
• Positioning
• Entry animation
• Loop animation
• Z-Index

Editing Widget Elements

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

Text Settings

Select a text element to open its settings on the right panel.

To change the color of an individual word, phrase, or character, select the required fragment directly in the text element and choose a color from the inline formatting toolbar. The color is applied only to the selected fragment, not to the entire text element.

Image Customization

To open image style settings, left-click on the image. You can upload your picture, choose a suitable one from the library of free photos and icons, or enter the URL of the image you want to embed. External URL allows you to keep the referenced sources up-to-date. For example, promo actions or products on a site.

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

• Fill,
• Fit,
• Fit to image.

Slider Settings

Drag the slider from the left-side panel and drop it into the widget’s template. Set up slider and Manage slides buttons will appear on the right-side panel.

• Set up navigation buttons, indication, slideshow animation, and general slider’s design in the Slider setup window.

• Manage slides’ order, add, duplicate, or rename slides after clicking the Mange slides button.

Also, you can add a slide by clicking on the + sign.

To change or edit an image, click on it in the template, after which it will appear in the right settings panel. Clicking on the image from the slider in the settings panel opens the editing and editing window.

Use navigation buttons to switch between the slider’s images.

Close Button

Click the widget's close button to open its settings on the right panel: pick a more or less visible design, set the icon's color and opacity, adjust its size (particularly useful to make it easier to tap on mobile), and place it inside, centered on, or outside the widget's edge. A Custom tab lets you upload your own close icon instead of the default one.

General Tab

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

• Action on click 

• Contact field placeholder, validation, and prefill

Prefilling Form Fields

You can enable prefill for Email, Phone, First Name, Last Name, and text fields. Values can come from:

• Static field — a contact field in eSputnik, such as Email;
• URL query parameter;
• JavaScript variable;
• Local storage;
• Cookie;
• Data layer event.

Select the form field, enable prefill, and configure the selected source. If the system cannot find a value, the field displays its standard placeholder and remains available for manual input.

For details about the sources and their settings, see Using Website Data in Widgets.

• Video settings

Creating Multi-Step Widgets

A multi-step widget can split a long form across several pages or change the next step based on the user's response. This makes the form easier to complete and supports more complex experiences, including:

• quizzes with different outcomes;
• progressive discounts;
• NPS surveys with follow-up questions;
• forms where the next question, promo code, or CTA depends on the previous response.

To add a page to the widget, use:

• Add — to create a page based on the current one;
• the three-dot menu on an additional page — to duplicate, move, or delete it.

Configuring Branches

Branches open different widget pages depending on the user's response.

1. Add all pages that may appear in the flow.
2. Select the component whose response determines the next step.
3. For each response option, select the page that should open next.
4. Configure the content of the final pages.
5. Test every branch in preview mode.

For example, in an NPS survey, a score from 0 to 6 can open a page asking why the user gave a low rating, while a score of 9 or 10 can open a request to leave a public review. For details about rating components, see NPS/Rating Widget Components.

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.

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

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.
6. Create additional placements as needed.

Widget Parameters

In the Parameters tab, you can:

1. Edit the widget's appearance.
2. Edit the placement of the form or informer.
3. Configure widget calling conditions.
4. Configure the actions after the user has subscribed or clicked on the launcher.
5. Activate or deactivate the calculation of the revenue from the widget (the settings are described in the instructions).

Publishing a Widget

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

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

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

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

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

Also, you can specify the widget’s schedule by clicking on the calendar icon.

The schedule includes the following settings:

• Start and end dates
• Custom days and time
• User timezone

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

Widget Integrations

On the Integrations 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 >

Further settings include:

• Widget calling rules
• Actions after subscription