Create the widget in Fugte
Start from the Before/After Slider starter, generate a variation with the built-in AI, or paste your own code.
Step by step
Embed the Before/After Slider in your Webflow site.
Customize and publish it in Fugte
Text, colors, images, numbers, and options are no-code settings, so you can match your branding without touching code. Publishing gives the Before/After Slider a stable hosted link and an embed snippet.
Drag in an Embed element
In the Webflow Designer, drag an Embed element from the Add panel to where the widget should sit and paste the embed snippet into the code editor.
Publish the site
Save and publish. The Before/After Slider renders live on the published site; later content changes happen in the widget editor, with no republish needed.
Good to know
Webflow specifics worth planning around.
Webflow's custom-code Embed element requires a paid Webflow site plan. On free staging domains, you can link to the hosted widget page instead.
The embed snippet is a few lines, so it uses almost none of the Embed element character limit.
The widget is hosted and sandboxed, so it cannot conflict with Webflow interactions or custom code elsewhere on the page.
Content edits in the widget editor go live immediately, useful when a client wants copy changes but you do not want to republish the Webflow project.
This widget
What the Before/After Slider needs from the embed.
The section above applies to anything you put on a Webflow site. This part is specific to the Before/After Slider.
Ideas
Where the Before/After Slider fits.
Renovation and landscaping
Showcase the transformation!
Cleaning and detailing
Showcase the transformation!
Retouching and restoration
Showcase the transformation!
FAQ
Common questions.
Can I add the Before/After Slider on a free Webflow plan?
The Embed element needs a paid site plan. On free plans you can still add a link or button pointing to the hosted widget page.
Does the Before/After Slider count against Webflow CMS or code limits?
No CMS items are used, and the embed snippet is small. The widget itself is served from an external CDN, not stored in Webflow.
Can a client edit the widget without Designer access?
Yes, that is a common setup. The client edits text, colors, and offers through Fugte's no-code settings; the Webflow layout stays locked.
More guides
Same widget, other platforms.
Add a Before/After Slider to a Canva website
Canva websites do not accept HTML or iframe code, but they do accept links. Add a Before/After Slider to your Canva page with a hosted Fugte embed, free to try, no code.
Add a Before/After Slider to a Notion page
Add a Before/After Slider to any Notion page or Notion Site with the /embed block. Hosted, interactive, works on free Notion plans, no code.
Add a Before/After Slider to a Shopify store
Add a Before/After Slider to your Shopify store without installing an app or editing theme code: paste one hosted embed into a Custom Liquid section or page.
Add a Before/After Slider to a WordPress site
Add a Before/After Slider to WordPress with a Custom HTML block, no plugin required. Works with the block editor, classic editor, and page builders like Elementor.
Related widgets
More media widgets for Webflow.
Add a Categorized Image Gallery to a Webflow site
Categorized image gallery with modal preview and fast filtering.
Add a Hover To Reveal to a Webflow site
Create a hover section that reveals what's behind it.
Add an Image marquee to a Webflow site
Show trusted client and partner logos in a seamless, infinite horizontal scrolling track.
Try it
Put a Before/After Slider on your Webflow site today.
Start free, customize the Before/After Slider without code, and embed it with one link.