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 Reteno, 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 the user's reading experience.
• Floating bar — floats as a full-width bar without disturbing the user's reading experience.

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

1.4. Click Next.

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

Use the editor tools to customize the widget's style and elements.

Basic Actions

The widget structure has three levels:

1. State.
2. Container (for some widget types).
3. Element.

When you right-click a 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. Move to container.

Top Panel

The top panel contains buttons with the following functions:

1. Switch between the desktop and mobile versions.
2. Undo/Redo.
3. Multilanguage settings:

• The widget appearance is configured only for the default-language version and then applied automatically to other language versions.
• In other language versions, you can change only the text.
• The form is displayed in the site's language, determined by the lang attribute in the html tag. If the page code does not contain this attribute, the widget uses the visitor's browser language.

4. Widget preview.
5. Close without saving.
6. Save.

Left Panel

The left panel contains the widget components. The editor works as a drag-and-drop builder: select an element and drag it to the required position in the widget.

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

Right Panel

When no widget element is selected, the right panel displays design settings that 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 include:

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

Editing Widget Elements

Select an element to edit it.

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 settings, select the image. You can upload an image, choose one from the library of free photos and icons, or enter an external URL. An external URL keeps the referenced image current, for example, for changing promotions or products.

In addition to the standard settings on the Content tab, the following positioning options are available:

• Fill
• Fit
• Fit to image

Slider Settings

Drag the slider from the left panel into the widget template. The Set up slider and Manage slides buttons appear on the right panel.

• Configure navigation buttons, indicators, slideshow animation, and the overall slider design in the Slider setup window.

• Manage the slide order and add, duplicate, or rename slides in the Manage slides window.

You can also add a slide by clicking +.

To replace or edit an image, select it in the template. It appears on the right panel. Select the image thumbnail on the panel to open the image window.

Use the navigation buttons to switch between slider 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

Select a widget element to open the General tab with the following 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 Reteno, 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 covers the entire screen until the user confirms their age, so this widget has no placement settings.
2. The launcher position is configured in the appearance editor.
3. To specify the position of a subscription form or informer, enter the CSS selector of the element where the widget should be placed. This tab appears after you configure the appearance and click Save.

4. Select where to add the widget relative to the matching 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, enable Add placement later.

5. Click Done. Initially, the form is visible only to you. Use the Parameters tab to make it public.
6. Create additional placements as needed.

Widget Parameters

On the Parameters tab, you can:

1. Edit the widget appearance.
2. Edit the placement of the form or informer.
3. Configure widget calling rules.
4. Configure actions after the user submits the form or clicks the launcher.
5. Enable or disable widget revenue calculation (learn more).

Publishing a Widget

1. After saving the settings, check how visitors will see the widget on your website. Click Test widget.

2. Enter your website URL and click Open.

3. If the settings are correct, the widget appears on your website according to the configured rules.

4. After testing, publish the widget by selecting Published, then click Save.

Select Unpublished and save the changes to stop displaying the widget.

You can also configure a display schedule by clicking the calendar icon.

The schedule includes:

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

Widget statuses appear in the widget list and details:

• Published — the widget is published and its scheduled period is active or not configured
• Unpublished
• Scheduled — the publication period starts in the future
• Expired — the publication period has ended

Widget Integrations

On the Integrations tab, you can configure the transfer of widget interactions and custom events to Google Analytics. The integration is compatible only with the Universal Analytics script installed directly on the website.

Learn more about exporting data to Google Analytics >

Further settings include:

• Widget calling rules
• Actions after form submission