Before-After Image Widget

The Before-After Image widget is part of the Special widget category. For more information on the widgets, please refer to Widgets Set-up Guide.

 

Introduction

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.

Was this article helpful?

/