Skip to main content

Set up the reservation widget

Customise and install the Tebi reservation widget on your website.

You can install the widget using a code snippet or the Tebi Reservations WordPress plugin. This article walks through every setting on the Widget page in the Back Office, in the order they appear.

Go to Back Office > Reservations > Settings > Widget to get started.

Tip: A live preview of the widget appears on the Widget page as you adjust settings, so you can see how each change looks to guests before installing.


Pick a color

Under Pick a color, choose the accent colour used throughout your reservation widget. This is the colour guests see on buttons and highlights inside the widget.


Language and widget button label

The widget can be shown in multiple languages. Switch between the language tabs (Nederlands, English, Español, …) to set:

  • Widget button label — the text guests see on the button that opens the widget. The default is Reserve a table.

The language marked (default) is shown when no language preference can be detected.


Location selection

If your reservation widget supports multiple locations, fill in the following so guests can pick the right one:

  • Location name — leave empty if the image already shows the name.

  • Location description — extra information for guests, such as the street address.

  • Location image — recommended size 800×500.

Note: For a multi-location widget, fill in these fields in each location's account. See Setting up a multi-location widget below for the full flow.


Allergies & dietary restrictions

Turn on Allow guest to specify restrictions to let guests pick from pre-defined allergies and dietary restrictions while reserving. Their choices are added as notes to the sale and to the prep station ticket.


Widget installation

This is the snippet you paste into the source code of your website.

  1. Click Select additional locations if you want this widget to cover more than one location.

  2. Choose the Widget language — leave on Automatic (recommended) to match each guest's browser language.

  3. Click Copy to copy the snippet.

  4. Paste the snippet into the source code of your website.


Setting up a multi-location widget

If you have multiple locations — each with their own Tebi account and reservations setup — you can combine them into a single widget that lets guests pick which location to book.

Before you start: Each location needs its own Tebi account with reservations already set up.

1. Fill in Location selection for each location

In each location's Tebi account, go to Reservations > Settings > Widget and fill in the Location selection fields:

  • Location name — what guests see when picking a location.

  • Location description — extra detail, like the address.

  • Location image — recommended size 800×500.

2. Combine locations in your primary account

In the account you want to act as the primary, go to Reservations > Settings > Widget:

  1. Scroll down to Widget installation.

  2. Click Select additional locations.

  3. Choose the locations you want to include from the dropdown.

Note: Tebi regenerates the embed code so it covers all the selected locations.

3. Update the snippet on your website

Because a new embed code is generated when you add additional locations, you need to replace the existing widget code on your website:

  1. Under Widget installation, click Copy to copy the new snippet.

  2. On your website, replace the existing Tebi widget snippet with the new one.

Tip: Guests using the combined widget will see a location picker before continuing with their reservation. The name, description, and image you set in Step 1 are what they see in that picker.


Custom links (optional)

Use this snippet under Optional: add custom links to your website if you want links elsewhere on your site (e.g. in a navigation menu) to open the widget directly.

Click Copy to copy the snippet, then add it where the link should appear.


Share link (optional)

Use the link under Optional: share link to share your reservation widget directly with guests — for example, in emails, social posts, or messages.

You can also embed the URL as an iframe on your website if you prefer not to use the script snippet.


WordPress plugin (optional)

If your website runs on WordPress, you can use the Tebi Reservations plugin instead of pasting code:

  1. Install the WordPress plugin Tebi Reservations in your WordPress admin.

  2. In the Back Office, under Optional: Add the Tebi Reservations plugin to Wordpress, click Copy to copy the token.

  3. Paste the token into the plugin settings in WordPress.


Widget Customisation

From Release 1.77, you can edit or hide the prepayment text on your reservation widget, and relabel "prepayment" to fit your business, handy if you use it as a full upfront price rather than a deposit, for example for tickets, shows, or experiences. This setting applies per service.

Where it lives

Back Office > Reservations > Settings > Availability > edit a service.

Need help?

If you need help installing or customising the widget, contact Tebi Support.

Did this answer your question?