Before and After Slider Widget — Add It to Your Website

Overview

What Before and After Slider does

Before and After Slider is an embeddable widget you drop into any website with a single snippet of code. Showcase transformations with a draggable before/after image comparison. It runs in its own isolated frame, so it can never clash with your site's own styles or scripts, and it resizes itself to fit wherever you place it.

Before and After Slider keeps itself up to date: once the snippet is on your page, everything it displays is driven from your myNaturevista dashboard. Change a setting there and your live site reflects it straight away, without editing a single line of code again.

You control how it looks and behaves from 6 settings — before image, after image, before label, after label and more. Pick the options that match your brand, save, and the change is live.

Like every widget in the myNaturevista business & engagement collection, Before and After Slider is built to be fast and unobtrusive: it loads asynchronously so it never blocks your page, works on phones and desktops alike, and can be added to as many of your pages as you want.

Features

What you get

Set up in minutes — just add your before image, no coding required.
Works on any website — just paste one embed code.
Professionally designed to build trust with your visitors.

Setup

How to add Before and After Slider to your site

Three steps, about two minutes, no build tools.

1

Add the loader once

Paste a single <script> tag before your closing </body> tag. One loader powers every myNaturevista widget on the page, so you only ever add it once.
2

Place the widget

Drop a small <div> wherever Before and After Slider should appear — inside a column, a section, a sidebar, anywhere. It takes the width it is given and sets its own height.
3

Configure it in the dashboard

Choose the theme and options that suit your site from the dashboard. Before and After Slider picks them up on the next page load.

your-page.html

<!-- 1. Load the myNaturevista loader once per page -->
<script src="https://mynaturevista.com/w.js"></script>

<!-- 2. Place the widget wherever it should appear -->
<div data-menv-widget="before-after-slider"
     data-menv-key="YOUR_API_KEY"
     data-menv-instance="YOUR_INSTANCE_ID"></div>

Options

What you can configure

Everything below is set from your dashboard — never in your website's code.

Settings available for Before and After Slider
Option	Type	Values	Default
Before image	image	—	—
After image	image	—	—
Before label	text	—	Before
After label	text	—	After
Height (px)	number	150 to 800	350
Image displayFill looks more striking for promotions, but it can cut off a large part of the images. Avoid cropping shows portrait, square and badly fitting images whole, over a blurred copy of themselves; landscape images in a wide frame can still lose some of the top and bottom.	choice	Avoid cropping (show the whole image when needed) · Fill the frame (may crop the images)	whole

Use cases

Who uses Before and After Slider

Most visitors decide within seconds. Social proof, clear offers and an easy way to get in touch are what turn that first look into a customer.

Online stores

Build the confidence a visitor needs before they add to cart.

Local businesses

Show what you offer clearly, on the page people actually land on.

SaaS & services

Turn a marketing page into something that converts instead of just informs.

Freelancers

Present your work professionally without building a custom component for it.

FAQ

Before and After Slider — frequently asked questions

How do I add the Before and After Slider widget to my website?

Add the myNaturevista loader script once before your closing </body> tag, then place a <div> with your widget id, API key and instance id wherever Before and After Slider should appear. That is the whole installation — it works on any platform that lets you paste HTML, including WordPress, Shopify, Squarespace, Webflow and hand-written sites.

Do I need to know how to code to use Before and After Slider?

No. If you can paste a snippet of HTML into your site once, you are done. Everything after that — settings, content and styling — is handled from your myNaturevista dashboard, with no further code changes.

Can I customise how Before and After Slider looks?

Yes. Before and After Slider exposes 6 settings: before image, after image, before label, after label, height (px), image display. Change them in the dashboard and your live site picks the new values up on the next page load.

Does Before and After Slider work on mobile?

Yes. Before and After Slider is responsive: it takes the width of the container you place it in and adjusts its layout and height for phones, tablets and desktops.

Will Before and After Slider slow down my website?

No. The loader is asynchronous, so it never blocks your page from rendering, and the widget itself runs in an isolated frame that loads separately from your own content.

Can I use Before and After Slider on more than one website?

Yes. Each website you own gets its own API key and its own configuration, so the same widget can show different settings and content on each domain.

Which plans include Before and After Slider?

Before and After Slider is available on the following plans: Free, Starter, Business, Enterprise. You can change plan at any time from your dashboard.

More widgets