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

  • 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 navigating to WIDGET RESOURCES and click the name of the widgets you want to customise. Changes made for each widget are not re-usable for other widgets.

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

Make Customisation 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 customise 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 customisation 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 find resource references. Select the Widget Resource you want to apply, and click add.
Did this answer your question?