Сourses

Courses

Security and Compliance

GDPR Compliance

Integration

Website integration

Creating a Widget Launcher

Increase the widget conversion by adding its launcher to your website pages.

Allow visitors to subscribe at a convenient time and remind to join your community those who haven’t done it yet.

Launcher example on the InWear site

Note!

For the widget to work on your site, you need to install the eSputnik script. To get it, go Site → Widgets and click Get Script. Next, specify your site domain and add the script to the site code before the closing body tag. The script must be installed on all pages.

Creating a button

1. Go to Site → Widgets → Launchers tab, and click the New launcher button.

New launcher

2. Name the launcher.

Name

3. Select the most appropriate launcher appearance. You can edit it later.

Select appearance

Content

To edit the launcher settings,

1. Click the launcher. The settings menu for its layout and content open in the right-hand side pane. 

2. In the Content tab, enable or disable the Display on desktop toggle button and configure the launcher's settings in Size, Positioning, Paddings, Margins, and Round corners menu sections.

Content Tab Menu

3. Select the launcher design by setting the background, stroke width and color, and shadow color.

Launcher design

4. Set the launcher shape: leave it square or make it round.

Launcher shape

5. Configure mobile settings.

Mobile settings

Layout

1. Set the launcher positioning and offsets in the Layout tab.

Launcher positioning

2. On the Text style tab, you can specify a font family.

Text style

3. On the Breakpoint tab, set the screen width, starting from which the widget display is rebuilt to the mobile version. The default value is less than 576 pixels.

Breakpoint

4. In the Entry animation tab, select the effect with which the launcher will appear.

Entry animation

5. In Loop animation, you can select an animation for the launcher, for example,its pulsation.

Loop animation

Loop animation example:

Pulse animation

6. Configure mobile layout settings.

Mobile layout settings

General

In the General tab, select the action that is triggered by clicking on the launcher and the widget that you want to link to it.

General tab

Top settings panel

Top settings panel

1. The Back and Forward arrows allow you to undo or redo the changes made to the launcher.

2. Multilanguage settings.

  • widget appearance settings are performed only for the main language, from where they are automatically copied to all other language versions;
  • in language versions, only the text can be changed;
  • the widget is displayed in the language of the site, which is determined by the value of the lang attribute in the HTML tag; if it's not there, by browser language.

3. The background color of the launcher helps you to check how the button will appear on the real background.

4. Buttons for switching to the mobile or desktop version of the widget.

5. Widget preview.

6. Close without saving.

7. Save.

Launcher parameters

There are three types of launcher parameters:

  • Appearance.
  • Display conditions.
  • Widget will be displayed by click.

Launcher parameters

1. We have already considered the appearance. Let's look at the Display conditions. To do this, click the Edit button.

Display conditions

Display conditions settings:

  • Display frequency;

Display frequency

  • When to display launcher;

“When” condition

  • To whom to display launcher;

“To whom” condition

  • Pages on which the widget will be shown: add or exclude unnecessary;

“On pages” condition

  • Controlling the display of the widget using the API: by clicking on the page element or using JavaScript. If you want to use a custom launcher, insert a CSS selector of the call element. To show the widget under some additional conditions copy the JavaScript code below.

Conditions for displaying the widget

2. Select the widget that will be displayed by clicking the launcher. To do this, click on the Select button.

Select the widget

3. Save the settings and check how the launcher will be displayed on the site. To do this, click the Test widget button, as the launcher is not visible by default.

4. Enter the link to the site and click the Open button.

Entering page URL

If all the settings are correct, the launcher displays on your site according to the specified conditions.

Launcher example

5.  To publish your widget after testing the launcher, click the Published button and click Save.

Widget Publishing

To stop showing the launcher, click the Unpublished button, then click Save.

Widget Unpublishing

6. In the Analytics tab, you can see the statistics of views and clicks.

Launcher analytics

7. In the launcher menu, it is possible to link the widget, show launcher preview, edit the launcher, and copy or delete it.

Launcher menu

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