All Collections
Getting started...
Integration on your website
How to integrate bookingkit into your own website
How to integrate bookingkit into your own website

2-Minute-Website integration. That's how you integrate your bookingkit widget on your site:

Björn Blankenhagen avatar
Written by Björn Blankenhagen
Updated today

With bookingkit you can easily sell your experiences online on your own homepage! To do this, you just need to insert two lines of code in your existing website, and a full view of your experiences with booking and payment options will be integrated into your website.

In general, you have the option of integrating all experiences, or just several selected experiences, each with individual designs, under Sell > Widgets.

You can adapt the design and colors of the each individual insertion yourself, using our Configurator tool. If you are familiar with CSS, you can also make more in-depth adaptations.
These guidelines will tell you everything you need to know:

Include all or individual experiences

All experiences, and individual experiences, are activated for direct website integration as a standard feature. If you would like to integrate all of your experiences, or just individual offers into your homepage, simply click on the button “Insert in website”.

The first thing you can do in this menu is to configure the language settings. We recommend that you use Automatic language recognition, so that the widget will automatically adjust to the language of your customer’s browser. Then, you can copy the HTML code, and insert it at the appropriate point on your homepage. Your customers will be able to book online straight away!

And this is what lists of experiences look like for your end customer in the frontend, and also the detailed view of an individual Experience:

Create and include individual lists of experiences

If you wish to create individual lists including several experiences, this is quick and simple to do. Under “Create a new widget” you just need to click under “List of experiences” on the “Create new” button.
As the next step, you can deactivate individual experiences and also change the order in which they are shown. If you want to change the colors, you can either select from existing designs, or set up a completely new one. Our tutorial explains how to do this step by step:

Calendar Widget

If you would like to offer your customers an overview of all your Experiences and dates in a calendar, you can easily create a new Calendar Widget under Sell > Widgets. Setting it up is similar to a regular widget, and you can create various settings, for instance display free places or the name of the experience on the picture.

Your end customers will be happy to see a really special and clearly presented display:

Global Widget

The global widget is exactly what you need if you want the conversion rate for your Homepage to take off! Give your customers the opportunity to book at any time and from anywhere on your website. Anywhere where your standard bookingkit widget is not integrated, you can let us arrange to implement a Book Now button. This links directly to your offer, and you will therefore convert even more visitors to your website into paying customers.

This button provides the link to your whole available offer, and your customer can book immediately. If your customer closes the shopping basket beforehand, they will see it displayed on the lower edge of the screen.

To get a global widget, please ask for it during your onboarding or send us a message via chat. Our Support team will send you the code for integrating the global widget in your website.

The best way is to integrate the HTML code which we sent you in every sub-page in which bookingkit is not yet integrated. What is important is that you embed the code as an HTML element in your website.

This is what it looks like when live on your website:

Configure your widgets

If you click on “Settings”, you can work on your existing lists of experiences at any time:

Something worth knowing

  • If you change the design of an existing widget, and save it, the change will of course also affect the experiences you have already integrated.

  • It is only possible to integrate one bookingkit experience per HTML page.

  • You'll also find a helpful interactive Tutorial directly under Sell > Widgets.

  • Tip: To achieve more bookings via your website, a visitor should land on the bookingkit page as quickly as possible, so that he can make a booking there. It’s therefore recommended that you include the code in as prominent a position on the page as possible and also create a button or a tab called "Book Now" and "Vouchers".

Did this answer your question?