Widgets are your online booking engines. Embedding the booking engines relies on iFrames that are added to your website's source code. To add a booking engine to your website you generate an embed code you then paste to your website. 

Below is an example of a Tours & Activities booking engine widget.

The booking process

The Tours and Activities booking process is two or three steps, the 3rd step being optional.

Step 1 - Time selector

In the first step the customer selects the date and time for the activity. The widget for this step is called  Activity time selector

Step 2 - Checkout

The second step is called Checkout and allows the customer to choose a payment method for their purchase. 

In the checkout step, you can collect  payments from your customer. The process can be done  by forwarding the customer to your payment provider's payment page to hand over the payment. You can also use a Server 2 Server setup also known as a Payment gateway to collect payments directly from within your checkout widget. 

The widget for this step is called Checkout.

Step 3 - Receipt (optional)

When your customer has successfully booked, you can redirect him to the redirect phase of your booking process. This step is optional, but if you want to use google e-commerce tracking to collect information about your sales for google analytics, this step is essential.

The widget used in this step of the booking process is called Booking receipt.

Embedding the widgets

There are a few things you need before you add the booking process to your website.

Generating embed codes

To create embed codes for your website navigate to the "Menu Icon in top left corner" then you select "Widgets" from the drop down list.


Click the Embed Widget link for the widget you want to embed. This will take you to a tool where you can configure the embedding settings for your booking engine.

Embed Widget Settings

Booking Channel - (Mandatory)
Select the booking channel for this booking engine. Booking channel is e.g. your website, or any other website where you might add your booking engine. What booking channel does is to track where your sales originate from.

Supplier -
(Mandatory)
Select the supplier who owns the product you are creating a booking engine for. That could be you, or any supplier you have an active contract with on marketplace.

Product - (Mandatory)
Here you select the product this booking engine is for. The product list updates, depending on which supplier you have selected.

Link to Affiliate (Optional)
What you can do in Bókun, is to produce a booking engine and send the code to someone else who can embed the booking engine to their own website. In that case you probably would like to track the commission the seller should get for selling your products. To do that you can create an affiliate in Bókun, then you can select the correct affiliate from this drop down list to link the affiliate to this booking engine.

Language (Optional)
Select the language the booking engine should be in. English is default. If you would like to create booking engines in other languages then you first have to activate the language and translate your content.

Currency (Optional)
Choose the currency your booking engine should be in. Your default currency will be the default setting here.

Protocol (Optional)
Allows you to use non-secure embedding. Please use this only if you know what you are doing. This is an advanced feature.

Automatically size the iframe to fit content (Optional)
Bókun's booking engines are platform independent and responsive. If you want to override the default size for iframes, you can do so. This is an advanced feature.

When you have set the parameters for the widget. Click The Generate embed code button to the right of the settings pane. The Embed code appears in the box below the button. This is the code you should copy and paste where the booking engine is supposed to be located on your website. 

To preview the widget before you embed it to your website you click the preview button below the code.

Did this answer your question?