Before-After Image Widget
Last updated
Was this helpful?
Last updated
Was this helpful?
The Before-After Image widget is part of the Special widget category. For more information on the widgets, please refer to .
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 a product
To 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”)
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.
The Before-After image widget has two available layouts:
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).
This option enables you to position the widget in a specific place in relation to an existing HTML element:
Click Select element.
On the page, select the element on which you want to hook the widget.
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.
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
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.
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.
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.
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.
Select the Triggering and Recurrence options you want to apply to your widget.