Add the booking widget to your website

Included in all plansBooking widgetFor managers

Needs: Owner or Admin (to open the settings page); anyone with website access can paste the code

You put the booking widget on your own website by pasting a short piece of code. There are two ways to show it: as a floating bubble button, or embedded inside a page. You can also share a hosted booking page without touching your website.

Where to find it

Backoffice › Settings › Widget Management › Integration › Widget Embed Code

What it does

  • Bubble Mode – "Floating button in bottom-right corner". The button opens the booking panel on top of your page. Best when you want booking available on every page.
  • Embedded Mode – "Inline widget in page content". The widget appears where you paste the code, for example on a "Reservations" page.
  • Hosted page – the Open in New Tab button above the preview opens your widget on its own 10Seat page. You can use that page address as a direct booking link (for social media or a link-in-bio). Locations Widget Page opens a full-page layout of the same widget.

Colors and launcher text load from your saved widget settings. When you change your branding later, you do not need to replace the code.

How to set it up

  1. Make sure the right location is selected in the header.
  2. Go to Settings › Widget Management and open the Integration group.
  3. Under Widget Embed Code, copy the Bubble Mode or Embedded Mode code (or Copy All).
  4. Paste it into your website:
    • Bubble: once, on every page (most site builders have a "custom code / footer code" setting).
    • Embedded: in an HTML or embed block on the page where the widget should appear.
  5. Keep the noscript "Powered by 10Seat" block that comes with the code. It is meant for search engines.
  6. Publish your site and test a booking.

How to open the bubble from your own button

Under Open from your own button (optional) you get a snippet that lets an existing "Book" button on your site open the bubble. Add the data-tenseat-open attribute to that button, or let your web developer call the open/close functions shown there. The bubble code must also be on the page.

You can add these to the address of a page that has the widget:

  • ?10seat_code=your-code – opens a specific experience (use the Marketing code of the experience).
  • 10seat_date=2026-12-24, 10seat_guests=4, 10seat_time=19:30 – pre-select a date (year-month-day), party size and time.

Good to know

  • One code works for one location. Each location has its own code.
  • For several locations on one site, use the multi-location widget (see the related article).
  • The code includes settings that stop page-speed plugins from changing it. Do not remove them.

Troubleshooting

The widget does not appear on my website The code was pasted in a text block instead of an HTML/code block, or a caching or "optimize JavaScript" plugin changed it. Paste it again in a code block and exclude it from script optimization. Clear the site cache.

The bubble appears twice or the page loads the widget twice The bubble code is pasted in two places (for example in the theme and on the page). Keep it in one place only.

My own "Book" button does nothing The bubble code is missing on that page, or the attribute was added to an element that is not the button. Check both.

The widget shows the wrong restaurant The code belongs to another location. Select the right location in the header and copy the code again.

Colors on my site don't match what I saved Save your changes with Save theme first, then reload your site. Browsers may show the old colors briefly from cache.