This article is referring to customization for our old widgets, not our new widgets located under the Online Sales Tools. Customization for the new widgets is located within the widget set up.

You can customize the look, feel and function of your booking process with CSS & JavaScript. It is possible to adjust your widget's colors and fonts via CSS and you can alter some functionality with JavaScript. 

If you need to add a booking engine to your website, here's more information how to add/embed a booking engine to your website.

  • Please note that doing this can break your booking process. 
  • Please test your changes thoroughly.

One-off changes vs. Re-usable code

You can edit each of your widgets by selecting the gear icon in the top right corner then you select “Widget Resources” from the side bar:

To create customization that can be applied to many widgets, and stored independently of the widget itself, use Bókun's widget resources.

Make Customization to one widget

At the bottom of the settings page for each widget, you'll find two input fields to enter custom code to change/customize the design of the widget.

Custom head is used to inject code into the <head> tag of your Iframe. This might be used for JS scripts or custom REL links.

Custom CSS/LESS is used to overwrite and add css selectors and change their properties.

Set up a widget resource

Setting up a widget resource that can be used across all your widgets requires the following steps:

  1. To create a re-usable widget resource, navigate to "WIDGET RESOURCES". Select "the name of your company" on the top bar and "Widget resources" from the drop-down list. 
  2. Create a new resource by clicking "Add".
  3. Select the type of customization you are creating.

Applying a widget resource

  1. To apply the resource to one of your widgets. Navigate to "WIDGETS". Select "the name of your company" on the top bar and "Widget" from the drop-down list. 
  2. Open the settings for the widget you want to apply the resource to.
  3. At the bottom of the page, you can find resource references. Select the Widget Resource you want to apply, and click Add.
Did this answer your question?