JavaScript code

Put this code where you want the JavaScript widget to render. You will find your unique id and widget code in Cliento (go to Admin/Webbokning/Guide).

<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 is a unique key for each Cliento account. It is possible to enter multiple keys to include more than one account in the same widget, using an array.

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

When multiple accounts are used, the widget will start with a step for the user to select account.

It is possible to skip this step, and instead show services merged from all accounts as the first step. To do this, set the property mergeLocations to true.

cbk("mergeLocations", true);

VIP-booking

The widget can be embedded in VIP-booking mode for a specific resource. 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 property resourceHash to the id for the resource you want to display in the widget.

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

Example code

The following example shows a widget code for an account, using a custom primary color, service filter and onCompleted function.

<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", "7DUdvNGJ5LXQK83UlWTJ1O");

cbk("style", {

primaryColor: "#2F7DB3"

});

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 section.