V3 version
      Back to home
      1. Tablein self service portal
      2. V3 version

      Widget integration

      Tablein makes it easy to integrate reservation widgets into your website with just a few clicks. Our widgets are based on simple HTML code that can be copied and pasted directly into your website, helping you track reservations seamlessly across multiple channels.

      1. Navigate to the Widget Integration settings

      2. Create a new widget or choose an existing one to adjust

      The first widget in your list is your default widget. This widget is already available in your account. While it cannot be removed, you can fully customize its title, description, and icon.


      3. Add Title and Icon

      Start by giving your widget a short, clear title. This helps you manage it easily and track its performance across various channels, such as your website, social media platforms, or email newsletters.

      Next, choose an icon that visually represents your widget. This icon will be displayed in your reservation channel overview and analytics reports, allowing you to quickly identify and compare performance between widgets.

      (Optional) If your business has multiple locations, decide whether to display a single widget for all locations or allow users to select a specific location using a dropdown menu at the top of the widget. This ensures a tailored experience for your customers while keeping your settings streamlined.



       

      4. Select Widget Appearance
      Widgets are available in both Light and Dark modes. By choosing a theme, you’ll see a set of preselected colour options designed to match that mode. When you hover over a theme, a live preview will appear to help you visualise how the widget will look. If you like the overall colour scheme but want to customise it further, you can select the theme first, then scroll down to adjust individual colours. This allows you to fine-tune the appearance to match your brand perfectly.



       

      Note: We do not recommend changing system colors that are used for warnings or success messages, as this may affect clarity and user experience.

      Widget Background

      If you're integrating the widget directly into your website, you can skip this step — the background won't be visible in that setup.

      However, if you plan to use the widget as a standalone button with redirection, or share the reservation link via social media or ad campaigns, you may want to add a background.

      You can choose a background image and customize its appearance with the following options:

      • Black overlay – to tone down bright images

      • Blur effect – for a softer visual look

      • Image opacity – control visibility of the image

        • 0% – only the background colour is visible

        • 100% – full image is visible without overlay

      Widget Integration

      Once you've saved your settings, return to the widget list and reopen your newly created widget. A new section titled "Widget Integration" will now appear. This section includes:

      • Widget Language – Languages shown here are based on your Time and Language settings. Only selected languages will be available.

      • Widget Link – Use the Preview button to see how the widget will look or copy link to your browser.

      • HTML Code – For website embedding.

      • Show Booking Policy - If you’re integrating the widget into your website, the booking policy - if added - will appear before the contact section as part of the agreement flow. If you're sharing the widget via a direct link instead, the booking policy will be displayed in the sidebar. If the sidebar is disabled, the policy will appear within the main body of the widget itself. This ensures that your booking terms are always visible to clients, no matter how the widget is used.



      Using the Widget Link

      Copy the widget link if you plan to:

      • Add it to a reservation button on your website

      • Share it on social media

      • Include it in advertising campaigns

      You can also enable "Show Booking Policy" at the bottom of the integration page. This displays key information alongside the widget. To manage this content, go to Policies and terms Settings.


      Using the HTML Code

      Adding the Widget to Your Website
      You can embed the reservation widget into your website by following these steps:

      1. Open Your Website Editor
        Whether you're using WordPress, Wix, Squarespace, or another platform, open the page where you want the widget to appear.

      2. Add an HTML Block
        Insert an HTML block or section in the desired location on the page.

      3. Paste the Widget Code
        Go to your Tablein Widget Integration section, copy the provided HTML code, and paste it into the HTML block on your site.

      Best Practices

      • Recommended width: 400 px

      • Height: Ensure there’s enough vertical space for a smooth user experience, especially around the Contact Details section.

      • Spacing: Adjust margins or padding as needed to avoid unnecessary scrolling.

      If the widget’s colours don't match your website’s design, you can update them directly in the widget settings — changes take effect instantly.

      Need help with customization? Our design team is happy to assist! Contact us at support@tablein.com.

        Need Help?

        If you run into any issues or have trouble setting up your widget, feel free to reach out to our support team at support@tablein.com