Widgets - List

  •  

📣 Promotional content widgets

 

Progress Bar

 

Introduction and use cases 

 

The Progress Bar widget enables you to let your visitors know how close they are to completing a task or to reaching a goal. It can be used in many ways:

 

  • On cart pages, a progress bar showing the amount needed to earn a gift, coupon, free shipping, etc.

    1.png2.png    3.png4.png

 

  • Word or character counter for a min. or max. expected number of characters (testimonials, feedback, etc.)

5.png6.png


  • Polls and surveys

7.png

  • Scroll progression on long scroll pages
  • Progression in the completion of a form
  • Funnel progression
  • Display stats more visually
  • Session duration (in "reverse mode", for example 30 mins. to finalize a booking or a ticket purchase)

 

All you need is:

  • A target quantity: the goal (it can be an integer (123) or a decimal (123.45) but cannot be 0 or a negative value) that requires typing/setting manually.
  • A variable: the current status of your goal (which is going to make the progress bar advance).

 

There are two ways to fetch the variable:

  • Select an element on the page which contains the value (preferably in its own <span>, <p>, <div>, etc., and the widget will parse and retrieve its value).
  • Write your JavaScript code (the sky is the limit! Collect a dataLayer variable, use browser listeners, set a timer, etc.).



Layout tab

8.png

 

The progress bar is only available for the "free placement" layout. It is not available for the modal, banner, or panel layouts.

 

We offer three different sub-layouts:

  • progress bar & text-integrated variable
  • progress bar, label & variable
  • progress bar

9.png

10.png 

11.png

 

Content tab

Depending on the sub-layout you choose in the layout tab, the content tab differs:

 

Customizable content regarding the chosen layout :

 

  • If you select: "progress bar & text-integrated variable"


12.png

 

  • If you select: "progress bar, label & variable"


13.png

 

  • If you select: "progress bar only"


14.png

 

Closable alert

 

15.png

 

One value per element

In order to properly parse the variable, the widget needs to use a single variable. This means that if you select a paragraph that contains two values, for instance, it will not work properly.

This is why you need to be careful when you select the element containing your variable: make sure it only contains one.

 

All value formats are welcome

You don't have to worry about the format of the value, or about having a colon or a comma as a decimal marker: if you use a very large number (i.e. 142,536,712.34), the widget will understand which is a separator and which is the decimal marker. If your element includes a currency or a special symbol or character, AB Tasty will recognize it.

AB Tasty covers almost all the international ways of writing prices, percentages, and numbers in general.

 

Variable

 

This is the most important part of setting up your Progress Bar widget.

By default, we have decided to set the variable value to 66. 

 

There are two ways of fetching the variable:

  • Select the element that contains the variable

Select the element on the page you want the variable to be applied to.

The element containing the variable must not contain several values (see above).

 

  • Return variable through custom JavaScript

To use the custom JS option properly, you must call a function called “update” and pass the new value as a parameter to update the widget.

By default, we provide an example of JavaScript code:


var counter = 0;

setInterval(function () {

if (counter > 90) {

counter = 0;

} else {

counter += 10;

}

update(counter);

}, 1000);


 

This JavaScript code fakes a progress bar that progresses by 10 every 1,000 ms. As the default target quantity is 100, it gives you a quick idea of how the progress bar will react to progress variations.

 

You can replace it with your own.

 

Here is another JavaScript code example for retrieving the scroll progression of the visitor on the page:

 

window.onscroll = function() {myFunction()};

function myFunction() {

var winScroll = document.body.scrollTop || document.documentElement.scrollTop;

var height = document.documentElement.scrollHeight - document.documentElement.clientHeight;

var scrolled = (winScroll / height) * 100;

update(scrolled);

}

 

Run the update() function whenever you need to update the progress bar.

 

Target quantity

 

By default, the target quantity is set to 100.

The minimum value is 1 and the maximum is 999,999,999,999.

You can use an integer or a decimal value with a period as a separator, but you cannot use 0 or a negative value.

 

16.gif

 

Display variable as

You can choose whether you want to display the variable as a value or as a percentage.

If you pick a value, it will be the exact value of the variable as your web app or the visitor defined it.

If you pick a percentage, it will be calculated based on the target quantity.
For example, if the target quantity is 1,765 and the variable is 419, it will display "23.74%". The widget rounds to the closest 100th.

 

17.gif

 

Display variable in relation to target quantity

You can choose whether you want to display the variable as the accumulated value (the variable value) or as the remaining value (subtraction of the target quantity value minus the variable value).

For example, select "remaining" if you are using the Progress Bar widget on a cart page and "accumulated" if you are using it for a character counter or a session duration.

 

For example:

  • with "remaining", if the target quantity is 1,765 and the variable is 419, it will display "76.26%".
  • with "accumulated", if the target quantity is 1,765 and the variable is 419, it will display "23.74%".

The widget rounds to the closest 100th.

18.gif

 

Create your own content with dynamic tags

Only for "Progress bar & text-integrated variable" sub-layout

Rephrase the default sentence as desired.

You can add extra HTML markup and add some CSS in order to add bold or color to a specific section of text.

 

19.gif

 

As an example, this is the CSS code needed to style the two pieces inside the customized sentence.

 

.varSubTot {
color: #66BB66 !important;
fill: #66BB66 !important;
-webkit-text-fill-color: #66BB66 !important;
font-weight: bold;
}

.freeShipping {
font-weight: bold;
}

 

The variable must be enclosed in exclamation marks like so: !variable!

If you want to display the variable as a percentage, the variable must be followed by a “%”. If you use it as a value, you should not forget to specify the unit, and currency (before or after the variable, depending on your locale).

 

Progress Bar label

Only for "Progress bar, label & variable" sub-layout

You can enter the legend of your progress bar. By default, the label is in bold.

The variable cannot be edited inside the widget form. You can add a symbol next to it in the editor.

 

20.gif

 

For example, inside the:

 

<dd class="abtasty_progress_value"></dd>

element of the variable, you can add a little <span> element containing the unit:

<span>US$</span>

 

Ended message

If you activate this option, you’ll be able to customize the message once the goal is reached: quantity, order amount, etc.

While the toggle is activated, you can fill in a static message such as “Congrats, shipping is now free!” or use dynamic tags to make it more dynamic (e.g.: “Congrats, your order comes to $234, the $9.99 shipping fee is on us!”).

 

21.png

 

Style tab

 

In the style tab, you will be able to define the size, color, borders, background, etc. of each element of the widget. Uncollapse each group and adapt the widget to your website color palette and style.

By default, the widget inherits its style from the font face to your website. However, you can override it with the 1,000 Google Fonts available.

Background can be set up with an image using the image-fitting policy 

4 options are provided:

  • "Cover": the image is resized keeping the aspect ratio to fill the background container even if, by doing this resize, the image may overflow the background container. 
  • "Contains": the image is resized keeping the aspect ratio so that the whole image is included in the  background container (no overflow)
  • "Fill": the image is resized to fill the background container without keeping the aspect ratio 
  • "None": the image is left unchanged.

 

There are progress bar widget styling specifics:

 

22.gif

 

Progress bar color

 

You can pick a color from your existing palette. Most of the time, we recommend using a variation of your main call-to-action color.

 

Progress bar background color

 

You can pick a color for the background of your progress bar (progress tracking). We recommend using a different color than the background color of the element it is contained in (to create a strong enough contrast). If you pick white on a white background, for instance, it won’t be visible.

 

Colorblind accessibility mode (Stripes)

 

The option is toggled by default. This enables you to make the progress bar slightly more accessible. Especially if your progress bar color and progress bar background color is close (not contrasted enough).

 

Stripes color

 

You can make the stripes any color you want. To guarantee accessibility and elegance, we recommend using white and lowering the opacity (however no lower than 60%) to make the progress bar color appear.

 

Progress bar height

 

You can give more or less height to the progress bar.
The default height is 8px and the maximum height is 50 px.

 

Progress bar radius

 

You can give more or less rounded corners to your progress bar. The default radius is 4px and the maximum radius is 30 px.

 

 

Conditions tab

 

Select the Triggering and Recurrence options you want to apply to this widget.

 

Banner

 

The Banner widget enables you to display a banner and possibly a button linking to a specific URL.

Images can be added as background images.

 

23.png23.1.png24.png



Layout tab

 

25.png

 

Layout

 

We offer three different layouts:

  • top banner
  • bottom banner (by default)
  • free placement (which allows you to place the widget wherever you want in the page flow)

Layouts are natively responsive.

 

Layer

 

Layer Position (z-index)

 

26.png

 

Suppose you've selected the "modal", "top banner" or "bottom banner" layout. In that case, you can define the position of the widget on the z-axis in order to manage the widget position: above everything, below everything, or precisely fine-tuned.

Please read the dedicated article on this topic: z-index article.

 

Content tab

 

27.png

 

Message (text or HTML)

 

As the "Banner" widget is mainly designed to contain text, you have to fill the text area in.

The text area supports multi-line messages. 

You can use HTML markup to add ordered or unordered lists. All the other styling aspects should be done through the Style tab. 

You can also add emojis.

 

Widget link type

 

You can decide whether your widget should contain a clickable button (to close or redirect), whether it should be entirely clickable (to close or redirect) or whether it should have no link at all.

 

  • "The button is a link": you will have to specify a button URL and a button text. The widget will display a button.
  • "A click on the button closes the widget": you will have to specify a button text. The widget will display a button. 
  • "The whole widget is a link": you will have to specify a URL. The widget will not display a button.
  • "A click on the whole widget closes the widget": you won't have anything to add. The widget will not display a button.
  • "None": the widget will not be clickable.

If you use a background image that looks like a "big ad", we recommend that you select "The whole widget is a link" and remove the paragraph with the editor once the widget is set.

 

Second CTA/link option

 

28.png

 

Toggle the “Add a second link” option to configure a second link/ CTA in your widget, the same way as the first one. 

 

Style tab

 

Select the style options (Text, Buttons, Container, Border, Close button) you want to apply to your widget and customize the banner.

Background can be set up with an image using the image-fitting policy 

4 options are provided:

  • "Cover": the image is resized keeping the aspect ratio to fill the background container even if, by doing this resize, the image may overflow the background container. 
  • "Contains": the image is resized keeping the aspect ratio so that the whole image is included in the  background container (no overflow)
  • "Fill": the image is resized to fill the background container without keeping the aspect ratio 
  • "None": the image is left unchanged.

 

Conditions tab

 

Select the Triggering and Recurrence options you want to apply to the Banner widget.

 

Countdown

 

29.1.png  29.2.png  30.png

31.png

   

The Countdown widget lets you display a countdown clock to create expectation, urgency, or near-scarcity.

This widget is useful for yearly recurring events such as Christmas, Thanksgiving, Halloween, Fashion Week, Black Friday, Valentine's Day, etc., as well as for your own events: product release, new feature, new collection, anniversary, special offer, live event, webinar, etc. and many other use cases.

 

Layout tab

 

32.png

 

We have four different layouts:

  • modal (pop-in)
  • top banner
  • bottom banner
  • free placement (which allows you to place the widget wherever you want in the page flow)

You can add an image in the modal layout only. 

 

33.png

34.png

35.png

36.png

 

Dimensions

 

37.png

Widget dimensions based on content
By default, the "Widget dimensions based on content" toggler is toggled. This saves you from having to worry about pop-in dimensions. If you upload a very large image, your pop-in will adapt accordingly based on the image (and text) ratio (length).

If you untoggle the toggler, you will be able to define both the width and the height of the pop-in. These can be configured (independently) in several dimensional units:

 

  • px (pixels)
  • % (percentage)
  • em (element, which means that it is based on the size of the text of the element: if your font size is 18 px, then 1 em = 18 px)
  • vw (1/100th of the window's (or viewport) width)
  • vh (1/100th of the window's (or viewport) height)
  • vmin (whichever is the smallest of vw or vh) 
  • vmax (whichever is the highest of vw or vh)

 

Depending on what you want to achieve and how responsive your pop-in needs to be, you may select one unit or another. If you're digging the dimensional units in CSS, we recommend reading this W3C article.

 

Preserve ratio (automatic height)

By default, the height toggler of the modal is toggled and set to "preserve ratio (automatic height)". This way, you don't have to set a height, it takes what the modal needs and can even reach 100% of the available height in the viewport. 

If you do define a height and your content is longer than the defined modal height, the modal will be scrollable so users can scroll down to read everything.

 

Known issue: the widget configuration form not overlapping the website

In the past, we've chosen to make the widget configuration form not overlap the website, especially for positioning a widget in a corner or on the left side. Therefore, the overall website width is "squeezed" in the editor. Now, once you've finished editing the pop-in dimensions and click on save or hide the widget configuration form, the modal is re-dimensioned to the available viewport/window's width.
We understand that defining the pop-in size without seeing the full-page rendering is tricky. When you dimension your pop-in, it will adapt to all window widths by showing/hiding the widget form or leaving the "Widget dimensions based on content" toggle toggled.

 

Layer

 

Layer Position (z-index)

 

38.png

 

Suppose you've selected "modal", "top banner" or "bottom banner" layout. In that case, you can define the position of the widget on the z-axis in order to manage the widget position: above everything, below everything, or precisely fine-tuned.

See this section to learn more about the z-index

 

Content tab

 

38.1.png

 

Content will end on

 

As this widget is a countdown, the first thing you will be asked to do is define an end date and time. You cannot use a past date/time.

By default, in order to show you a running countdown clock, we define the default end date/time based on the moment you create the countdown, incremented by 1 day, 1 hour and 2 minutes. So you should see 01 days, 01 hours, 01 minutes, 59 seconds, 58, 57, etc., counting down.

 

Timezone settings

 

For precision in date and in time management, you have to consider time zones and daylight saving times. In the "Time Zone Settings'' collapsible group, there are two main options to manage time zones with your countdown widget:

 

39.gif

 

"Follow the sun" option

 

This option is useful and should be toggled ON in the following situation: 

Your ecommerce website is based in France but your clients buy from all over the world. You want to end your countdown at midnight exactly for every time zone because this is the exact moment the Black Friday sale will officially start. 

So in this case, the countdown will end at 12am in Tokyo, 12am in Mumbai, 12am in Paris, 12am in Rio de Janeiro, all on the same day. It will take 24 hours to end all over the globe.

 

As a website visitor, depending on where you see the countdown widget from (depending on your time zone), you will not see the same remaining time. 

 

This option is not useful and should remain OFF in the following situations: 

Beginning of a big international event: Apple keynote, Olympic Games Opening Ceremony, elections results, etc.

For example, if you decide to end the countdown at 2pm in Paris, it will end at 2pm in Paris and at this exact moment in the whole world, whatever the local time is – so 8pm in Singapore, 8am in New York, 5am in San Francisco, etc.

 

40.png

 

As the user who sets up the countdown widget, you must define a time zone in the "Time zone to base end time on" dropdown. You can override (for the purpose/scope of this widget only) the time zone defined in your account settings.

 

Daylight Saving Time (DST)

 

If one of your visitors lives in a place where winter/summer daylight saving time is applied, you won't have to worry about this 1-hour delta if you schedule your countdown widget six months ahead.

 

Known issue for DST:

For spring or fall time switches in countries that do apply Daylight Saving Time (DST), there are two moments each year (dates vary depending on the country) when, in spring you go from 2am to 3am and in fall from 2am to 1am (or from 3am to 2am, depending on your location). These two hours don't really "exist". We cannot guarantee that this widget will work if you schedule its end at that precise moment.

 

Display an image

 

This feature is only available if you use the modal or the banners (top and bottom) layouts. 

 

41.gif

 

You can either drag and drop your image or click to browse your files and upload the image. 

AB Tasty supports the following formats: jpg, png, gif, svg, webp & avif and the maximum width is 2MB.

 

Message

 

The message is mandatory, you have to fill the text area in.

The text area supports multi-line messages, and you can add HTML markup if needed. We recommend setting all the styling aspects through the Style tab.

 

Select widget link type

 

You can decide whether your widget should contain a clickable button (to close or redirect), whether it should be entirely clickable (to close or redirect) or whether it should have no link at all.

If you pick:

  • "The button is a link": you will have to specify a button URL and a button text. The widget will display a button.
  • "A click on the button closes the widget": you will have to specify a button text. The widget will display a button. 
  • "The whole widget is a link": you will have to specify a URL. The widget will not display a button.
  • "A click on the whole widget closes the widget": you won't have anything to add. The widget will not display a button.
  • "None": the widget will not be clickable.

 

Second CTA/link option

 

42.png

 

If you toggle on the “Add a second link” option, you can configure a second link/ CTA in your widget, the same way as the first one. 

 

Customize legend

 

By default, the legend of the countdown is days, hours, minutes, and seconds for each 2-digit block, respectively. But you can customize it to adapt it to a specific language. Example with “Klingon”:

 

43.png

 

Important: the width of all the 2-digit blocks adapts to the largest block. In the example below, the seconds block stretches to accommodate the text.

 

44.png

 

When the countdown ends

 

You have five different options: 

  • Hide the whole widget: once the countdown has ended, the whole widget is removed. Nothing is shown any longer.
  • Hide the countdown and display a text: once the countdown has ended, the widget remains displayed but contains only text. You can define the text you want.
  • Display the countdown (00:00) and a text: once the countdown has ended, the widget remains and contains the ended countdown and text. You can define the text you want to show.
  • Hide the countdown, display a text and a button: once the countdown has ended, the widget remains displayed but there is only a text and a button in it. You can define the text, the button text and the URL you want.
  • Display the countdown (00:00), a text and a button: once the countdown has ended, the widget remains and contains the ended countdown, a text and a button. You can define the text, the button text and the URL you want.

 

Preview

If, in the content tab, in the "Once the countdown has ended" section, you've opted for any other option than "hide the widget", you will be able to preview the page as if the countdown has ended, to check the visual rendering.

By default, the selected option is "During the countdown" but you can select "Once the countdown has ended" in order to preview it.

45.gif

 

46.gif

 

Important

  • For the widgets with the modal layout and which include an image, it is no longer displayed once the countdown has ended.
  • If you add a button after the countdown has ended, we strongly advise you to offer an alternative for the visitors who just missed the opportunity. This can be a coupon code, a subscription to a newsletter to receive notifications, or a link to the event itself (live, webinar, etc.). Avoid "back to home page" links at all costs.

 

Style tab

 

Select the style options (Text, Buttons, Container, Border, Close button) you want to apply to your widget and customize the banner.

Background can be set up with an image using the image-fitting policy 

4 options are provided:

  • "Cover": the image is resized keeping the aspect ratio to fill the background container even if, by doing this resize, the image may overflow the background container. 
  • "Contains": the image is resized keeping the aspect ratio so that the whole image is included in the  background container (no overflow)
  • "Fill": the image is resized to fill the background container without keeping the aspect ratio 
  • "None": the image is left unchanged.

 

Conditions tab

 

Select the Triggering and Recurrence options you want to apply to the Promotional Banner widget.

 

Simple pop-in

 

47.png  48.png49.png

 

The Simple Pop-in widget lets you display a pop-in containing a text.
This widget can be useful if you want to catch your visitor’s attention on a specific piece of information, momentum or important message. It can be used for many different use cases. Maintenance operations, crisis communication, or even for seasonal greetings.

 

Layout tab

 

50.png

 

Dimensions

 

Widget dimensions based on content option

By default, the "Widget dimensions based on content" toggler is toggled. This saves you from having to worry about modals dimensions. If you upload a very large image as a background, your pop-in will adapt accordingly based on the text dimensions. Long text = Long pop-in.

 

If you untoggle the toggler, you will be able to define both the width and the height of the pop-in. These can be configured (independently) in several dimensional units:

  • px (pixels)
  • % (percentage)
  • em (element, which actually means that it is based on the size of the text of the element: if your font size is 18 px, then 1 em = 18 px)
  • vw (1/100th of the window's (or viewport) width)
  • vh (1/100th of the window's (or viewport) height)
  • vmin (whichever is the smallest of vw or vh) 
  • vmax (whichever is the highest of vw or vh)

51.gif


If you're digging the dimensional units in CSS, we recommend reading this W3C article, which is a good starting point.

 

Preserve ratio (automatic height)

By default, the height toggler of the modal is enabled and set to "Preserve ratio (automatic height)". This way, you don't have to set any height, it takes what the modal needs and can even reach 100% of the available height in the viewport. 

If you do define a height and your content is longer than the defined modal height, the modal will be scrollable so users can scroll in it to read everything.

 

Known issue: the widget configuration form not overlapping the website

In the past, we've chosen to make the widget configuration form not overlapping the website, especially if you want to position a widget in a corner or on the left side. Therefore the global website width is "squeezed" in the editor. Now, once you're finished editing the pop-in dimensions and click on save or hide the widget configuration form, the modal is re-dimensioned to the available viewport/window's width.
We understand that defining the pop-in size without seeing the full rendering of the page is tricky. When you dimension your pop-in it will adapt to all windows widths by showing/hiding the widget form or let the "Widget dimensions based on content" toggle toggled.

 

52.gif

 

Layer

 

Layer Position (z-index)

 

53.1.png

 

Suppose you've selected the "modal", "top banner" or "bottom banner" layout. In that case, you can define the position of the widget on the z-axis in order to manage the widget’s position: above everything, below everything, or precisely fine-tuned.

 

Please read the dedicated section on the z-index for more information.

 

Content tab

 

53.png
 

Title

 

You will be able to decide whether to display a title.

The maximum length is 255 characters.

 

Message

 

As the "Simple pop-in" widget is mainly designed to contain text, you have to fill the text area in.

The text area supports multi-lines messages. You can use HTML markup to add ordered or unordered lists. All the other styling aspects should be done through the "Style" tab.

 

Select widget link type

 

You can decide whether your widget should contain a clickable button (to close or redirect), whether it should be entirely clickable (to close or redirect) or whether it should have no link at all.

If you pick:

  • "The button is a link": you will have to specify a button URL and a button text. The widget will display a button.
  • "A click on the button closes the widget": you will have to specify a button text. The widget will display a button. 
  • "The whole widget is a link": you will have to specify a URL. The widget will not display a button.
  • "A click on the whole widget closes the widget": you won't have anything to add. The widget will not display a button.
  • "None": the widget will not be clickable.

 

Second CTA/link option

 

54.1.png

 

If you toggle on the “Add a second link” option, you can configure a second link/ CTA in your widget, the same way as the first one. 

 

Style tab

 

Select the style options (Text, Buttons, Container, Border, Close Button) you want to apply to your widget and customize the pop-in.

Background can be set up with an image using the image-fitting policy 

4 options are provided:

  • "Cover": the image is resized keeping the aspect ratio to fill the background container even if, by doing this resize, the image may overflow the background container. 
  • "Contains": the image is resized keeping the aspect ratio so that the whole image is included in the  background container (no overflow)
  • "Fill": the image is resized to fill the background container without keeping the aspect ratio 
  • "None": the image is left unchanged.

 

Simple Pop-in widget Styling Specificities:

 

Align text & button

 

In the "Text" collapsible group, in the "Style" tab, defining the alignment will impact both message and button.

54.gif

 

Conditions tab

 

Select the Triggering and Recurrence options you want to apply to the Promotional Banner widget.

 

Image pop-in 

 

55.png    56.png57.png

 

The Image Pop-in widget lets you display a pop-in containing an image.

 

This widget can be useful if you want to catch your visitor’s attention on a specific offer, give more details on a specific option, item, or accessory by clicking on a button/link on a product page, or before leaving a page/website in order to retain your visitor. It can also be used for special events.

 

Layout tab

 

58.png

 

Layout

 

We have five different layouts: four with text (image on the right, image on the left, image below, image above) and one without text (image only). By default, the "image only" layout contains a button, but you can remove it.

 

59.png

60.png

61.png

62.png

63.png

 

Image over text ratio

 

For the "image on the left" and "image on the right", you can choose the image over text ratio. By sliding the cursor on the axis, you can configure the image to take up 20% to 80% of the available width.

 

64.gif

 

Dimensions

 

Widget dimensions based on content

By default, the "Widget dimensions based on content" toggler is toggled. This saves you from having to worry about the modal’s dimensions. If you upload a very large image, your pop-in will adapt accordingly based on the image (and text) ratio (length).

 

Other options: 

If you untoggle the toggler, you will be able to define both the width and the height of the pop-in. 

 

These can be configured (independently) in several dimensional units:

  • px (pixels)
  • % (percentage)
  • em (element, which actually means that it is based on the size of the text in the element: if your font size is 18 px, then 1 em = 18 px)
  • vw (1/100th of the window's (or viewport) width)
  • vh (1/100th of the window's (or viewport) height)
  • vmin (whichever is the smallest of vw or vh) 
  • vmax (whichever is the highest of vw or vh)

 

Depending on what you want to achieve and how responsive your pop-in needs to be, you may select one unit or another.

 

65.gif

If you're digging the dimensional units in CSS, we strongly recommend reading this W3C article.

 

Preserve ratio (automatic height)

 

By default, the height toggler of the modal is enabled and set to "Preserve ratio (automatic height)". This way, you don't have to set a height, it takes what the modal needs and can even reach 100% of the available height in the viewport. 

If you do define a height and your content is longer than the defined modal height, the modal will be scrollable so users can scroll down to read everything.

 

Known issue: the widget configuration form not overlapping the website

Once you're finished editing the pop-in dimensions and click on save or hide the widget configuration form, the modal is resized to the available viewport/window's width. 

 

66.gif

 

Layer

 

Layer Position (z-index)

 

67.png

 

Suppose you've selected the "modal", "top banner" or "bottom banner" layout. In that case, you can define the position of the widget on the z-axis in order to manage the widget’s position: above everything, below everything, or precisely fine-tuned.

 

For more information, please read the dedicated article on z-index.

 

Content tab

 

68.png

 

Upload an image

 

As this widget is an image pop-in, the first thing you will be asked to do is upload an image or paste the image path.

 

Title

 

For the first four layouts (image on the right, image on the left, image below, image above), you can choose whether to display a title. Maximum length is 255 characters. 

 

Message (text or HTML)

 

For the first four layouts (image on the right, image on the left, image below, image above), the message is mandatory. You must fill in the text area.

If you don't want to display a text, there are two options: use the "image only" layout or type a message in the text area, save the widget, and hide the element in the editor.

 

69.gif

 

The text area supports multi-line messages. You can use HTML markup to add ordered or unordered lists. All the other styling aspects should be configured through the "Style" tab.

You can add also emojis. Click here to learn how.

 

Select widget link type

 

You can decide whether your widget should contain a clickable button (to close or redirect), whether it should be entirely clickable (to close or redirect) or whether it should have no link at all.

 

  • "The button is a link": you will have to specify a button URL and a button text. The widget will display a button.
  • "A click on the button closes the widget": you will have to specify a button text. The widget will display a button. 
  • "The whole widget is a link": you will have to specify a URL. The widget will not display a button.
  • "A click on the whole widget closes the widget": you won't have anything to add. The widget will not display a button.
  • "None": the widget will not be clickable.

 

Second CTA/link option

70.png

 

If you toggle on the “Add a second link” option, you can configure a second link/ CTA in your widget, the same way as the first one. 

 

Style tab

 

Select the style options (Text, Buttons, Container, Border, Close button) you want to apply to your widget and customize the banner.

Background can be set up with an image using the image-fitting policy 

4 options are provided:

  • "Cover": the image is resized keeping the aspect ratio to fill the background container even if, by doing this resize, the image may overflow the background container. 
  • "Contains": the image is resized keeping the aspect ratio so that the whole image is included in the  background container (no overflow)
  • "Fill": the image is resized to fill the background container without keeping the aspect ratio 
  • "None": the image is left unchanged.

 

Image Pop-in widget Styling Specificities

 

Align text & button

 

In the "Text" collapsible group, in the "Style" tab, defining the alignment will impact both message and button.

 

71.gif

 

Image Rounded Corners

 

If you apply a large border radius to the pop-in, it will impact the image and will round the two corners affected by the setting. 

If you want to round the two remaining "square" corners of the image, you will have to do so in the editor (select Element, Edit Style, Border tab, and enter the same border radius value).

 

Round Pop-in

 

To display a round pop-in, use one of two options: 

 

1) Set your widget up, save it, open variation menus in the editor, click on "Add CSS" and add: 

.ab_widget_container_popin-image_content {border-radius: 50% !important;}

 

2) Select the "image only" layout, upload a "round image" with transparent background, and use a transparent background color in the "Container" group in the "Style" tab.

 

Conditions tab

 

Select the Triggering and Recurrence options you want to apply to the Promotional Banner widget.

Video Pop-in

 

The Video Pop-in widget lets you display a pop-in containing a video.

This video can be hosted on: YouTube, Vimeo, Dailymotion, Facebook or TikTok. 

It can also be an .mp4 file (works with .ogg and .webm too) hosted on your server.

This widget can be used if you want to catch your visitor’s attention concerning specific content, if you want to display videos in a dynamic way or if you want to display a full-screen interstitial.

 

Layout tab

 

72.png

 

Select a layout

 

There are five different layouts: four with text (video on the right, video on the left, video below, video above) and one without text (video only). By default, the "video only" layout contains a button, but you can remove it.

 

73.png

74.png

75.png

76.png

77.png

 

Video over text ratio

 

For the "video on the left" and "video on the right" layouts, you can decide on the video over text ratio. By sliding the cursor along the axis, you can configure the video to take up 20% to 80% of the available width inside the widget container.

 

78.gif

 

Dimensions

 

Widget dimensions based on content

By default, the "Widget dimensions based on content" toggler is toggled. This saves you from having to worry about modal dimensions. Your pop-in will adapt accordingly based on the video (and text) dimensions.

If you untoggle this toggler, you will be able to define both the width and height of the pop-in. These can be configured (independently) in several dimensional units:

  • px (pixels)
  • % (percentage)
  • em (element, which actually means that it is based on the size of the text of the element: if your font size is 18 px, then 1 em = 18 px)
  • vw (1/100th of the window's (or viewport) width)
  • vh (1/100th of the window's (or viewport) height)
  • vmin (whichever is the smallest of vw or vh) 
  • vmax (whichever is the highest of vw or vh)

79.gif

 

If you're digging the dimensional units in CSS, we strongly recommend reading this W3C article.

Preserve ratio (automatic height)

If you don't want to manage the height of the pop-in, you can keep this toggler toggled by default and the height of the pop-in will adapt according to the video dimensions and the video over text ratio.

 

80.gif

 

Known issue: the widget configuration form not overlapping the website

In the past, we've chosen to make the widget configuration form not overlap the website for cases where a widget is to be positioned in a corner or on the left side. Once you've finished editing the pop-in dimensions and click on save or hide the widget configuration form, the modal is re-dimensioned to the available viewport/window's width.

 

81.gif

 

Layer

 

Layer Position (z-index)

 

Suppose you've selected the "modal", "top banner" or "bottom banner" layout. In that case, you can define the position of the widget on the z-axis in order to manage the widget’s position: above everything, below everything, or precisely fine-tuned.

 

82.png

 

Please read the dedicated article on the matter: z-index.

 

Content tab

 

83.png

 

Video URL

 

As this widget is a video pop-in, the first thing you will be asked to do is paste the video URL.

The widget supports video URLs from:

  • YouTube
  • Vimeo
  • Dailymotion
  • Facebook
  • TikTok
  • And any MP4 file path

 

and will adapt its player but will also display advanced parameters for each case (except for Facebook and TikTok - no advanced parameters).

 

YouTube

The advanced parameters will be: 

  • Autoplay (toggled by default)
  • Mute (toggled by default)
  • Loop (toggled by default)
  • Start x seconds from the beginning (default is 0 sec.)
  • End x seconds before the end (default is 0 sec.)
  • Display controls (untoggled by default) - If controls are displayed, you will have two options available for the player color: YouTube red (default) or white.
  • Authorize full screen (untoggled by default)
  • Enable keyboard shortcuts (untoggled by default)
  • Display subtitles (untoggled by default) - We cannot detect if the video contains subtitles. Toggling it on for a video without subtitles will have no impact.

 

Vimeo

 

The advanced parameters will be: 

  • Autoplay (toggled by default)
  • Mute (toggled by default)
  • Loop (toggled by default)
  • Start x seconds from the beginning (default is 0 sec.)
  • Player color (#57B8C7 is set by default)

 

Dailymotion

 

The advanced parameters will be: 

  • Autoplay (toggled by default)
  • Mute (toggled by default)
  • Show Dailymotion Logo (untoggled by default)
  • Player color (#57B8C7 is set by default) - You can override the default Dailymotion player color only if the administrators of the Dailymotion channel haven’t defined it. In this case, you cannot override it. We cannot detect whether the player color is already set so we will always display the color picker, but a color change will have no impact.

 

MP4 file

 

If your videos are hosted on your server and you don't want them to be hosted on broadcasting platforms, you may be interested in providing the direct URL to the file. In this case, the widget will display a default HTML5 video player (renderings may differ from one browser to another). The widget also supports .OGG and .WEBM files.

 

The advanced parameters will be: 

  • Autoplay (toggled by default)
  • Mute (toggled by default)
  • Loop (toggled by default)
  • Display controls (untoggled by default)

84.gif

 

Title

 

For the first four layouts (video on the right, video on the left, video below, video above), you will be able to decide whether to display a title. Maximum length is 255 characters.

 

Message

 

For the first four layouts (video on the right, video on the left, video below, video above), the message is mandatory. The text area must be filled in.

If you don't want to display a text, there are two options: use the "video only" layout or type a message in the text area, save the widget, and hide the element in editor.

 

85.gif

 

The text area supports multi-line messages. You can use HTML markup to add ordered or unordered lists, then create selectors such as <span>text</span> for specific styling. All the other styling aspects should be carried out through the "Style" tab section.

 

Select widget link type

 

You can now decide whether your widget will contain a clickable button (to close or redirect) or no link at all.

If you pick:

  • "The button is a link": you will need to specify a button URL and a button text. The widget will display a button.
  • "A click on the button closes the widget": you will need to specify a button text. The widget will display a button.
  • "None": the widget will not be clickable.

Unlike the Simple Pop-in and Image Pop-in widgets, the Video Pop-in widget includes a video but cannot be entirely clickable.

 

Second CTA/link option

 

86.png

 

If you toggle on the “Add a second link” option, you can configure a second link/ CTA in your widget, the same way as the first one. 

 

Style tab

 

Select the style options (Text, Buttons, Container, Border, Close button) you want to apply to your widget and customize the banner.

Background can be set up with an image using the image-fitting policy 

4 options are provided:

  • "Cover": the image is resized keeping the aspect ratio to fill the background container even if, by doing this resize, the image may overflow the background container. 
  • "Contains": the image is resized keeping the aspect ratio so that the whole image is included in the  background container (no overflow)
  • "Fill": the image is resized to fill the background container without keeping the aspect ratio 
  • "None": the image is left unchanged.

 

Video Pop-in widget Styling Specificities

 

Align text & button

 

In the "Text" collapsible group, in the "Style" tab, defining the alignment will impact both message and button.

 

87.gif

 

Rounded Corners

 

If you use very rounded corners (and very little padding), it will "crop" the video's corners.

 

Conditions tab

 

Select the Triggering and Recurrence options you want to apply to the Video Pop-in widget. 

 

iframe

 

88.png89.png

 

The iframe widget lets you embed any embeddable iframe.

 

An iframe is an HTML element that lets you display content from another web page (the same site or another site). It is similar to a link, but you don’t have to leave the page you are browsing to view the content. It creates a "frame" that encapsulates the remote page.

 

For example, YouTube videos are displayed in an iframe when you embed them into your website. It is pretty much the same thing for any web app which lets you embed part or all the content of a page. Generally speaking, except in cases where websites forbid it, any web page can be embedded into an iframe.

 

Here is a short list of what can be embedded: Videos (YouTube, Vimeo, TikTok, etc.), Images (Giphy, Facebook, 500px, etc.), Forms (Google Form, Typeform, SurveyMonkey, etc.), Maps (Google Maps, Mapbox, OpenStreetMap, etc.), Calendar/Agendas (Google Calendar, Calendly, etc.), Articles (Wikipedia, Imdb, etc.), Sound (Soundcloud, Bandcamp, etc.) and so forth.

 

Layout tab

 

Layout

 

90.png

 

There are two different layouts:

  • modal (pop-in)
  • free placement (which allows you to place the widget wherever you want in the page flow)

If the "free placement" layout is selected, you won't see the two following blocks (Dimensions & Layer).

 

Dimensions

 

91.png

 

Widget dimensions based on content

 

By default, the "Widget dimensions based on content" toggler is toggled. It saves you from having to worry about modal dimensions. If you upload a very large image, your pop-in will adapt accordingly based on the image (and text) ratio (length).

 

If you untoggle the toggler, you will be able to define both the width and the height of the pop-in. Last but not least, they can be configured (independently) in several dimensional units:

  • px (pixels)
  • % (percentage)
  • em (element, which actually means that it is based on the size of the text of the element: if your font size is 18 px, then 1 em = 18 px)
  • vw (1/100th of the window's (or viewport) width)
  • vh (1/100th of the window's (or viewport) height)
  • vmin (whichever is the smallest of vw or vh) 
  • vmax (whichever is the highest of vw or vh)

Depending on what you want to achieve and how responsive your pop-in needs to be, you may select one unit or another. 

 

If you're digging the dimensional units in CSS, we strongly recommend reading this W3C article.

 

Preserve ratio (automatic height)

By default, the height toggler of the modal is enabled and set to "Preserve ratio (automatic height)". This way, you don't have to set a height, it takes what the modal needs and can even reach 100% of the available height in the viewport. 

If you do define a height and your content is longer than the defined modal height, the modal will be scrollable so users can scroll down to read everything. 

 

Known issue: the widget configuration form not overlapping the website

Once you're finished editing the pop-in dimensions and click on save or hide the widget configuration form, the modal is re-dimensioned to the available viewport/window's width. 

 

Layer

 

Layer Position (z-index)

 

92.png

 

Suppose you've selected the "modal", "top banner" or "bottom banner" layout. In that case, you can define the position of the widget on the z-axis in order to manage the widget’s position: above everything, below everything, or precisely fine-tuned.

Please read the dedicated article on the matter: z-index article.

 

Content tab

 

93.png

 

As you can see, there is not much in the Content tab for this widget. The only required input is the URL of any embeddable web page.

 

For example, in Chrome, If you see this in the widget rendering:

 

95.png

 

It means that the web page you are trying to embed is blocking its native embeddability. Any other web page should work.

 

Some web apps provide copy-and-paste-ready HTML snippets. Most of the time, you will need to delete the extra HTML and just keep the value of the src="" attribute; which is the iframe URL in short.

 

Here is an example with the Google Form provided embed code: 

 

<iframe src="https://docs.google.com/forms/d/e/1FAIpQLSdiYVa8YaIRq69na0g-s8GJQBBDKK3T7luWb4xYH5B2yYEytw/viewform?embedded=true" width="640" height="601" frameborder="0" marginheight="0" marginwidth="0">Loading…</iframe>

 

What you need to paste in the input:

 

https://docs.google.com/forms/d/e/1FAIpQLSdiYVa8YaIRq69na0g-s8GJQBBDKK3T7luWb4xYH5B2yYEytw/viewform?embedded=true

 

Here is another example for Sketchab 3D models. The embeddable code is as follows:

 

<div class="sketchfab-embed-wrapper">

<iframe title="A 3D model" width="640" height="480" src="https://sketchfab.com/models/ec283d217efe4ef39f0e19ae3b3396a1/embed?autostart=1&amp;preload=1&amp;ui_controls=1&amp;ui_infos=1&amp;ui_inspector=1&amp;ui_stop=1&amp;ui_watermark=1&amp;ui_watermark_link=1" frameborder="0" allow="autoplay; fullscreen; vr" mozallowfullscreen="true" webkitallowfullscreen="true"></iframe>

<p style="font-size: 13px; font-weight: normal; margin: 5px; color: #4A4A4A;">

<a href="https://sketchfab.com/3d-models/lego-geralt-of-rivia-ec283d217efe4ef39f0e19ae3b3396a1?utm_medium=embed&utm_source=website&utm_campaign=share-popup" target="_blank" style="font-weight: bold; color: #1CAAD9;">Lego Geralt of Rivia</a>

by <a href="https://sketchfab.com/sir_luizo?utm_medium=embed&utm_source=website&utm_campaign=share-popup" target="_blank" style="font-weight: bold; color: #1CAAD9;">sir_luizo</a>

on <a href="https://sketchfab.com?utm_medium=embed&utm_source=website&utm_campaign=share-popup" target="_blank" style="font-weight: bold; color: #1CAAD9;">Sketchfab</a>

</p>

</div>


 

What you need to paste in the input:

 

https://sketchfab.com/models/ec283d217efe4ef39f0e19ae3b3396a1/embed?autostart=1&amp;preload=1&amp;ui_controls=1&amp;ui_infos=1&amp;ui_inspector=1&amp;ui_stop=1&amp;ui_watermark=1&amp;ui_watermark_link=1

 

This is an example of a YouTube video (although we recommend using the Video Pop-in widget instead).

 

<iframe width="560" height="315" src="https://www.youtube.com/embed/C71YkqN0pEA" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

 

Here is what you need to paste:

 

https://www.youtube.com/embed/C71YkqN0pEA

 

Style tab

 

Select the style options (Container, Border, Close button) you want to apply to your widget and customize it.

Background can be set up with an image using the image-fitting policy 

4 options are provided:

  • "Cover": the image is resized keeping the aspect ratio to fill the background container even if, by doing this resize, the image may overflow the background container. 
  • "Contains": the image is resized keeping the aspect ratio so that the whole image is included in the  background container (no overflow)
  • "Fill": the image is resized to fill the background container without keeping the aspect ratio 
  • "None": the image is left unchanged.

 

Conditions tab

 

Select the Triggering and Recurrence options you want to apply to the Promotional Banner widget.

 

Tooltip

 

The Tooltip widget lets you display a tooltip on one or more elements.

Tooltips are useful in many different situations: as soon as you notice friction points, you can start improving by adding a simple tooltip. Very often, this will quickly relieve users of a painful experience or upgrade a confusing interface.

 

Layout tab

 

94.png

 

  • Select the element which you want to trigger and display a tooltip on.
  • Select the position which the tooltip is displayed on: left side, right side, top, bottom. Default is top.
  • Select the most suitable layout depending on the design of your web app or the amount of text you need to provide in your tooltip: "Simple" or "Rich".

 

Content tab

 

96.png

 

  • Type a Title in the "Title" text area.
  • If you've selected the "Title & Text" layout in the layout tab, add a text in the "Text" text area.

 

 Style tab

 

97.png

 

  • The Text color will be applied to both Title and Copy. We recommend picking a light color.
  • The Background color is black by default. We recommend picking the most contrasted background based on your text color. If most of your website has a light background, use a dark color for your tooltip backgrounds. A tooltip must be clear and very readable. 
  • Border color, thickness, and radius settings will help you adapt the tooltip to your website style and make it seamless.
  • Drop shadow and drop shadow blur radius: you can decide to add a drop shadow and adjust its opacity.

Background can be set up with an image using the image-fitting policy 

4 options are provided:

  • "Cover": the image is resized keeping the aspect ratio to fill the background container even if, by doing this resize, the image may overflow the background container. 
  • "Contains": the image is resized keeping the aspect ratio so that the whole image is included in the  background container (no overflow)
  • "Fill": the image is resized to fill the background container without keeping the aspect ratio 
  • "None": the image is left unchanged.

 

Conditions tab

 

98.png

 

You can choose whether you want to display your tooltip when clicking or hovering (hover does not work on touch devices).

You can choose to display the tooltip by default at page load. We do not recommend using several tooltips, as this can quickly become overwhelming and stressful for your visitors.

You can choose whether the tooltip will be displayed only once per page or every single time the trigger is triggered.

You can use the Tooltip widget as a pseudo-onboarder and add several in one page. In this case, we recommend triggering each one only once per page. This way, once the visitor has finished clicking in the different "new" areas, they can start really using the website without making the tooltips pop again.
If you use tooltips as legends for images, links, etc., we recommend not limiting the trigger to once per page. 

Scratch card

 

The Scratch Card widget enables you to display a pop-in containing an image (that may include some text) that the user can scratch using their mouse (or trackpad) to discover a special offer.

This feature can be leveraged to: 

  • Reward customer loyalty with a discount or free delivery
  • Unveil coupons to your visitors
  • Add interactive & fun widgets to delight your customers 
  • Unveil a new line of products 
  • Create contests to drive revisits to the website

99.png100.png

 

Configuring the widget

 

During this configuration step, layout, content, and style changes are displayed in real-time.

To apply your changes:

  1. Go through each tab of the configuration form and select the options that are applicable.
  2. Click Save to save your changes.
  3. If needed, you can click History in the toolbar on the right-hand side, then click the widget you added to reopen the configuration form and edit your changes.

List of options for the Scratch Card widget: the four tabs Layout, Content, Style, and Conditions are available to configure the widget.

 

Layout customization

 

The Scratch Card widget is displayed as a modal (pop-in) that appears on top of the main screen. In the layout section, select where you want your image to be placed in relation to the text and select where you want your modal to be placed on the screen (9 available options).

For the "image on the left" and "image on the right" options, determine the width percentage of the image compared to the entire pop-in: between 20% and 80% of the available width.

 

Dimensions

 

By default, the "Widget dimensions based on content" toggle is ON, meaning that if you upload a large image, your modal will adapt accordingly based on the image (and text) ratio (length).

When the toggle is OFF, you can define the width and height of the modal independently using the following dimensional units:

 

Unit

Description

px

Pixels

%

Percentage

em

Element, meaning that it is based on the size of the text of the element.

For example, if your font-size is 18 px, then 1 em = 18 px

vw (% of viewport width)

1/100th of the window's (or viewport) width

vh (% of viewport height)

1/100th of the window's (or viewport) height

vmin (% of viewport minimum size)

Whichever is the smallest of vw or vh

vmax (% of viewport maximum size)

Whichever is the highest of vw or vh

 

By default, the height of the modal is set to "Preserve ratio (automatic height)". This way, you don't have to set a height; it takes what the modal needs and can even reach 100% of the available height in the viewport. 

When the toggle is OFF, you can define a height. If the content is longer than the defined modal height, it will be scrollable.

 

Content tab

 

Select the step you want to preview:

  • Before scratching
  • After scratching

 

Before scratching/ After scratching

  • Select the desired image by uploading it via your browser or by entering the image path.
  • Display title (optional): enter a title for your image, to be displayed above your message.
  • Message: enter a message, for example, to give the user instructions.

 

For the after scratching step, you must select the widget link type among the following options:

 

Unit

Description

The button is a link

On clicking the button, the user is redirected to another page.

You must enter the label of the button and the URL of the page you want the visitor to be redirected to.

A click on the button closes the widget

On clicking the button, the widget closes.

You must enter the label of the button.

The whole widget is a link

On clicking on any area of the widget, the user is redirected to another page.

You must enter the URL of the page you want the visitor to be redirected to.

A click on the whole widget closes the widget

On clicking any area of the widget, it closes.

None

There is no button, and nothing happens when clicking on the widget.

 

Second CTA/link option

 

101.png

 

If you toggle on the “Add a second link” option, you can configure a second link/ CTA in your widget, the same way as the first one. 

 

Style tab

 

Select the style options (Container, Border, Close button and Underlay) you want to apply to your widget. 

From here, you can configure the size and layout of your modal. 

Background can be set up with an image using the image-fitting policy 

4 options are provided:

  • "Cover": the image is resized keeping the aspect ratio to fill the background container even if, by doing this resize, the image may overflow the background container. 
  • "Contains": the image is resized keeping the aspect ratio so that the whole image is included in the  background container (no overflow)
  • "Fill": the image is resized to fill the background container without keeping the aspect ratio 
  • "None": the image is left unchanged.

 

Conditions tab

 

Select the Triggering and Recurrence options you want to apply to your widget. Refer to the Widget Condition options section in the widget guide for more information on the available Condition options. 

 

 

 

🔎 Tracking widgets

 

Element Visible Tracking

 

The Element Visible Tracking widget enables you to track whether one element (an image, a button, a paragraph, a div, a section, a collapsible div, etc.) has been "visible" in the viewport of the visitor.

 

There are several possibilities:

  • the element is visible above the "fold line" at page load,
  • the element is only visible once the visitor has scrolled to a certain point and suddenly appears in the viewport (triggered when the element starts to be visible and is not fully visible, for example, a large <div> or an image),
  • the element is hidden and is only displayed after a click (or any other user behavior).

 

In all of these cases, we collect a hit. Once an element has been made visible in the viewport, reading it and re-displaying it will not count it twice. However, if the visitor reloads the page and the element is visible again, a new hit is sent.

If you have a responsive website, it is probably more convenient to use the Element Visible Tracking widget instead of the Scroll Rate Tracking widget, which will consider a scroll rate the same way for visitors on desktop and on mobile.

 

102.png

 

Depending on how your website is designed and/or the device you use, you may see an element or not, without this being related to the scroll progression.

You can nevertheless use the Scroll Rate Tracking widget in two different campaigns, each one targeted on a per-visitor device basis.  

 

Configuration

 

103.png 104.png

 

To configure the widget:

  1. select the element you would like to track,
  2. give it a name (for the Goals setup step and the Reporting),
  3. save.

 

To use more than one goal, add more in the same tracking widget (by clicking on the "+" button) instead of adding another tracking widget. 

If you added one by mistake or if you would like to remove one inside of a tracking widget, simply click on the red cross to delete it.

In order for your goal(s) to be displayed in your campaign reports, you need to add them as main or secondary goals. For more on the goal configuration step, refer to the metrics guide.

To enable a fair comparison, event tracking widgets are applied to the original version and to the campaign variation(s).

 

Dwell Time Tracking

 

The Dwell Time Tracking widget enables you to track the time your visitors spend on a page. Visitors who reach a given duration will be grouped under this duration goal.

For example, you can create three separate goals in one single widget. 

Let's say: 10 seconds, 60 seconds, and 180 seconds. You will see in the reporting for each goal, how many visitors reached it.

This will give you an idea of the time your visitors spend on a single page, whether it is a content page with a long scroll or a simple task-oriented page (or group of pages, depending on your targeting criteria).

In theory, you should always have a higher number of reached goals for the shortest durations and a lower number of reached goals for the longest durations.

 

Configuration

 

105.png106.png

 

To configure the widget:

  1. give it a name (for the Goals setup step and the Reporting),
  2. define a duration (make sure to name it accordingly),
  3. save.

To use more than one goal, add them into the same tracking widget (by clicking on the "+" button) instead of adding another tracking widget. If you added one by mistake or if you would like to remove one inside of a tracking widget, just click on the red cross to delete it.

In order for your goal(s) to be displayed in your campaign reports, you need to add them as main or secondary goals. For more on the goal configuration step, refer to the Metrics Guide.

To avoid creating conflicts within your campaign's reporting data, we recommend adding a single widget in which all your dwell time goals will be defined.

To enable a fair comparison, event tracking widgets are applied to the original version and to the campaign variation(s).

 

Scroll Rate Tracking

 

The Scroll Rate Tracking widget enables you to set one or more scroll goals on a web page.

Once the scroll threshold has been reached by a visitor, a goal is recorded in the report. If a user scrolls down, reaches a goal, scrolls back up and scrolls down again, the hit is not sent twice. 

If they refresh the page and reach the scroll rate goal, a new hit is sent.

If you have a responsive website, it is probably more convenient to use the Element Visible Tracking widget instead of the Scroll Rate Tracking widget, which will consider a scroll rate the same way for visitors on desktop and on mobile.

 

107.png

 

Depending on how your website is designed and/or the device you use, you may see an element or not, without this being related to the scroll progression.

You can nevertheless use the Scroll Rate Tracking widget in two different campaigns, each one targeted on a per-visitor device basis, for a fair comparison.

 

Configuration

 

108.png109.png

 

To configure the widget:

  1. give it a name (for the Goals setup step and the Reporting),
  2. define a percentage of scroll (make sure to name it accordingly),
  3. save.

 

To use more than one goal, add them into the same tracking widget (by clicking on the "+" button) instead of adding another tracking widget. If you added one by mistake or if you would like to remove one inside of a tracking widget, just click on the red cross to delete it.

 

In order for your goal(s) to be displayed in your campaign reports, you need to add them as main or secondary goals. For more on the goal configuration step, refer to the metrics guide.

To avoid creating conflicts within your campaign's reporting data, we recommend adding a single widget in which all your scroll goals will be defined.

To enable a fair comparison, event tracking widgets are applied to the original version and to the campaign variation(s).

 

Iframe Click Tracking

 

The Iframe Click Tracking widget enables you to record clicks in an iframe (an HTML element that lets you display content from another web page (the same site or another site).

For example, YouTube videos are displayed in an iframe when you embed them in your website. It is pretty much the same thing for any web app that lets you embed a part of or the full content of a page. Generally speaking, except for websites that forbid it, any web page can be embedded in an iframe.

 

Configuration

 

110.png

 

To configure the widget:

  1. give it a name (for the Goals setup step and the Reporting),
  2. select the <iframe> element you would like to track (use the Select Parent or Select Children option to select the right element if needed),
  3. save.

 

To use more than one goal, add them to the same tracking widget (by clicking on the "+" button) instead of adding another tracking widget. If you added one by mistake or if you would like to remove one inside of a tracking widget, just click on the red cross to delete it.

 

In order for your goal(s) to be displayed in your campaign reports, you need to add them as main or secondary goals. For more on the goal configuration step, refer to the Goal guide.

If you want to track clicks in several iframes on your page, you will need to add one widget per iframe.

To enable a fair comparison, event tracking widgets are applied to the original version and to the campaign variation(s).

 

🎁 “Special” widgets

 

Before-After Image

 

The Before & After widget enables you to display 2 images and compare them side by side.

This can be useful:

  • If you want your visitors to be presented with or compare a product (before using the product and after)
  • To test a new way of displaying images on your product pages
  • To showcase an offer (“Drag to discover your bonus”)
  • etc.

111.png

 

During this configuration step, layout, content and style changes are displayed in real-time.

To apply your changes, proceed as follows:

  1. Go through each and every tab of the configuration form and select the options that are applicable.
  2. Click Save to save your changes.
  3. If necessary, you can click History in the toolbar on the right-hand side, then click the widget you added to reopen the configuration form and edit your changes.

 

Good to know 💡

An informative message is displayed if you try to create a widget when one has already been configured for that variation or scenario. Once closed, it won’t be displayed again. However, this doesn’t prevent you from creating another widget if necessary.



Layout tab

 

The Before-After image widget has two available layouts:

 

Modal

 

This option enables you to display the widget as a window that appears on top of the main screen. In the layout section, select where you want your modal to be placed on the screen (9 available options).

 

Free placement

 

This option enables you to position the widget in a specific place in relation to an existing HTML element:

  1. Click Select element.
  2. On the page, select the element on which you want to hook the widget.
  3. Select the appropriate option to position the widget Before, At the Start, At the End, or After the element.

 

Before

Fix the widget before a specific element of the page

After

Fix the widget after a specific element of the page

At the Start

Place the widget in the HTML code, at the start of the element definition

At the end

Place the widget in the HTML code, at the end of the element definition

 

Good to know 💡

When using the At the Start or At the End options, the widget may inherit the CSS styles of the selected element.

 

Next, select a presentation among these three options: separated by a slider, next to each other, or on top of each other.

 

Content tab

 

Required options

 

Option

Usage

Select the first image

Select the desired image by uploading it from your browser or by entering the image path. You must add two images.

Select the second image

 

Optional options

 

Option

Usage

Display a title

Enter a title common to both your images that will be displayed above the first image (depending on the chosen configuration) and above your message (if any).

Display a message

Enter a message common to both your images that will be displayed above the first image (depending on the chosen configuration).

Display image captions

Enter a caption for both your imported images. This caption will be displayed below each image.

 

Widget link type

 

You can decide whether your widget should contain a clickable button (to close or redirect), whether it should be entirely clickable (to close or redirect) or whether it should have no link at all.

 

  • "The button is a link": you will need to specify a button URL and a button text. The widget will display a button.
  • "A click on the button closes the widget": you will need to specify a button text. The widget will display a button. 
  • "The whole widget is a link": you will need to specify a URL. The widget will not display a button.
  • "A click on the whole widget closes the widget": you won't need to add anything. The widget will not display a button.
  • "None": the widget will not be clickable.

If you use a background image which looks like a "big ad", we recommend selecting "The whole widget is a link" and removing the paragraph with the editor once the widget is set.

 

Second CTA/link option

 

112.png

 

If you toggle on the “Add a second link” option, you can configure a second link/ CTA in your widget, the same way as the first one. 

 

Style tab

 

Select the style options (Container, Border, Close button) you want to apply to your widget. 

From here, you can configure the size and layout of your modal. 

 

Conditions tab

 

Select the Triggering and Recurrence options you want to apply to your widget. Refer to the Widget Guide section for more information on the available Condition options.

 

Search & Replace

 

The Search & Replace widget will help you replace all the occurrences of a word or a group of words on a page.

This is useful, for instance, for A/B testing a change in wording or microcopy, or simply to replace an old product name with a new one, or even the name of the former CEO with the new one.

The impact of this widget on your text is visible in the editor directly.

 

Content tab

 

113.png

 

To configure the widget:

  1. Type the word(s) you want to replace in the "Search" input.
  2. Type the word(s) you want them to be replaced within the "Replace With" input.
  3. Scope it or leave it. Leave “body” if you want to apply the changes to the whole page or select the element you want your replacement to be scoped to.
  4. Save

 

Be careful, this widget is case-sensitive, so if the words you want to replace are "Product X", it will not replace: 

  • product X
  • Product x
  • product x

You will need to add four widgets to cover all cases.

 

Sticky Element

 

The Sticky Element widget helps you keep important elements in the viewport of your visitors. This limits confusion and reminds them of the main expected task for each page.

For example, on product pages, it can be the "Add to Cart" button, on travel websites, the "Book Now" button, on SaaS apps, the "Save" button, and so on.

 

Content tab

 

114.png

 

  • The "Select the Element to Stick" input allows you to select the link, button, or whole <div> that you want to make "sticky".
  • The "Foreground" toggler is toggled by default. When toggled, it allows you to change the z-index. value.
  • The "z-index" number input lets you define the z-index value in order to position your sticky element among other elements already placed on the z-axis.

 

 Style tab

 

115.png

 

  • The "Sticky Position from Top" input number and unit select allow you to define the scroll height before the widget starts to become "sticky".
  • If the "Add Background Color" check box is ticked, then you can define a "Background color" for the selected element in the color picker.

116.gif

 

Virtual Click

 

The Virtual Click widget will help you virtually click on an element on the page to save your visitors the hassle. This click will happen at page load.

It can be used in many different ways, such as clicking to hide a panel, display a pop-in, pre-filter results, accept conditions, tick a check box...anything you would like your visitors to do but can't force them to do, or anything you would like to save your visitors from doing.

It can be very convenient once a decision for an evolution has been made and you would like to implement it as soon as possible without having to wait for the development to be in production.

You will not be able to see the impact of this widget in the editor directly (the click). 

 

Configuration

 

117.png

 

To configure the widget:

  1. select the element you want to click onto at page load,
  2. save.

Be careful: If you need to add more than one virtual click, you will have to add as many widgets as needed.

 

Celebrate

 

The Celebrate widget enables you to place an icon of your choice on any element of the web page.

This can be useful:

  • to add playfulness to your website during holiday season,
  • to highlight a new product,
  • to highlight specific products (e.g. green products),
  • etc.

118.png

 

During this configuration step, layout, content and style changes are displayed in real time.

To apply your changes, proceed as follows:

  1. Go through each and every tab of the configuration form and select the applicable options.
  2. Click Save to save your changes.
  3. If necessary, you can click History in the toolbar on the right-hand side, then click the widget you added to reopen the configuration form and edit your changes.

 

Good to know 💡

An informative message is displayed if you try to create a widget when one has already been configured for that variation or scenario. Once closed, it won’t be displayed again. However, this doesn’t prevent you from creating another widget if necessary.

 

Three tabs (Layout, Content, Style) are available to configure the widget.

 

Good to know 💡

The Save button will only be enabled once you have gone through each tab.

 

Layout tab

 

Select the element of the page on which you want to hook the icon.

 

Content tab

 

Two options are available to configure your widget:

  • Select an icon among the default icons suggested by AB Tasty
    or
  • Upload your own image by uploading it from your browser or by entering the image path.

 

Style tab

 

Select the style options (Size, Horizontal & Vertical Alignment, Horizontal & Vertical Symmetry, Rotation) you want to apply to your widget. 

 

Snowflake Animation

 

The Snowflake Animation widget enables you to simulate snow falling on any element of the web page with an icon of your choice.

It can be useful to add playfulness to your website during a specific time of year (Christmas, Halloween, Thanksgiving, Valentine's Day, your company anniversary and so on) or to highlight a specific section of the page.

 

119.png

 

During this configuration step, layout, content and style changes are displayed in real-time.

To apply your changes, proceed as follows:

  1. Go through each and every tab of the configuration form and select the applicable options.
  2. Click “Save” to save your changes.
  3. If necessary, click on “History” in the toolbar on the right-hand side, then click on the widget you added to reopen the configuration form and edit your changes.

 

 Good to know 💡

An informative message is displayed if you try to create a widget when one has already been configured for that variation or scenario. Once closed, it won’t be displayed again. However, this doesn’t prevent you from creating another widget if necessary.

 

Three tabs (Layout, Content, Style) are available to configure the widget.

 

Good to know💡

The Save button will only be enabled once you have gone through each tab.

 

Layout tab

  1. Select the element of the page on which you want the icons to fall.
  2. Define the position of the widget compared to the layer. You can choose to have your icons fall above or under the layer, or to customize their position.

 

Content tab

 

Enter the number of icons you want to fall on your element or page (up to 200). 

Two options are available to configure your widget:

  • Select an icon among the default icons offered by AB Tasty
    or
  • Upload your own image by uploading it from your browser or by entering the image path.

 

Style tab

 

Select the style options (Icon size, Average animation duration, Animation direction, Icon rotation during animation) you want to apply to your widget. 

 

Condition tab

 

120.png

 

You can choose to stop the animation after a certain amount of time (delay) after the loading of the targeted page. To do this, toggle the “Stop the widget after a delay” toggle and use the scale or the empty field to declare the number of seconds to be reached before stopping the animation. 

 

Social Sharing

 

The Social Sharing widget lets you display a sidebar (left, right, top, bottom of the page) on pages where you would like your visitors to share content on social media or via email. 

 

Layout tab

 

121.png

 

Pick the layout that suits you best depending on the design of your web app.

  

Content tab

 

122.png

 

Select the social platform(s) you would like to invite your visitors to share on.

The following are available: Facebook, Twitter, Telegram, LinkedIn, and Pinterest.

 

By default, "Email" is toggled; it will add a button with a "mailto:" link. 

The email subject will be the meta title of the page and the email body will be the URL of the page. 

"mailto:" links behave differently depending on whether you have set a default email client for "mailto:" links in your browser settings; and if you have, it differs depending on whether you use: Thunderbird, Outlook, Mail, Gmail, Proton Mail, etc.

 

Style tab

 

123.png

 

  • The Icons color will be applied to all icons. By default they are white.
  • The Customize icon background color, once toggled, will be applied to all icons. By default (untoggled) they are based on the color of the social media platform: light blue for Twitter, red for Pinterest, etc.

  • Display a drop shadow & drop shadow blur radius. You can decide whether to have a drop shadow and how opaque it will be.

  • Margin between icons will add some margin between the buttons (vertical margin or horizontal margin, depending on the layout you picked).

  • Button border radius slider will give more or less border radius to the icon buttons.

  • Customize container: if you toggle this option, you will discover a list of sub-options (container padding, background color, border thickness (and border color is thickness is >= 1px) & border radius) which will let you design a sidebar to wrap the icons together.

  • The Container position on the axis slider will help position the sidebar, in particular if you already have static/sticky elements on your page so as to avoid overlapping. By default it is set to 50, which means centered (vertically or horizontally (@ 50%) depending on the layout you picked).


💘 Dynamic content

 

Social proof

 

The Social Proof widget enables you to display a message for your visitors, specifying the number of views or purchases for a specific product page for a defined duration. 

Social Proof is a social psychology principle that describes the fact that individuals are highly influenced by the behaviors and opinions of others. In the case of a newspaper article, the more views it has, the more people will be tempted to read it because it has already sparked the interest of others. In the case of a commercial product, a large number of views may convince people that the product is popular and therefore make them want to purchase it. A large number of purchases is likely to accelerate the purchase decision of hesitant users, who fear the item will soon be out of stock. They will also view a large number of purchases as proof of the article’s high quality. A low number of views or purchases, on the other hand, is likely to put the visitor off buying.

In short, this widget can make a huge impact if targeted properly on volume of traffic or volume of purchases.

 

Layout tab

Capture_d_e_cran_2020-10-26_a__11.57.14.png

 

We offer 4 different layouts:

  • modal (pop-in)
  • top banner
  • bottom banner
  • free placement (which allows you to place the widget wherever you want in the page flow)

 

Dimensions

Capture_d_e_cran_2021-02-01_a__10.46.53.png

 

Widget dimensions based on content

By default, the "Widget dimensions based on content" toggler is toggled. It helps you not to worry about modals dimensions. If you upload a very large image, your pop-in will adapt accordingly based on the image (and text) ratio (length).

But, for many of our users, this default dimensions management was not enough. So we came up with something trickier but more flexible. If you untoggle the toggler, we will be able to define both width and height of the pop-in. And, last but not least, you will able to define them (independently) in several dimensional units:

  • px (pixels)
  • % (percentage)
  • em (element, which actually means that it is based on the size of the text of the element, if your font-size is 18 px, then 1 em = 18 px)
  • vw (1/100th of the window's (or viewport) width)
  • vh (1/100th of the window's (or viewport) height)
  • vmin (whichever is the smallest of vw or vh) 
  • vmax (whichever is the highest of vw or vh)

Depending on what you want to achieve and how responsive your pop-in needs to be, you may select one unit or another. Some of you may think that being able to define height in vw or width in vh doesn't make sense and that it is a bug or an oblivion on our side's but it is not. It can be useful to do, in some very edgy cases, that is for sure.

We voluntarily did not offer those units: cm, mm, in, pt, pc and ex as, in short, they are not best-practices. We are still open to discussion for implementing rem unit.

If you're digging the dimensional units in CSS, we strongly advise you read this W3C article which is a good starting point.

 

Preserve ratio (automatic height)

By default, the height toggler of the modal is enabled and set to "Preserve ratio (automatic height)". This way, you don't have to set any height, it takes what the modal needs and can even reach 100% of the available height in the viewport. 

If you do define a height and your content is longer than the defined modal height, the modal will be scrollable so users can scroll in it to read everything.

 

Know issue: the widget configuration form not overlapping the website

In the past, we've chosen to make the widget configuration form not overlapping the website, especially if you want to position a widget in a corner or on the left side. Therefore the global website width is "squeezed" in the editor. Now, once you're finished editing the pop-in dimensions and click on save or hide the widget configuration form, the modal is re-dimensioned to the available viewport/window's width. And results can be surprising...

We understand that defining the pop-in size without seeing the full rendering of the page is tricky. Until now, we haven't found a better solution to help you do that. Make sure, when you dimension your pop-in that it will adapt to all windows widths by showing/hiding the widget form or let the "Widget dimensions based on content" toggle toggled.

 

Layer

Layer Position (z-index)

Capture_d_e_cran_2021-02-01_a__10.47.04.png

If you've selected "modal", "top banner" or "bottom banner" layout, you can define the position of the widget on the z axis in order to manage if you want the widget: on top of everything, under everything or precisely fine-tune its position.

Content tab

Capture_d_e_cran_2020-10-26_a__11.57.49.png

 

Select a variable to display

Pick between "Number of purchases" or "Number of views". "Number of views" is the default value. Depending on which value you select, it will display the number of times the page has been viewed or the number of times the product has been bought (thanks to the transaction tag).

 

Select a period to display

Depending on your volume of sales of the 'social' pressure level you want to add, you may select a duration value among these: last 3 hours, last 12 hours, last 24 hours, last 3 days or last 7 days. We advise you to start with the longest and increase throughout your experiments to find your best fit.

 

Create your own content with dynamic tags

Customize the default text, position the different variables exactly where you want them to be. This allows you to write a lot of combinations in your own language and adapted to your needs.

  • !views!: The number of times your visitors have viewed your product page (multiple views per visitor)
  • !purchaseQty!: The number of purchases your visitors have made on this particular product from any page or section of your website. 
  • !period! : duration value (number of hours or days).
  • !unit! : duration unit ("hours" or "days"). You can also remove it and replace it using your own words.

Style tab

Select the style options (Text, Buttons, Container, Border, Close button) you want to apply to your widget and customize the banner.

Background can be set up with an image using the image-fitting policy 

4 options are provided:

  • "Cover": the image is resized keeping the aspect ratio to fill the background container even if, by doing this resize, the image may overflow the background container. 
  • "Contains": the image is resized keeping the aspect ratio so that the whole image is included in the  background container (no overflow)
  • "Fill": the image is resized to fill the background container without keeping the aspect ratio 
  • "None": the image is left unchanged.

 

Conditions tab

Contrarily to other widgets, the Social Proof widget has a distinctive "Conditions" tab. Especially for the triggering part.

 

Capture_d_e_cran_2020-10-26_a__12.01.49.png

 

Triggering

Depending on if you picked view or purchases in the content tab, you will be able to trigger the display of the widget from a specific number of views or purchases. In both cases, minimum is 0 and maximum is 1,000. By default, the value is 200 for 'views' and 50 for 'purchases'. You can override them.

This volume trigger applies to all the targeted products and start to collect views and purchases as soon as the widget is activated for your account (TDB enablement). Which means that you may have to wait a little to be able to QA the widget in order to have collected data between the moment your widget was enabled and between your campaign is in QA.

Be careful when doing the quality assurance on a campaign with a Social Proof widget. If the trigger level is higher than the actual number of views / purchases. You may not see the widget.

 

Recurrence

The recurrence is managed the same way as explained here, in the common Conditions tab article.

 

URL Parameters

The number of views for a product is collected automatically thanks to AB Tasty’s data collection system (Universal Collect).

The Social Proof widget relies on the URL of the page, including path name (without the gclid parameter (Google Ads' automatic marking)). Anchors are not taken into account by the widget.

The "Ignore URL parameters to differentiate pages" toggler is disabled by default. This option aims to help users define with more precisions if what they call "a product" is a variation of a more generic product or the generic product.

For example, in the tourism industry, many websites have per-hotel or per-flight URLs but however uses URL parameters to make distinctions on room types, nights, options, dates, classes...

  • myhotel.com/hotel-cancun-123?room=suite-deluxe&checkin=12052021&checkout=19052021
  • myflight.com/dublin-vilnius-xair?outbound=12052021&return=19052021&class=economy

But it also sometimes happens in fashion or other industries...

  • mytshirt.com/tshirt-fancy-123?size=xl&color=grey&design=19
  • mymachinery.com/tiller?wheels=4&absorber=yes&options=security-pack

In order to set this toggler the best way possible, the questions you have to ask yourself are: 

1st question: "Are

    • myhotel.com/hotel-cancun-123
    • myhotel.com/hotel-cancun-123?room=suite-deluxe&checkin=12052021&checkout=19052021

the same product or two different products?"

If not, let the toggler disabled ; if yes, enable the toggler.

2nd question: "Is myhotel.com/hotel-cancun-123 a real purchasable product (or has it to be set up (options, dates...))?"

If yes, let the toggler disabled ; if no, enable the toggler.

Now, if you want to display the Social Proof widget only on distinctive product variations and not on the generic product pages, you may set your campaign targeting criteria to only URLs containing parameters.

 

Pre-requisites

In order to display the number of purchases, AB Tasty has to retrieve information regarding the corresponding product, which is registered in your data layer, or directly in the source code of your website (DOM).

>We recommend using a data layer on your website. A data layer can register and gather information on the product for which you want to determine the number of transactions. For more information, please refer to the Integrating your Data layer into your AB Tasty account article.

Before configuring the widget via the campaign editor, if you want to determine the number of transactions for a product, you need to:

  • Implement the Item hit and the transaction tag
  • Define the window.ABTastyProductKey variable

Implementing the Item hit and the transaction tag

The Item hit enables the collection of information on the product for which you want to collect and display the number of transactions (average cart value, item price, etc.). To make the Social Proof widget work, tid (transaction ID, the id of the transaction), ic (item code, the SKU of the product... in short: a unique identifier) and in (item name) parameters are required. For other parameters, you can implement a default value. Nevertheless, they must respect a given type of data in order to guarantee the calls with the database.

To implement the Item hit, you also need to implement the transaction tag on your website. The transaction tag enables you to save the data related to the transactions carried out on your website (e.g. transaction amounts, payment methods, number of items purchased, etc.).

To implement the transaction tag and the item hit, please refer to the New data collection: Installing the transaction tag article.

For more information, see the technical documentation.

 

Defining the window.ABTastyProductKey variable

After implementing the transaction tag and the item hit, you need to define the window.ABTastyProductKey variable with the value of the product (item code) for which you want to collect and display the number of transactions.

Once the variable is defined, the Social Proof widget connects the information of the database with the value defined in the window.ABTastyProductKey variable. If this information matches, it means that the value of the variable and the item code of the Item hit are similar: the widget can display the number of transactions carried out on the product via the widget.

To define the window.ABTastyProductKey variable, apply the following steps:

Copy the following code, paste it in "Add JS" (in the variation menu), replace YOURDATALAYER with your dataLayer name & replace ITEMSKUKEY with the adequate parameter name present in your dataLayer.

function setABTastyProductKey() {
if (typeof YOURDATALAYER !== "undefined") {  /* Set YOURDATALAYER variable with the correct name */
  window.ABTastyProductKey = YOURDATALAYER.ITEMSKUKEY; /* Set YOURDATALAYER.ITEMSKUKEY variable with the correct path. */
} else {
  setTimeout(setABTastyProductKey);
}
}
setABTastyProductKey();

The value you define in the window.ABTastyProductKey variable must be the same as the item code (product SKU) located in the Item hit.

We recommend implementing the code directly in the editor of the campaign rather than in the global code of the website, as this code is only necessary for pages using the Social Proof widget.

 

Tracking

The social proof widget sends an AT hit “Social proof displayed” when it meets the conditions and is displayed. 

However, you need to create a custom tracking and add it during the goals step to make it appear in the report of the campaign

 

NPS

 

  Capture_d_e_cran_2020-10-13_a__09.43.47.pngCapture_d_e_cran_2020-10-13_a__09.41.34.pngCapture_d_e_cran_2020-10-13_a__09.33.35__1_.pngCapture_d_e_cran_2020-10-13_a__09.37.21.png

 

The NPS widget enables you to display a satisfaction survey in order to collect feedback from visitors. The NPS, or Net Promoter Score, is a customer satisfaction measuring tool based on a single question.

This functionality enables you to carry out a satisfaction survey via a form displayed on one or more pages or your website. This way, visitors can rate and comment on their experience as users.

Among other things, the NPS widget enables you to quantify promoters (9 - 10), passives (7 - 8) and detractors (0 - 6) on your website, to collect feedback and to measure the impact or your changes.

The widget then lets you:

  • track the evolution potential of customer loyalty,
  • find out how you are performing compared to other players in your field,
  • improve the user experience.

Restriction

At the moment, even if the NPS widget can be added onto a multi-pages test or a personalizations with sub-tests, the reports in such campaigns are not supported yet.

 

Layout tab

Capture_d_e_cran_2021-02-01_a__10.46.21.png

 

Select a layout

We offer 4 different layouts:

  • modal (pop-in)
  • top banner
  • bottom banner
  • free placement (which allows you to place the widget wherever you want in the page flow)

Capture_d_e_cran_2020-10-13_a__10.31.54.png

 

Capture_d_e_cran_2020-10-13_a__10.31.40.png

 

Capture_d_e_cran_2020-10-13_a__10.32.06.png

 

Capture_d_e_cran_2020-10-13_a__10.32.45.png

 

Dimensions

Capture_d_e_cran_2021-02-01_a__10.46.53__1_.png

 

Widget dimensions based on content

By default, the "Widget dimensions based on content" toggler is toggled. It helps you not to worry about modals dimensions. If you upload a very large image, your pop-in will adapt accordingly based on the image (and text) ratio (length).

But, for many of our users, this default dimensions management was not enough. So we came up with something trickier but more flexible. If you untoggle the toggler, we will be able to define both width and height of the pop-in. And, last but not least, you will able to define them (independently) in several dimensional units:

  • px (pixels)
  • % (percentage)
  • em (element, which actually means that it is based on the size of the text of the element, if your font-size is 18 px, then 1 em = 18 px)
  • vw (1/100th of the window's (or viewport) width)
  • vh (1/100th of the window's (or viewport) height)
  • vmin (whichever is the smallest of vw or vh) 
  • vmax (whichever is the highest of vw or vh)

Depending on what you want to achieve and how responsive your pop-in needs to be, you may select one unit or another. Some of you may think that being able to define height in vw or width in vh doesn't make sense and that it is a bug or an oblivion on our side's but it is not. It can be useful to do, in some very edgy cases, that is for sure.

We voluntarily did not offer those units: cm, mm, in, pt, pc and ex as, in short, they are not best-practices. We are still open to discussion for implementing rem unit.

If you're digging the dimensional units in CSS, we strongly advise you read this W3C article which is a good starting point.

 

Preserve ratio (automatic height)

By default, the height toggler of the modal is enabled and set to "Preserve ratio (automatic height)". This way, you don't have to set any height, it takes what the modal needs and can even reach 100% of the available height in the viewport. 

If you do define a height and your content is longer than the defined modal height, the modal will be scrollable so users can scroll in it to read everything.

 

Know issue: the widget configuration form not overlapping the website

In the past, we've chosen to make the widget configuration form not overlapping the website, especially if you want to position a widget in a corner or on the left side. Therefore the global website width is "squeezed" in the editor. Now, once you're finished editing the pop-in dimensions and click on save or hide the widget configuration form, the modal is re-dimensioned to the available viewport/window's width. And results can be surprising...

We understand that defining the pop-in size without seeing the full rendering of the page is tricky. Until now, we haven't find a better solution to help you do that. Make sure, when you dimension your pop-in that it will adapt to all windows widths by showing/hiding the widget form or let the "Widget dimensions based on content" toggle toggled.

 

Layer

Layer Position (z-index)

Capture_d_e_cran_2021-02-01_a__10.47.04__2_.png

If you've selected "modal", "top banner" or "bottom banner" layout, you can define the position of the widget on the z axis in order to manage if you want the widget: on top of everything, under everything or precisely fine-tune its position.

Content tab

Capture_d_e_cran_2020-10-13_a__10.33.59.png

 

Question

This is where you will be able to write your own NPS question. By default, we offer to use the most common way of asking an NPS question to the visitors: "How likely are you to recommend us to a friend or family member?".

However, you can write in many other ways, for example:

  • "What is your experience so far with this product?" (for an already purchased product)
  • "How is our documentation answering your questions?" (for self-service user documentation)
  • "Hey, do you think these recommend products are adequate?" (for product recommendation features)

Adapt the question to what you want to know.

A well-targeted campaign properly triggered with the right level of recurrence can give you really good results in quality and volume of feedback.

Pro tip: don't offer anything in exchange of a feedback. Feedback (good and bad) is free. Free is unbiased.

 

Display legend

You can decide to display a legend next to min and max scores by toggling this on. By default, it is untoggled. However, it makes it obvious for visitors that 0 is bad and 10 is good. No brainer.

By default, we offer "Very unlikely" as minimum score legend and "Very likely" as maximum score legend. They fit well with the default NPS question. Therefore, if you change the question, there is a good chance that you will need to adapt the legend too.

 

Ask an open-ended question

You can decide to have a "Ask an open-ended question" by toggling this on. By default, it is untoggled.

Most of our users use this option to get more detailed feedback with the score. Invite your users to give you detailed explanations of their bad or good score (and even average). This qualitative feedback will become a real change or growth lever.

Some of our users also use it to collect personal contact information such as phone number, email or client ID. It sure does imply a lot of manual qualification but it can be a quick-win to contact back and turn detractors into promoters.

 

Button text

By default, we offer "Send". Obviously, you can change it to your own needs.

This input only appears if you toggle the "Ask an open-ended question" step.

 

Thank you message

You can decide to have a "Thank you message" by toggling this on. By default, it is untoggled.

 

Style tab

Select the style options (Text, Buttons, Container, Border, Close button) you want to apply to your widget and customize the banner.

Refer to the Widget Style options article for more information on all available Style options.

Background can be set up with an image using the image-fitting policy 

4 options are provided:

  • "Cover": the image is resized keeping the aspect ratio to fill the background container even if, by doing this resize, the image may overflow the background container. 
  • "Contains": the image is resized keeping the aspect ratio so that the whole image is included in the  background container (no overflow)
  • "Fill": the image is resized to fill the background container without keeping the aspect ratio 
  • "None": the image is left unchanged.

 

NPS widget Styling Specificities

In the NPS widget, you will be able to preview the different steps of the widget. Depending on if you enabled (toggled) them or not in the content tab.

preview-nps.gif

The styling options will apply the same way to all components (text, button, container) in all steps. For example, if you style the scoring buttons with border-radius, it will be applied to the same way to the "Send" button in the open ended question step.

If you don't toggle open-ended question and thank you message, you will not see a "Preview" group in the Style tab. As there will remain only one step: the score step (which you will view immediately).

As you may have seen in our examples at the beginning of this article, you can customize a lot an NPS widget rendering by adding extra CSS. You can hide some scores (but this will deeply impact the reporting results/reliability), display a background image, re-order components, replace scores with images... All that through the "Add CSS" Feature.

custom-nps.gif

In order to do this the most proper way, don't forget to set your default styling completely off. This will remove all the CSS we apply to the NPS widget. You can do this in the Style tab by toggling "Custom".

custom-nps-toggler.gif

 

Conditions tab

Select the Triggering and Recurrence options you want to apply to the Promotional Banner widget. 

 

NPS Report

Once you have collected some scores and feedback, you can view in the dedicated report tab, your NPS report.

You will be able to access it through the Reporting, with a click on the "NPS" tab.

 

nps-report.gif

In this report, you will be able to:

  • A top card with your global average NPS score
  • View the distribution of detractors, passives, promoters (per variation (useful if you implemented an NPS widget in more than one variation)). Each block will display the NPS question (that you may have customized in each variation, just to test or the same question but in variations with different modifications).
  • For each variation, you will be able to download a .CSV file of the collected NPS scores and feedback with the following columns: npsFeedback, npsScore, url, date
  • View a last 10-days graph of the trend of your global NPS score (here again, variation-based). For each day, you will have a popover with the daily NPS score
  • Browse (and filter) verbatims per keyword, variation and date range - the rows are orderable by date and by score (ascending and descending)

Spotlight

Introduction

With Spotlight, you can provide new and engaging navigation options by highlighting selected products or product categories, as determined by you.

Spotlight is seamlessly integrated into your website as a banner, similar to our other widgets. The banner consists of customizable badges known as "Highlights," which allow you to feature an image, a title, and a redirect address.

 

Layout tab

 

The layout configuration for spotlight is similar to the banner one. 

2023-06-08_10h19_01.png

Layout

 

We offer three different layouts:

  • top banner
  • bottom banner (by default)
  • free placement (which allows you to place the widget wherever you want in the page flow)

Layouts are natively responsive.

 

Layer

 

Layer Position (z-index)

 

26.png

 

Suppose you've selected the "modal", "top banner" or "bottom banner" layout. In that case, you can define the position of the widget on the z-axis in order to manage the widget position: above everything, below everything, or precisely fine-tuned.

Please read the dedicated article on this topic: z-index article.

 

Content tab

The "Content" tab in the Spotlight widget settings allows you to define and manage the various Highlights that compose the widget. Each Highlight represents a badge that contains an image, a title, a redirect link, and a tracking name. This tab provides an intuitive interface for configuring and organizing your Highlights according to your preferences.

2023-06-08_14h11_33.png

 

. Each Highlight consists of specific elements that contribute to its appearance and functionality.

  1. Thumbnail: The image you upload will be displayed within the Highlight. It's important to note that depending on the style configuration, the image may be cropped to fit the designated area. To ensure optimal display, we recommend using images with appropriate dimensions and aspect ratios.

  2. Title: The title is positioned below the highlight and provides additional context for the Highlight. Keep in mind that the size of the text is limited by the size of the Highlight itself. Therefore, it is advisable to use concise and clear titles that effectively convey the intended message within the available space.

  3. Link: The redirect link determines the page or destination where visitors will be directed when they click on the Highlight. By defining the appropriate redirect link, you can guide visitors to relevant product pages, category sections, promotional offers, or any other desired destination on your website.

  4. Tracker Name: The tracker name field allows you to assign a specific name to track clicks on the individual Highlights. Tracking the clicks enables you to set them as campaign objectives or goals. By assigning custom tracker names, you can easily reference and identify these clicks within the page of goals or campaign tracking.

With these configuration options, you can fine-tune the content of each Highlight within the Spotlight widget.

 

Adding Highlights
To add a new Highlight, simply click the "Add a settings" button. This action creates a new panel where you can input the necessary details for the Highlight as described above.

 

2023-06-14_15h49_40.png

 

Reorganizing Highlights
To reorder the Highlights, the interface provides dedicated buttons for easy rearrangement.

 

2023-06-14_15h53_30.png

 

For added convenience, highlights control panels can also be moved directly into their graphics container. Simply click on a panel and drag it above or below another panel to directly reorganize the widget's highlights.

Deleting Highlights

If you find that an extra Highlight has been added or you wish to remove a previously configured Highlight from the widget, simply click on the cross icon located within the configuration panel of the respective Highlight. This action will instantly remove the Highlight from the widget, ensuring that it is no longer displayed to your website visitors.

 

Style tab

The "Style" tab in the Spotlight widget settings allows you to customize the visual appearance of both the widget banner and the individual Highlights. 

 

Common Style Configurations

For elements shared with the widget banner, the style configurations remain the same. You can define the following:

  • Container: Adjust the margin, background color, and other properties related to the overall container of the widget.
  • Border: Specify the border width, color, and other attributes for the widget container.

Highlight Styling

Within the "Style" tab, a dedicated section is provided to style the individual Highlights.

 

Here, you can configure the following aspects:

  • Highlight Size: Define the size of the Highlights using viewport width (vw) as the unit, representing a percentage of the screen width
  • Highlight Spacing: Set the spacing between the Highlights, also using viewport width (vw) as the unit
  • Border Thickness : Customize the width of the outer border surrounding each Highlight
  • Border Color : Customize the color of the outer border surrounding each Highlight
  • Border Radius: Adjust the border radius to alter the shape of the Highlight, ranging from rounded to square
  • Inner Border width: Specify the width of the inner border, which forms the graphical area between the outer border and the Highlight image
  • Inner Border color: Specify the color of the inner border
  • Text Styling: Configure the text color, font, style, and size within each Highlight
  • Alignment: Choose from six alignment strategies:
    • Left Aligned: Aligns the Highlights to the left, maintaining their order
    • Center Aligned: Aligns the Highlights at the center, preserving their order
    • Right Aligned: Aligns the Highlights to the right, retaining their order
    • Space Evenly: Equally distributes the available space within the banner among the Highlights
    • Space Around: Allocates equal space on the left and right of each Highlight, maintaining a balanced distribution
    • Space Between: Distributes the available space evenly between the Highlights, with the outermost Highlights touching the edges of the widget

Note: Please note that for the last three alignment strategies (Space Evenly, Space Around, and Space Between), which are based on adjusting the spacing between the Highlights, selecting any of these strategies will override the specific spacing value defined for the Highlights. In these cases, the widget will automatically calculate and distribute the available space based on the selected alignment strategy. This ensures consistent and optimal spacing between the Highlights, as per the chosen alignment option.

 

Condition tab

Select the Triggering and Recurrence options you want to apply to the Banner widget.

 

If you want to: edit, duplicate, rename, delete such a widget, please check the Widget Frequently Asked Questions article.

 

Was this article helpful?

/