Seating Chart widget

Webflow embed guide

How to Add a Seating Chart to a Webflow Site.

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

Live starter preview

Step by step

Embed the Seating Chart in your Webflow site.

01

Create the widget in Fugte

Start from the Seating Chart 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 Seating Chart 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 Seating Chart 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 Seating Chart needs from the embed.

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

With Popup mode set to Photo or Search box, one panel waits behind a button and opens in a popup inside the widget's own frame. A frame that only fits the search card gives that popup no room, so set a Fixed height on the editor's Iframe tab that fits the photo. With Show both, everything sits on the page and the frame needs the full height of the card and the photo together.

Every guest is one tile, and the tile labels scale with the width of the frame, so a long list in a narrow column makes small tiles with names that are hard to read. Names on the tiles stay on one line and long ones are cut off. The full name shows on the flipped card and in the search result, but give this widget the widest spot on the page you have.

Everything in the guest list file goes into the published widget, including columns it never displays, so on a public widget anyone who can see the page can read the whole file. Keep it to names, tables, and seats, and on Basic or Creator set Who can view this widget to Passcode so the list only loads for guests who enter it.

Ideas

Where the Seating Chart fits.

Wedding receptions

Guests type their name on your wedding or event website and see their table and seat.

Welcome sign QR codes

Guests type their name on your wedding or event website and see their table and seat.

Planners and venues

Guests type their name on your wedding or event website and see their table and seat.

FAQ

Common questions.

Can I add the Seating Chart 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 Seating Chart 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.

Try it

Put a Seating Chart on your Webflow site today.

Start free, customize the Seating Chart without code, and embed it with one link.