Setting Up Widgets for Your Site

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

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 (available after creating your first widget), and specify your site's domain.

More about getting and installing web tracking script >

• If you load the script with a delay instead of immediately after the page loads, the display immediately condition won't trigger on the actual page load — it fires only once the delayed script initializes. Other display conditions are not affected.
• Widget form content is visible to and can be indexed by search engine crawlers like Googlebot.

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 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.

Select the most appropriate option. You can edit it as needed later.

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. Device selection and canvas zoom.
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 language: first the lang attribute in the html tag is used, then the language code in the page URL, and if neither is present, the visitor's browser language.

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

Device and Zoom

The canvas matches the screen size of the selected device, so you can see the actual size of the widget on desktop and mobile screens. This is especially useful for Fullscreen widgets, Floating bar widgets, and large popups.

To change the device, click its name on the top panel and select one from the list:

• Desktop: Small Laptop (1366×768), Standard Laptop (1440×900), Desktop (1920×1080), Large Desktop (2560×1440), Ultrawide (2560×1080).
• Mobile: Android (360×800), iPhone SE (375×667), iPhone 16 (393×852), Pixel 9 (412×915), iPhone 17 Pro Max (440×956), iPad (768×1024).

To switch to the mobile version quickly, click the phone icon next to the device name.

To change the canvas zoom, open the list next to the device and select:

• Zoom in (Ctrl + +) or Zoom out (Ctrl + −);
• Fit to screen (Ctrl + 0) to fit the device screen into the editor window;
• a zoom level from 25% to 400%.

You can also zoom by holding Ctrl and scrolling the mouse wheel, or with the touchpad.

When a widget is taller than the device screen, the canvas grows to the widget's full height, so you can scroll to any part of it and edit it. The height follows the same rules as on the site:

• for a popup — the limit of 90% of the screen height, the close button, and the popup position;
• for a floating box — its position at the top, bottom, or center, the offset, the close button, and the branding;
• for an inline widget — the floating images around it.

Each widget page has its own height, and the zoom is shared by all pages. Fit to screen fits the device screen, not the extended canvas, so the zoom stays the same as the widget grows.

While the canvas is taller than the device screen, a dashed line crosses it at the screen height with a caption such as Small Laptop · 768. Everything above the line is what a visitor sees without scrolling. The line hides while you drag a component, so it doesn't get mixed up with the drop marker.

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

Settings marked with a lock icon synchronize parameters across pages. Click the icon to change the synchronization option.

Editing Widget Elements

Select an element to edit it.

You can resize a component right in the editor. Select it and drag a corner to change the width and the height together and keep the proportions, or drag the middle of a side to change one dimension. The current size in pixels is shown while you drag. For exact values, use the Fixed width and Fixed height fields in the Size section of the Style tab.

Text Settings

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

By default, text has the same formatting in the desktop and mobile versions of a widget. To make the text look different on mobile devices:

1. Switch to the mobile version: on the top panel, click the phone icon or select a mobile device from the list.
2. Select the text element.

3. Change the required properties, such as the font size or text color.

After you change that property no longer follows changes made in the desktop version.

To restore the desktop formatting for the changed properties, click Reset. These properties will synchronize with the desktop version again.

If text in an existing widget was configured differently for desktop and mobile devices, the editor displays the Different style on mobile notification.

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.

• By default, widgets use the primary font set on your website.
• If this automatic detection doesn't pick up the correct font, you can set it manually: right-click the text on your site and select Inspect to open the browser's developer tools, filter the Styles panel for font-family, copy the value of the active (non-crossed-out) declaration, and paste it into the widget's Title font or Text font field. The pasted value applies to all widget text using the corresponding font option.
• The widget only loads Google Fonts that are actually used in the widget's content — fonts referenced in unused styles or classes are not loaded.
• The Text roller element animates scrolling text, helping attract attention and display more information in a compact format.
• Merge Tags personalize widget text with website data.

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.

Upload images in PNG, JPEG, SVG, or GIF format, up to 3 MB.

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

• Fill
• Fit
• Fit to image

You can edit an image directly in the editor during upload if it does not meet the requirements, or after upload by clicking Edit. After editing, the image is saved in PNG format.

For a custom-designed Informer built around a full background image, a wide desktop image may get cropped or hard to read once it's resized for mobile. To use a different image on mobile, switch to the mobile view in the top panel, click the lock icon next to the Background setting, select Do not sync, and upload a separate image — the desktop and mobile versions will then use different images without affecting each other. Square or vertical images usually adapt best to both screen sizes.

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.

Countdown Timer

Drag Countdown timer from the left panel into the widget template. Its settings open on the right panel.

The Countdown section shows when the offer ends. Click the edit icon to open the Countdown timer panel and choose how the time is counted.

For each visitor is a personal countdown that starts when the visitor first sees the widget. In Time to claim the offer, pick one of the preset values from 5 minutes to 24 hours, or select Other and enter your own time in days, hours, minutes and seconds. When time is up sets what happens next:

• Show again on the next visit — with a fresh countdown. A visit ends after 30 minutes without activity.
• Show again after a pause.
• Don't show again.

On a date is the same deadline for everyone. Enter the date and time in Ends on and pick the Time zone. The default is Each visitor's local time, so the offer ends at that hour by each visitor's own clock. After the deadline the widget stops showing. An end date that has already passed blocks publishing.

In the Digits section, choose the format: Days, hours, minutes, seconds, Hours, minutes, seconds, Minutes and seconds or Only seconds. The Unit names under the digits switch shows or hides the captions under the numbers.

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.

The close button can't be fully hidden on standard widgets — this is intentional, so visitors always keep control over closing the widget.

General Tab

Select a widget element to open the General tab with the following settings:

• Action on click

For a button in a widget with any game component, the game start action (Run the game) is available. For details, see Running the Game with a Button.

Moving Between Widget Pages

In a multi-page widget, a button can send the visitor to another page, so the path through the widget can depend on what the visitor does — for example, a bigger discount after they decline the first offer.

The action name shows the button's role in that path: on intermediate pages it is Next page, and on the step where the form data is actually sent it is Submit form.

To send the visitor to a particular page, select the Open widget page action and choose the page in the Page field. The Require fields toggle next to it controls whether the form is validated before the transition — leave it on to require the fields to be filled in, or turn it off to let the visitor continue without completing them.

Configuring Clicks as Target Actions

In an Informer, you can enable the Count as a target action option for the Open URL click action. This option determines which clicks are included in the conversion rate calculation:

• if the option is not enabled for any action — all tracked clicks;
• if the option is enabled for at least one action — only clicks associated with those actions.

For example, if clicking the Go shopping button is the expected action, enable this option for the button.

For Subscription forms, the system automatically counts form submission as a target action.

You can view the results in the Widget Report.

• Contact field placeholder, validation, and prefill

For the Email field, enable the Do not accept public email domains validation option to reject addresses from providers like Gmail, Yahoo, or Hotmail and collect only business email addresses.

Prefilling Form Fields

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

• Static field — a fixed value from the field settings, the same for every visitor;
• 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

  A click on the video starts playback, so the link is set on the container the video sits in. The visitor goes to the page by clicking the container next to the video — its free area around the player.

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.

In a game widget, the result page can depend on the reward won — for example, a discount opens a promo code page, while a gift opens a redemption terms page. Select the page in each reward's settings. Only pages placed after the game page are available; the next page in order opens by default. For details, see Reward Result Pages.

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.

• Multi-step forms are available in all widget types except launchers.
• A widget can contain only one game component.
• You can add the Email, Phone, First Name, and Last Name fields on different pages of a widget, but not twice on the same page: the editor won't let you publish such a widget. For example, in an NPS survey promoters, neutral users, and detractors see different pages, and the Email field is needed on each of them.
• Only one value is stored per contact field: if the same field is filled in more than once, the last non-empty value is saved, and an empty field doesn't overwrite a value that is already there.
• Fields on branches the visitor didn't follow don't block submission.
• When you first save a Subscription form or Request form in the Popup or Floating box format, Reteno suggests adding a Teaser if the widget does not have one. You can add it immediately or save the widget without it.
• The last page of a multi-step widget is the system Success page: in a widget that asks for an email, then a phone number, and then offers links, those offers go on the Success page.
• The maximum number of pages is 20.
• Partial data collection for abandoned forms is not available yet — it is pending backend work. Because of this, "the user filled in at least one field" can't currently be treated as a reliable indicator of a submission.

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

You can insert up to ten inline forms on one page, which is especially useful for long articles or landing pages.

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.

Testing through the Test widget button is not isolated from your database: a form submitted there creates a real contact, and with Double Opt-In on it also produces the SysContactConfirmationRequest event and the confirmation email.

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

An embedded widget takes the alignment of the element it is placed after, so a widget that looks off-centre is usually inheriting that from the site. The editor controls the widget's own styles only. To centre it, give the widget the full width of the parent container and centre the content inside the widget.

If the widget does not appear on the site, check the site Content Security Policy: a strict policy blocks the widget script. Contact support for the current list of domains to allow.