Fugte logo Fugte Website features, no developer needed
Get started
Tab Component widget

Webflow embed guide

How to Add a Tab Component to a Webflow Site.

Webflow's Embed element accepts custom code, which makes adding a Tab Component straightforward, and because the widget is hosted, you can keep tweaking its content later without opening the Designer or republishing the site.

Start with this widget About the Tab Component
Live starter preview

Step by step

Embed the Tab Component in your Webflow site.

01

Create the widget in Fugte

Start from the Tab Component 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 Tab Component a stable hosted link and an embed snippet.

03

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.

04

Publish the site

Save and publish. The Tab Component 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 Tab Component needs from the embed.

The section above applies to anything you put on a Webflow site. This part is specific to the Tab Component.

This widget changes height while someone is using it: opening a row, switching a tab, or filtering down a list. Set the frame height to responsive on the editor's Iframe tab before you publish. A fixed height measured against the state it loads in will clip the expanded content or leave it scrolling inside the frame.

Check it at phone width before you call it done. A row that sits on one line on a laptop often wraps to three on a phone, and that is where a frame sized on a desktop runs short.

Tab panels are rarely the same length. The height this widget needs is the height of its longest panel, not whichever one happens to be showing when you size the frame.

Ideas

Where the Tab Component fits.

Features

Colorful, customizable CSS-only tabs component.

Services

Colorful, customizable CSS-only tabs component.

Product details

Colorful, customizable CSS-only tabs component.

FAQ

Common questions.

Can I add the Tab Component 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 Tab Component 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.

Canva

Add a Tab Component to a Canva website

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

 Notion

Add a Tab Component to a Notion page

Add a Tab Component to any Notion page or Notion Site with the /embed block. Hosted, interactive, works on free Notion plans, no code.

 Shopify

Add a Tab Component to a Shopify store

Add a Tab Component 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 Tab Component to a WordPress site

Add a Tab Component 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 content widgets for Webflow.

Media

Add a Before/After Slider to a Webflow site

Showcase the transformation!

 Media

Add a Categorized Image Gallery to a Webflow site

Categorized image gallery with modal preview and fast filtering.

 Media

Add a Hover To Reveal to a Webflow site

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

Try it

Put a Tab Component on your Webflow site today.

Start free, customize the Tab Component without code, and embed it with one link.

Start with this widget Browse all widgets