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

      V3: 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 makes it easy to manage and helps you track performance across different channels like your website, social media, or newsletters.

      Next, select an icon to visually represent the widget. This icon will appear in your reservation channel overview and analytics reports, making it easier to identify and compare widget performance at a glance.



       

      4. Select Widget Colour
      By default, the widget uses Tablein's Basic colour theme.

      You can choose from the following options:

      • Basic Theme – available in both Light and Dark modes.


      • Explore a selection of pre-designed Colour themes, categorized by restaurant type and color palette. Each theme includes a preview on hover to help you find the perfect match for your brand.


      • Use Custom Colours
        If none of the prepared themes suit your brand, you can define your own widget colours.
        Customize every detail to match your unique style and preferences.

        ⚠️ 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.

      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