Skip to main content

Next Webshop Widgets

Floating widget setup

Lucia Bayon avatar
Written by Lucia Bayon
Updated yesterday

The contents of this article apply exclusively to our new floating widget. (Next webshop widget)

Introducing the Next Generation of Webshop Widgets!

Say hello to our brand-new webshop widgets, powered by cutting-edge technology and designed to take your booking experience to the next level. With our latest API integration, a sleek new design system, and a mobile-first approach, these widgets are optimized to perform beautifully on any device—especially smartphones.

Faster, smarter, and more customizable than ever, our widgets seamlessly fit your brand, deliver an intuitive user experience, and drive more conversions, no matter where your customers book.

Elevate your webshop with innovation built for the future. Discover the difference today!

Try today our new Floating widget.

→ demo website:

How to Get Started with the New Webshop Widgets

Getting started with our next-generation webshop widgets is easy and designed to ensure a smooth experience for your team. Follow these steps:


Step 1: Log Into Your Account


Step 2: Create A New Widget

  • click on "Create new".


Step 3: Choose Your Widget Type

Select the type of widget that best fits your needs:

  • Floating widget

    • Best for offering multiple experiences in one place

    • Ideal if you also want to sell vouchers

  • Experience Book Now

    • Best for a direct call-to-action

    • Use when linking to a specific experience (e.g., from a landing page or product page)

You can integrate multiple floating widgets on your website

Each widget can be configured to show different sets of experiences, tickets, or vouchers.


Step 4: Configure Your Widget

  • Choose the experiences

    • Choose which experiences should be available to sell tickets.

    • Choose which experiences should be available for voucher sales.

  • Use the real-time preview tool to ensure everything looks perfect.

  • Adjust multiple settings of the trigger button, including:

    • Icon - Choose an icon that fits your service.

    • Alignment - Decide where the button appears on the screen.

    • Label - Show or dismiss the text

    • Size - Medium or small? You decide.

    • Animation - Add motion for a more dynamic look.

    • Style - Pick between solid, outline, or minimal.

    • Colour - Match your brand colours with ease. You can modify them under "Palette" tab.

    • Placement - Position the button to be floating or sticky to the edge.

    • Automatic load - Choose whether the widget loads by default.

    • Default language - Set the initial language that the widget will use when a visitor opens it for the first time.


Step 5: Customise Widget's Colour Palette

You can customise your widget’s appearance using the palette configuration.

  • Choose a primary colour or select from the available themes for each mode.

  • The widget supports three display modes: Auto, Light, and Dark.

  • For accessibility reasons, only the primary colour can be customised directly. The background and text colours are automatically generated to ensure optimal contrast and readability.

  • To apply the same colour to the trigger button, simply change its setting from “neutral” to “primary” under the "Configuration" tab.


Step 6: Integrate with Your Platform

  • Copy the embed code provided after configuration.

  • Paste the code into your website or e-commerce platform.

    • For CMS platforms like WordPress, use an HTML block.

    • For other systems, consult their integration guides.


Step 7: Explore Advanced Settings (Optional)

  • For advanced customization options, check the developers guide: Bookingkit widget 3.0

  • Share this link with your Tech Team or Webmaster.


❓ Frequently Asked Questions (FAQ)

1. Can I adjust the border radius (rounded corners) of the widget button?
Yes! You can customise the button’s corner radius by modifying the global radius variables outlined in this documentation. This allows you to align the widget’s look with your website’s style.

2. Can I customise the CTA button?
Currently, the Call-to-Action (CTA) buttons can only be styled using the existing palette configuration (e.g., colours and theme).
Full customisation (like changing text or font) isn’t available yet — but we’re working on expanding these options in future updates.

3. Can I display a longer description for each experience in the widget?
At the moment, the Floating Widget does not support displaying experience descriptions. We're exploring ways to enhance content visibility while keeping the widget lightweight and user-friendly.

Did this answer your question?