Fugte logo Fugte Website features, no developer needed
Get started
Before and After Slider widget

Notion embed guide

How to Add a Before and After Slider to a Notion Page.

Notion supports live embeds through its /embed block: paste a link, and the content renders inside the page. That makes adding a Before and After Slider to Notion one of the simplest embed workflows there is, as long as the widget lives at a hosted URL.

Start with this widget About the Before and After Slider
Live starter preview

Step by step

Embed the Before and After Slider in your Notion page.

01

Create the widget in Fugte

Start from the Before and After Slider starter, generate a variation with the built-in AI, or paste your own code.

02

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 and After Slider a stable hosted link and an embed snippet.

03

Type /embed in Notion

On the Notion page where you want the widget, type /embed, choose the Embed block, and paste the hosted link.

04

Resize and share

Drag the block's handles to size the Before and After Slider, then share or publish the page as usual. The widget stays interactive for viewers.

Good to know

Notion specifics worth planning around.

Embeds work on free Notion plans, in private workspaces, shared pages, and published Notion Sites.

The widget is sized by dragging the embed block handles: set a height that fits the content to avoid inner scrollbars.

Teammates can move or delete the embed block, but the widget itself is edited in the widget editor, so nobody can break it from inside Notion.

The link stays stable: edits made in the widget editor show up on the Notion page automatically.

This widget

What the Before and After Slider needs from the embed.

The section above applies to anything you put on a Notion page. This part is specific to the Before and After Slider.

Each comparison is a 16:9 image with a caption under it, so the height follows the width you give the Notion box, multiplied by however many pairs the widget holds. Work out the box from the widest point you want the photos to be, then check that the last caption is not cut off.

Width is doing more work here than on most widgets. The whole point is detail in two photographs, and a 16:9 frame squeezed into a narrow column takes that detail with it. This is a widget to give the full content width to.

Both photos are served at whatever size you upload them, and every visitor loads both. Resize them to roughly the width they will display at before uploading, or a pair of camera-original files becomes the heaviest thing on the page.

Ideas

Where the Before and After Slider fits.

Renovation and landscaping

A slider visitors drag to compare two photos, on your website or your Canva page.

Cleaning and detailing

A slider visitors drag to compare two photos, on your website or your Canva page.

Retouching and restoration

A slider visitors drag to compare two photos, on your website or your Canva page.

FAQ

Common questions.

Does the Before and After Slider work on public Notion pages?

Yes. Embeds render on pages shared to the web and on Notion Sites, and visitors can interact with them without a Notion account.

Do I need a paid Notion plan?

No. The /embed block is available on free Notion plans.

How do I update the Before and After Slider later?

Edit it in Fugte. The Notion embed points at the same hosted link, so every page showing the Before and After Slider updates without touching Notion.

More guides

Same widget, other platforms.

Canva

Add a Before and After Slider to a Canva website

Canva websites do not accept HTML or iframe code, but they do accept links. Add a Before and After Slider to your Canva page with a hosted Fugte embed, free to try, no code.

 Shopify

Add a Before and After Slider to a Shopify store

Add a Before and 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.

 WordPress

Add a Before and After Slider to a WordPress site

Add a Before and After Slider to WordPress with a Custom HTML block, no plugin required. Works with the block editor, classic editor, and page builders like Elementor.

 Webflow

Add a Before and After Slider to a Webflow site

Add a Before and After Slider to a Webflow site with the Embed element: one hosted snippet, editable later without republishing the site.

Related widgets

More media widgets for Notion.

Media

Add a Categorized Image Gallery to a Notion page

Categorized image gallery with modal preview and fast filtering.

 Media

Add a Hover To Reveal to a Notion page

Create a hover section that reveals what's behind it.

 Media

Add an Image marquee to a Notion page

Show trusted client and partner logos in a seamless, infinite horizontal scrolling track.

Try it

Put a Before and After Slider on your Notion page today.

Start free, customize the Before and After Slider without code, and embed it with one link. Free widgets show a small Fugte badge, which you can remove from this one for $9.99 once when you publish, with no subscription.

Start with this widget Browse all widgets