Сourses

Courses

Security and Compliance

GDPR Compliance

Integration

Website integration

How to Set Up Floating Box Widget for Your Website

Floating box floats on top of other elements in the corner of the webpage or as a full-width bar without disturbing users’ reading experience.

Widget creation

1. Go to Site -> Widgets and click the New subscription form button.

New subscription form

2. Name the widget and select Floating box type. Activate switchers for input fields to insert into the widget. Click the Next button.

Floating box

3. To create a widget based on your website style, select colors of the following website elements:

  • Main button
  • Main title
  • Background

Select colors

4. Select form style: 

  • Smooth
  • Minimalist
  • Classic
  • Decorative
  • Modern

Select form style

5. Click on the Next button.

6. Select the most appropriate widget appearance. You’ll be able to edit it as needed.

Widget appearance variants

Widget settings

Let’s consider the main features of 3 settings panels in the drag and drop editor: left, top and right.

Left settings panel

Drag basic form elements from the left panel and drop them into your widget template.

Basic form elements

Top settings panel

At the top are the following buttons to work with form elements:

  • Copy
  • Duplicate
  • Cut
  • Paste
  • Paste to replace

Top settings panel

By clicking on the pointing up arrow you go to the parent form element:

To parent form element

By clicking on the element with a text, text editing tools appear on the top:

Text editing tools

Right settings panel

Layout, Content, and General settings for mobile and desktop devices are placed on the right panel.

Layout, Content, and General settings

Layout tab

  • Positioning — bottom left or right; offsets.

Positioning

  • Close icon settings.

Close icon settings

  • Text style settings — by default, the widget will use the font set on the website as the main one; to use a different font for the website, enter its name.
  • Breakpoint — specify the screen width, starting from which the display of the form switches to the mobile version; by default, this is less than 576 pixels.

Content tab

Set form appearance here: width and height, the distance between elements, paddings, margins, background, etc.

Content tab

General tab

Select action on click:

  • Submit form
  • Open URL
  • Close widget
  • Open widget page

After saving settings, you’ll be redirected to the Form parameters tab.

Form parameters

Edit widget appearance, widget calling rules, and actions after subscription on this tab.

Widget calling parameters

Select widget calling parameters on the appropriate panel: by rules or by clicking the launcher.

Widget calling parameters

Widget calling by rules

To configure the pop-up calling by rules, click the Edit button.

Edit the Widget calling parameters

Set up:

  • Display frequency;

Display frequency

  • When to display widget;

When to display

  • To whom to display widget;

To whom

  • On which pages to display widget;

Condition cards for pages

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

  • You can manage the form display using the 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.

Conditions for displaying the widget

Widget calling by clicking on launcher regardless of the widget display conditions

Activate this feature so that the widget is called by clicking the launcher regardless of the widget display conditions.

By click on launcher

Actions after subscription

  1. Select the segments to add contacts to.

Saving contacts to segments

You can add either only new or all contacts.

Adding only new contacts

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

Set up a subscription confirmation

  1. Select confirmation email.

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.

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

Redirect page

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

  1. Enable onboarding.

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.

Testing a widget

Having saved all the settings, test how the visitors will see the widget on the site. To do this, click the Test widget button.

Test widget

Enter the link to your website and click Open.

Enter the page URL

If all steps are successful, the pop-up displays on your website according to the specified conditions.

After testing the form, publish it by clicking the Published button, then click Save.

Widget publishing

To stop displaying the form, click the Unpublished button, then Save.

Widget unpublishing

To set up the start and end dates for displaying a widget: 

  1. Click the Schedule button.
    Schedule button
  2. In the right-hand side menu, enable the slide buttons for the start and the end dates, enter the time, select the start and the end dates in the corresponding calendars.
  3. Click Done.

 

Analyzing the widget performance

Go to Site → Widgets → Particular form → Analytics to see the statistics on your form:

  • Views;
  • Subscriptions;
  • Conversion.

The following Activity dynamics visualize the same indicators on the chart. You can filter the report data by selecting the analytics period from the list on the right-hand side.

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