> ## Knowledge Base Index
> Fetch the complete knowledge base index at: https://support.snapps.ai/sitemap.xml
> Use this file to discover available pages before exploring further.
> Pure-Markdown content can be obtained by appending a '.md' suffix to the content URLs listed in the sitemap (without the trailing slash).

# Before & After Widget

![](https://storage.crisp.chat/users/helpdesk/website/69fc757e32576400/image_9jpyv6.png)
The Before & After widget enables you to show two images, side by side, for an eye-catching and engaging visual comparison.

The widget includes a customizable slider to move between the two images.

To add the widget:

1. In the left panel, click **Widgets.**
2. Click and drag the Before & After widget into your site.

To learn more about adding widgets to your site, see Add Widgets.

**Content Editor**

To access the content editor:

1. Right-click the widget, and click **Edit Content.**
2. Click **+ Image** to add the before and after images.
3. Type labels for the images. To hide the labels, click the **eye** icon.
4. Type Alt text for the images.

**Design Editor**

To access the design editor:

1. Right-click the widget, and click **Edit Design.**
2. To customize the images and slider, click **Images & Slider.**
3. To customize the label style and text, click **Labels**.
         Make sure the design settings you define are correct per device. Settings such as spacing, image size and more are defined per device. For more information, see Edit by Device.

For information about design options that are not specific to this widget (for example, layout, style, or spacing), see Widget Design.

**Examples**![](https://storage.crisp.chat/users/helpdesk/website/69fc757e32576400/image_9i4fkv.png)