Guide

How to Customise Your Booking Widget

Your booking widget is what your guests see when they reserve a table. Sully lets you customise its appearance so it feels like a natural part of your website — not a bolted-on third-party tool.

Where to Find Widget Settings

From your dashboard, go to Settings → Widgets. This is your central hub for all widget configuration, including the embed code and your direct booking link.

Changing Your Brand Colours

The widget supports full colour customisation. You can set:

  • Primary colour — used for buttons, selected states, and accents
  • Text colour — for headings and labels
  • Background colour — to match your website's background

Use the colour pickers or enter a specific hex code (e.g. #E85D04 for orange). The preview on the right updates in real time so you can see exactly how it'll look.

Embedding on Your Website

There are two ways to add the widget to your site:

Option 1: Embed Code (Recommended)

Copy the JavaScript snippet from the Widgets page and paste it into any page on your website where you'd like the booking form to appear. It works inside a <div> on any HTML page, WordPress post, Squarespace code block, or Wix HTML embed.

The widget is responsive — it adapts to the container width automatically, so it looks great on mobile, tablet, and desktop.

Option 2: Direct Booking Link

If you'd rather link to a standalone booking page, use the direct link provided on the Widgets page. This opens a full-page booking experience hosted by Sully. It's perfect for sharing on Google Business Profile, Instagram bios, Facebook pages, or email signatures.

Custom Fields on the Widget

Want to ask guests about dietary requirements, special occasions, or high chair needs? Head to Settings → Custom Fields and create the fields you need. These automatically appear on your booking widget as part of the guest form.

You can make fields required or optional, and choose from text inputs, dropdowns, or checkboxes.

Testing Your Widget

After customising, always test the booking flow yourself:

  1. Open your website (or the direct booking link) in a private/incognito window
  2. Select a date, time, and party size
  3. Fill in the guest details and submit
  4. Check that the confirmation email arrives
  5. Verify the booking appears on your Sully dashboard

If something doesn't look right, adjust your colours or layout and try again. Changes save automatically.

Pro tip

Keep your primary widget colour consistent with your restaurant's branding. Guests trust a booking form that looks like it belongs on your site.