How to Set up Informers for Your Site

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

Installing the Script

Before starting to create informers, you have to install the eSputnik script on the website. 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.
   

5. Install the script on the website.

6. Click the Check status button to verify that your script works properly.

Creating New Informer

To create a new informer widget:

1. Go to Site → Forms → Informers and click the New informer button.

2. Type the informer name in the Name field, then select the informer type from the available options:

• Inline
• Modal
• Floating

3. Click the Next button.

4. Click the color bar and select the desired color from the dropdown palette for the following informer elements:

• Main button
• Main title
• Background

5. Select website style and click Next. The following styles are available:

• Smooth
• Minimalist
• Classic
• Decorative
• Modern

6. Scroll down and select the informer's appearance by clicking the Select button under the chosen one.

7. Click Save to save your informer with the default settings. To change them, see Editing Informer Parameters.

8. If you have chosen the Inline widget type, add a CSS selector to define its position. Unroll the How to find a CCS selector list to learn how to do that.

If you wish to specify the form placement later, activate the Add placement later slide button.

9. Click one of the five icons to choose a position for your informer, then click Done.

10. Click Done on the side panel to complete.

You can edit your informers at any time.

Editing Informer Parameters

To edit the parameters of your informer:

1. Go to Site → Forms and click Informers in the left menu.

2. Click the informer you want to edit.

You can edit the following parameters:

• Appearance
• Informer calling rules
• Placement

See below the available options for each of those parameters.

Editing Appearance

To edit the informer appearance parameters:

1. Click Edit in the Appearance section.

2. Make any changes to your informer appearance as described below in this chapter.

3. Click the Save/Publish button and select Save or Save and publish from the dropdown menu.

Operations with elements

To make any changes to the elements on your informer:

1. Point to an element to activate the element’s menu.

2. Point to the ellipsis icon.

3. Click the required icon:

• A. Move
• B. Duplicate
• C. Delete

Adding elements

To add an element to your informer:

1. Select the Content tab.
2. Drag the required element to your informer and drop it inside the informer in the desired position.

Setting up informer’s frame parameters

To set up the informer’s frame parameters:

1. Click the informer’s frame and select the Content tab.
2. Select the Desktop or Mobile tab in the right-side menu.
3. Modify any of the following parameters:
   • Size
   • Action on click
   • Align inner elements
   • Paddings
   • Margins
   • Background
   • Stroke
   • Shadow
   • Round corners
      
4. Click the lock icon and select the required synchronization. For each applied parameter, you can choose the following synchronization of its settings on pages:
   • For all. The applied settings are synchronized on all the pages (mobile and desktop).
   • For each in the desktop version/For each in the mobile version. The applied settings are synchronized on all the pages for the desktop or mobile version.
   • Do not sync. No synchronization.

Setting up Informer’s element parameters

To set up the informer’s element parameters:

1. Click the informer’s element and select the Content tab.
2. Select the Desktop or Mobile tab.
3. Modify any of the parameters displayed in the right-side menu.

Note: The parameters depend on the element’s type.

Editing layout

To edit the informer’s layout parameters:

1. Select the Layout tab in the right-side menu and expand the menu items.

2. In the Text style menu item, select the required parameters from the dropdown list for:

• Title font
• Text font

Point to More details to learn how to identify the font family.

3. In the Breakpoint menu item, type in the required value for the screen width.

Setting up general parameters

You can assign an on-click action for the following informer elements:

• Button
• Image
• Container

To set up an on-click action:

1. Click any of the listed above informer elements.
2. Select the General tab in the right menu.
3. Paste or type your URL in the Open URL field.
4. Activate the Open page in a new tab slide button if you wish the page to display in a new tab.

Top panel menu

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

• A. Undo/Redo
• B. Multilanguage settings
• C. Background color
• D. Desktop breakpoint preview
• E. Mobile breakpoint preview
• F. Form preview
• G. Close without saving
• H. Save/Publish

Editing Informer Calling

To edit the informer calling rules:

1. Click Edit in the By rules section.

2. Set the required parameters for the following form display conditions:
   • Display frequency
   • To whom
   • On pages
   • API
3. Click Save.

The applied rules are displayed in the By rules section.

Editing Placement

To edit the placement parameters:

1. Click Edit in the Placement section.

2. In the Placement edit menu, change the CSS selector following the instructions displayed when clicking How to find a CSS selector.

3. Click any of the non-highlighted icons to select another position for your informer.

4. Click Done.