TableBloom

Installing the Reservation Widget

The TableBloom reservation widget lets guests book a table directly from your website without leaving your page. Customize its appearance to match your brand, then add a single snippet of code to go live in minutes.

Step 1: Open Widget settings in the TableBloom dashboard

1

In TableBloom, go to Settings > Widget. This is where you configure the public-facing booking experience your guests will use. A live preview on the right updates as you make changes so you always know exactly how the widget will look.

  • Changes to widget settings take effect immediately — no redeployment needed
  • You can pause the widget temporarily without removing the embed code
  • The widget is fully responsive on mobile, tablet, and desktop

Step 2: Customize widget colors to match your brand

2

Use the color pickers to set the primary accent color, button color, and background. Enter your exact hex code or use the picker to visually select your brand color. You can also upload your restaurant's logo to appear at the top of the widget.

  • Choose between light and dark widget themes
  • Set the widget language if you serve international guests
  • Customize the confirmation message guests see after booking
  • Toggle which fields to show (e.g., special requests, marketing opt-in)

Step 3: Copy the embed code

3

Scroll down to the Embed Code section and click Copy Code. The embed snippet is a small JavaScript tag that loads the widget asynchronously — it won't slow down your page load time.

  • The code includes your unique restaurant ID — never share it publicly in an unsafe context
  • Two embed styles are available: inline (embedded in a page section) or floating button
  • The floating button option adds a persistent "Reserve a Table" button to all pages
  • WordPress users can use our TableBloom WP plugin for a no-code setup

Step 4: Paste the code into your website

4

Open your website's HTML editor or CMS and paste the embed code just before the closing </body> tag on the pages where you want the widget to appear. For the floating button version, add it to your global layout so it shows on every page.

  • WordPress: Add via Appearance > Theme Editor or a header/footer plugin
  • Squarespace: Paste in Settings > Advanced > Code Injection
  • Wix: Use Add > Embed > Custom Code
  • Shopify: Edit your theme's theme.liquid file

Step 5: Test by making a test reservation

5

Visit your website and make a test reservation through the widget. Verify the booking appears in your TableBloom dashboard under Reservations. Check that the confirmation email or SMS is delivered correctly with the right details.

  • Use a personal email address for the test so you receive the confirmation
  • Cancel the test reservation afterward to free the time slot
  • Test on both desktop and mobile to confirm the responsive layout looks correct
  • Check that the correct services and available time slots are displayed

💡 Tip: Place the widget in your header or homepage hero for maximum visibility. Guests looking to book often abandon if they can't find the booking option within the first few seconds. A prominent "Reserve a Table" button above the fold can significantly increase direct bookings.

Next Steps

Managing Tables
Set up your table layout, capacity, and availability
Managing Reservations
Create, confirm, and track guest reservations
Configuring Services
Create dining services with time slots and covers limits
Managing Staff
Add team members and control their access level