Before and After Embed Slider
Embed a before and after slider in three steps
First, add your Before and After images using uploads or the image URL inputs. Start with photographs of the same scene and match the crop. A viewer dragging across a kitchen wall should see the wall stay in place, rather than jump sideways. Preview the pair before saving it; different camera angles are often better presented as separate images.
Second, set the labels, starting divider position, and available display options. Use descriptive labels such as Before cleaning and After cleaning when a bare date would be unclear. Sign in to save the slider and generate its embed code. This hosted feature stores the images you select so the comparison can load for visitors on another website.
Third, copy the appropriate code into a custom HTML or embed block on your website. Use the script option where custom scripts are permitted, or the iframe option where supported. Save and publish the page, then test it as a visitor on desktop and phone. A builder may show a placeholder in its editor even when the published page works.
Check the published result
Drag the handle through the full width, look for missing images, and check whether labels cover important details. Keep some surrounding text that explains the project and gives context for the two states. The slider shows the pictures; it cannot establish when the work happened or prove a claim about another project.
The saved slider can be edited under My sliders. After updating it, check an existing embedded page again. Hosted edits should appear without replacing the code, but a cached page or image may take a refresh. If the builder strips an entire script or iframe, use the platform-specific guide before changing the slider itself.
Embedding questions
Can I use it on WordPress or Squarespace?
Use a block that accepts the selected embed format. Whether scripts or iframes are allowed depends on your platform, plan, and account permissions. The WordPress and Squarespace guides below explain where to place the code and what to check when an editor removes it.
Is the hosted slider free?
Free accounts can save one hosted slider with a watermark. Pro removes the watermark and hosted-slider limit. The limit applies to saved sliders, not to how many times you preview a pair. See Pricing for current details.
Why is the slider blank on my page?
Check that you copied the complete snippet and published the page. If using image URLs, confirm the images are accessible to visitors rather than only to your signed-in account. Then check whether the builder permits the chosen script or iframe format.