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 which you then paste on to your website. 

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

The booking process

The Tours and Activities booking process takes at most three steps for your customer, with the third 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 the checkout step where the customer can choose a payment method for their purchase. 

In this step, you can collect payments from your customer. The process can be done  by forwarding your 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  "Cog wheel" in the top right corner of the page, then select “Widget” from the side bar:

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 a booking channel does is to track where your sales originate from.

Supplier -
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 the 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 the default language. If you would like to create booking engines in other languages, 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.

After 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, click the Preview button below the code.

Related Articles: 

Did this answer your question?