Setting up Widgets for Your Site

With Reteno, you can add several elements to your site that can improve interaction with visitors.

1. Subscription forms – typical forms to collect information about a contact: email, phone, name.

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

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

4. Launchers – call buttons on web pages that allow visitors to subscribe at a convenient moment. Using this widget you can also remind those who haven't done it yet about the subscription.

The listed website elements have similar settings and differ in minor nuances in preparation. Let's take a closer look at the customisation process.

Installing the Script

To be able to publish any type of widget, you need to install our script on the site. To do that:

1. Go to Site → Forms.
2. Click the Get script button.

3. Enter your domain name.
4. Click Copy to clipboard on the sidebar to copy the script.

📘

Note

If you have the script already installed, click the Check status button to check that the script works properly.

5. Install the script on the website.
6. Click the Check status button to verify that your script works properly.

Creating New Widget

To create a new widget:

1. Go to Site → Forms and select the desired option from the menu on the left. You can also use the create widgets button and select the element you need in the drop-down list.

2. In the window that appears, type the widget name in the Name field. The name is used for search within the system. Users won't see it.
   For web forms and informers select the type from the available options:

• Inline
• Pop-up
• Floating box
• Floating bar

3. Click the Next button.

4. Select the general appearance settings.

4.1 To create a form, informer or age gate based on your website style, сlick the color bar and select the desired color from the dropdown palette for the following informer elements:

• Main button
• Main title
• Background

4.2 Select website style. The following styles are available:

• Smooth
• Minimalist
• Classic
• Decorative
• Modern

These 2 steps are skipped for a launcher.

4.3 Select the appearance style for the element. Each widget type has its own options.

📘

Note

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

Editing Appearance

In the appearance settings window, you have various tools to customize the style of the entire widget and its individual elements. Conventionally, the widget can be divided into several levels:

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

When you click the left mouse button on the widget component, the following basic actions become available:

1. Go up to the parental element.
2. Set of functions to work with the clipboard: copy, duplicate, сut, paste, paste to replace.
3. Changing the width and height.

📘

Note

This option will only work if Fixed Width/Fixed Height is selected in the Content tab.

4. Move button.
5. Delete button.
   For detailed customization of the widget and its elements, use the tools described below.

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.

Right Settings Panel

When you don't have any widget items selected, there will be a panel on the right side of the screen with two tabs: Text Style and Breakpoint. These settings apply to the entire widget.

Text Style Tab

By default, widgets use the font set on your site as the primary font. If you want to set a different font, you should specify its name on the appropriate line, separately for the title and text.

Here you can also find a hint on how to find out the name of the font you need:

Breakpoint Tab

Specify in this tab the screen width from which the form is displayed in the mobile version. The default value is less than 576 pixels. In this case, in preview mode, you will see how all elements and text of the widget will look on a display with a width of 320 pixels – the smallest possible mobile screen.

If you want to work on individual widget elements, just click on the desired element and choose Content → Mobile from the tab on the right.

Layout Tab

By left-clicking on a particular widget element, you will find the text style and breakpoint value settings for it in the Layout tab of the tab.

The exception is the Launcher. It has additional settings in the Layout tab. For this widget here you can also choose:

• positioning;
• entry animation;
• loop animation.

Content Tab

Here you can edit the particular structural parts of a widget. 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.

The Content tab has the following settings common to different elements:

• select the width and height of the item;
• align elements inside it;
• set paddings and margins;
• set background as color or as an image;
• customize stroke and shadow;
• round corners.

📘

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.

In addition, the contents of this tab can change depending on which widget component you clicked on.

General Tab

In this tab you can assign the following on-click actions:

1. Open URL and Close Widget – for forms, informers and age gate.

To set up an on-click action:

• Paste or type your URL in the Open URL field.
• Activate the Open page in a new tab slide button if you wish the page to display in a new tab.

2. Open widget page – for forms (Success, Already subscribed, Error) and age gate (Insufficient age). You can customize the appearance of these pages below the main widget settings window by scrolling down the page.

3. Submit form – for forms.
4. Launch the widget – for launchers.

Widget Elements Customization

Text Appearance

Click on any text to customize its style. On the panel that appears at the top of the screen you can set the following options:

• font;
• font weight;
• font size;
• font color;
• align the text left/right or center;
• line spacing;
• add a shadow to the letters.

You can also create, edit, and delete different text styles, which will reduce the time you spend customizing other elements in the widget.

Image Customization

The image style settings are in the Content tab. To open this menu, left-click on the image. Here you can upload your own picture or choose a suitable one from the library of free images.

Tweak it to your liking. In addition to the standard settings of the Content tab, positioning customization is also available for images:

• Fill,
• Fit,
• Fit to image.

Button Style

When working with the Call-To-Action button, use the top panel to adjust the text style and the Content menu on the right to customize the element.

You can customize the hover effect – how the button changes when the user hovers over it. The following parameters can be changed when hovering:

• text and background color;
• stroke;
• shadow.

Contact Fields in the Forms

The email, phone number and name fields in the forms are edited similarly to other widget elements – using the top and right toolbars. Additionally you can customize:

• display titles;
• tooltip text inside the field;
• required fields to be filled out;
• for the field with a phone number – the default country code.
  Forms automatically report an error if the user enters incorrect data in the contact fields.

Top Panel Menu

The top panel menu contains the buttons with the following functions:

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.

3. Background color. It isn’t applied to the widget. Use it to see how the widget will look on the web page with the selected background color.
4. Desktop breakpoint preview.
5. Mobile breakpoint preview.
6. Widget preview.
7. Close without saving.
8. Save/Publish. If you select Save, the new changes will be saved but not published. To publish click Save and publish, close editor and activate Visible to website visitors mode.

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. Positioning of a launcher is configured in the appearance editing window, in the Layout tab.
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 appearance of the widget and clicked the save button.

4. Select the place 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 page you will be able to make it public.

Widget Parameters

In the Parameters tab you can:

1. Change the widget name.
2. Go back to editing the widget's appearance.
3. Configure the display conditions.
4. Edit the placement of the form or informer.
5. Configure the actions after the user has subscribed the form or clicked on the launcher.

Display Conditions

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

Here you can choose the following conditions:

• Display frequency;

• When;

• To whom;

• On pages;

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

• Display managing via 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.

Actions after Subscription

1. Select the segments to add contacts to.

You can add either only new or all contacts.

Also contacts can be saved to your account without adding to segments.

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

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

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

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

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

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 View on page button.

2. Enter the link to your website and click View on page.

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 Visible to website visitors button, then click Save.

To stop displaying the form, click on the Visible only to you button, then save 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 Analytics

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

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