How to create a booking widget in embed mode

Learn how to create a booking widget that you can embed to the body of your website, add to social media or send to customers directly.

Jubrine Fortuno avatar
Written by Jubrine Fortuno
Updated this week

A booking widget is a tool that you can use to allow your customers to make bookings with your yourself.

Allow your customers to access your booking widget where ever they interact with your business, whether that be on your website, social media, emails or SMS.

🧐 What does embedded mean?

When a booking widget is embedded, it means that your customer will be able to view it on the main body of your website (compared to popover which takes the form of a book now button which reveals the booking widget once clicked on).

Embedded widget:
​


βš™οΈ How to create an embedded booking widget

  • Firstly click on Booking tools and select Manage booking widgets

  • Click on the Create new widget button

  • You will see that the widget is automatically in the embedded mode

  • Name your booking widget - this name is for your labelling purposes and will not show on your booking widget

  • Limit to a category or a service or a service tier - use this option to create booking widgets which offer only a selected category, service, or a tier (service tier filter only available for multi-tier services)

  • Limit to a resource or resource groups - create booking widgets which offer only specific resources

  • Allow resource and group selection- tick the box to allow customers to select the resource that is bookable.

  • Allow customers to make multiple bookings in one transaction- tick this box if you want to give customers the option to book multiple services, or multiple appointments for the same service within one transaction.

  • Click Save widget.

To change the colours of your booking widget, click on the colour box to choose from the colour picker or, if you have specific hex codes, paste or type them into the box below the colour picker.


πŸ”– How to add the widget to your website

  • Once the widget is created, you can copy the embed code:

  • Make sure that HTML snippet is highlighted in orange and copy the iframe code - the paper icon in the right hand corner of the black box will copy the code for you

  • Paste the iframe code into your website builder.

If you would rather use the popover mode, then click here to learn more.


πŸ“– Pre-filling booking widget in embed mode

It's also possible to pass data to the widget by pre-filling selected fields. Click here to learn more.


If you have any feedback we would love to hear it πŸ‘‚

Did this answer your question?