# Booking widget

The booking widget puts Cliento's online booking on your own website. Your visitors choose a
service and a time, enter their details and confirm, without leaving your page. The bookings land
in your Cliento calendar like any other.

You add it with one snippet of JavaScript and adjust it with settings in that same snippet:

- [Parameters](https://developers.cliento.com/docs/widget/parameters.md): which services and resources to show, the language, customer details
  filled in ahead, and more.
- [Validation](https://developers.cliento.com/docs/widget/validation.md): your own warnings and errors on the customer details step.
- [Tracking](https://developers.cliento.com/docs/widget/tracking.md): events for Google Tag Manager, Meta, TikTok and OpenAI pixels, automatic or your own.
- [Styling](https://developers.cliento.com/docs/widget/styling.md): colors and other styles, to match your site.

No website of your own? Use the ready-made [booking page](https://developers.cliento.com/docs/widget/booking-page.md) instead: nothing to
install, only a link to share.

Need something the widget cannot do? Build your own booking flow with the
[Widget API](https://developers.cliento.com/docs/widget-api.md). It is the API the widget itself runs on.

> **Widget builder**
>
> Rather not write the code by hand? Use the [widget builder](/docs/widget/builder): choose services,
> colors and tracking, see the result in a live preview, and copy the finished code.

## Add the widget to your page

Put this code where you want the widget to render.
You will find your unique id and widget code in Cliento (go to Admin > Onlinebokning > Bokningssida / Widget).

```javascript
<script>
(function(c,l,i,e,n,t,o){if(c.cbk){return;}c.cbk=function(){
c.cbk.p.push(arguments);};c.cbk.p=[];e=l.createElement("script");e.async=1;
e.src=i;l.head.appendChild(e);n=l.createElement("div");n.id="cliento-booking";
t=l.getElementsByTagName("script");o=t[t.length-1];o.parentNode.insertBefore(n,o);
})(window,document,"https://cliento.com/widget-v3/cliento.js");
cbk("id", "[ENTER ID FOR ACCOUNT]");
</script>
```

The `id` parameter identifies one Cliento account, which is one location of a business.
To include several locations in the same widget, pass their ids as an array.

```javascript
cbk("id", ["ACCOUNT 1", "ACCOUNT 2"]);
```

With several ids, the widget starts with a
step where the user selects a location.

To skip this step, set the parameter `mergeLocations` to `true`.
The widget then starts with the services, merged from all the locations.

```javascript
cbk("mergeLocations", true);
```

## VIP-booking

In VIP-booking mode the widget shows one specific resource only.
There is no step for choosing a resource.
The resource can be booked there even when it is not open for online booking otherwise.
In order to do this the VIP-booking feature must be enabled for the resource.
You will find this setting in Cliento (go to Admin > Resurser and the section VIP-bokning).

Then set the parameter `resourceHash` to the hash id of the resource to show in the widget.

```javascript
cbk("resourceHash", "[HASH ID]");
```

## Example code

The following example is the widget code for one account. It adds two things:

- a service filter that keeps the services priced above 0
- an `onCompleted` function that logs the booking details to the console

```javascript
<script>
(function(c,l,i,e,n,t,o){if(c.cbk){return;}c.cbk=function(){
c.cbk.p.push(arguments);};c.cbk.p=[];e=l.createElement("script");e.async=1;
e.src=i;l.head.appendChild(e);n=l.createElement("div");n.id="cliento-booking";
t=l.getElementsByTagName("script");o=t[t.length-1];o.parentNode.insertBefore(n,o);
})(window,document,"https://cliento.com/widget-v3/cliento.js");
cbk("id", "1uAKYvE7mWcnxxdMuixis");
cbk("serviceFilter", function(service) {
  return service.minPrice > 0;
});
cbk("onCompleted", function(booking) {
  console.log("Booking completed", booking);
});
</script>
```

For more information about possible parameters and settings, please see the [Parameters](https://developers.cliento.com/docs/widget/parameters.md) section.