Skip to main content

How to Embed Baluu into Your Website

You can easily embed Baluu into your website.

Written by Ruta Jogminaite
Updated over a week ago

To get started, go to Embeds and select Components.


From there, you’ll see options to embed powerful booking components directly into your website. These components can be customised to match your design and allow customers to book without leaving your site.


Currently Available Embedding Options

We’re actively developing more components, but for now, you can embed:

  • Book Now button

  • Timetable

  • Review Display

  • Availability Calendar

  • Basket

  • Giftcards

Book Now Button

The Book Now option allows you to add a customisable booking button to your website. When a customer clicks the button, it opens an inline checkout flow where they can complete their booking.

How to Set Up the Button

  1. Choose which course or event the button will link to.

  2. You can customise how the button appears on your website.

  3. On the right side of the screen, you will see a Preview panel showing how the button will appear to customers.

    You can:

    • Switch between Desktop and Mobile views

    • Click the Book Now button in the preview to see the customer booking flow

    This allows you to test the experience from the customer’s perspective. However, the preview is only a demo, so you cannot proceed to payment.

  4. Embed Code
    Once you are happy with the design, copy the embed code and paste it into your website where you want the button to appear.

Timetable

The Timetable widget allows you to display your events and sessions in a calendar view directly on your website. This makes it easy for customers to see your upcoming availability and book sessions.

How to Add the Timetable to Your Website

  1. If you would like to change the appearance of the timetable, you can do this through Theme Customisation.

  2. On the right side of the screen, you will see a Preview panel showing how the timetable will appear to customers.

  3. Copy the embed code provided.

  4. Paste the code into your website where you would like the timetable to appear.

Once embedded, the timetable will display your live schedule in a calendar format, allowing customers to browse available sessions.

Availability Calendar

The Availability Calendar widget displays an interactive calendar showing open booking slots for your appointment-based events. This allows customers to easily see available times and book directly from your website.

Please note that this calendar works only for appointment-type events.

For more information on setting up appointment events, see How to Create an Appointment Event?

How to Add the Availability Calendar?

  1. You can customise the appearance of the calendar through Theme Settings.

  2. On the right side of the screen, you will see a Preview panel showing how the availability calendar will appear to customers.

  3. Copy the embed code provided.

  4. Paste the code into your website where you would like the availability calendar to appear.

Once embedded, customers will be able to view available appointment slots and book directly from the calendar.

Basket

The Basket widget adds a floating shopping basket to your website that allows customers to collect multiple bookings and pay for them together in a single checkout.

When customers add events, services, or products to their basket, the floating basket icon appears so they can review their items and complete the purchase.

How the Basket Works

  1. A customer adds items through your booking components (such as Book Now buttons, timetables, or calendars).

  2. A floating basket icon appears in the bottom-right corner of the page.

  3. When clicked, it opens a basket drawer showing all selected items.

  4. The customer can then proceed to checkout and pay for everything in one transaction.

Please note that the basket is automatically injected when any Baluu booking component (such as Book Now, Timetable, Calendar, or Gift Cards) detects that the basket feature is enabled.

How to Add the Basket?

  1. You can customise the appearance of the basket through Theme Settings.

  2. On the right side of the screen, you will see a Preview panel showing how the the basket will appear to customers.

  3. In most cases, you do not need to embed the basket manually, as it will appear automatically when customers add items through other Baluu widgets.

    If needed, you can also copy the embed code provided and paste it into your website where you want the basket to appear.

Review Display

Showcase your customer reviews and ratings to build trust and social proof on your website.

How to add Reviews to your website?

  1. Select display scope

  2. You can customise the appearance of the reviews through Theme Settings.

  3. On the right side of the screen, you will see preview panel showing how the the reviews will appear to customers.

  4. Copy the embed code provided.

  5. Paste the code into your website where you would like the availability calendar to appear.

Gift Card Button

The Gift Card Button allows you to add a gift card purchase option directly to your website. Customers can buy gift cards online, and the recipient will receive the gift card code via email.

Embedding the Gift Card Button

  1. Display Mode - You can choose how the gift card checkout appears on your website - popup or inline

  2. You can customise how the gift card button appears on your website.

  3. On the right side of the screen, you will see a Preview panel showing how the gift card button will appear to customers.

  4. Copy the embed code provided.

  5. Paste the code into your website where you want the button to appear.

Settings

In the Web Components section, you can find the Settings tab. Here you can configure global settings that apply to all web components across your website.

These settings help ensure a consistent appearance and behaviour for all embedded widgets, such as booking buttons, calendars, timetables, and other Baluu components.

Did this answer your question?