Сourses

Courses

Security and Compliance

GDPR Compliance

Integration

Website integration

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 our script on the website. To do that:

  1. Go to Site → Widgets → Informers.

  2. Click the Get script button.
    Get script

  3. Enter your domain name.

  4. Click Copy to clipboard on the sidebar to copy the script.
    Copy script

Note:

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

Check website status

  1. Install the script on the website.

  2. 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 → Widgets → Informers and click the New informer button.

Create New Informer

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

  • Inline
  • Modal
  • Floating
  1. Click the Next button.

Selecting informer type

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

  • Main button
  • Main title
  • Background

Selecting informer style

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

  • Smooth
  • Minimalist
  • Classic
  • Decorative
  • Modern

Selecting website style

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

Selecting appearance

  1. Click Save/Publish and select Save from the dropdown list to save your informer with the default settings. To change them, see Editing Informer Parameters.

Saving Informer

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

Adding CSS selector

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

Add placement later button

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

Choosing informer position

  1. Click Done on the side panel to complete.

Informer created message

You can edit your informers at any time.

Editing Informer Parameters

To edit the parameters of your informer:

  1. Go to Site → Widgets and select Informers in the left-hand side menu.

  2. Click the informer you want to edit.

Selecting an informer 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.

Edit appearance

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

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

Saving changes

Operations with elements

To make any changes to the elements on your informer:

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

Activating element's menu

  1. Point to the ellipsis icon.

  2. Click the required icon:

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

Element's menu items

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.

Basic components

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.

Selecting Desktop/Mobile

Synchronization types

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.

Desktop/Mobile element parameters

Editing layout

To edit the informer’s layout parameters:

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

Layout configurations

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

Selecting text style

 

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

Choosing breakpoint

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.

Setting up on-click action

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

Top panel menu

Editing Informer Calling

To edit the informer calling rules:

  1. Click Edit in the By rules section.

Rules for informer calling

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

Note:

You can use either API or other conditions separately to customize your informers. See Display Conditions for more details.

The applied rules are displayed in the By rules section.

Applied rules

Editing Placement

To edit the placement parameters:

  1. Click Edit in the Placement section.

Editing informer placement

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

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

  3. Click Done.

Changing placement settings

Any Questions?
We’re always happy to help!
Request a Callback
Fill in the form, and our specialists will call you back as soon as possible.
Request a Callback
Chat Support
We’re waiting for your questions!
Send a Chat Message
Email
Contact the eSputnik support team
Send an Email