Parameters

Parameters can be added to the widget code with the cbk(key, value) method. Parameters will only be read once and can not be updated after the widget has loaded.

Debug information

If you have any issues with the implementation, enable debug mode to print logging to the console that might help you troubleshooting.

cbk("debug", true);

CSS and styles

Cliento will automatically link a CSS when the widget loads. To load another file than the default, use the css parameter. To skip loading any css, set this parameter to null.

cbk("css", "https://cliento.com/widget-v3/cliento.css");

It is also possible to set specific styles using CSS variables. For more information, see the Styling section.

Language and locale

Language in the widget can bet set using the parameter locale. Currently supported locales are Swedish (sv), Danish (da), Norwegian (nb) and English (en). The default language is Swedish.

cbk("locale", "en");

note

Some parameters are set in Cliento, such as time zone, currency and phone number prefix.

Prefill customer info

The form where customer data is collected can be prefilled by setting the customer parameter.

cbk("customer", {
  name: "Full Name",
  email: "email@gmail.com",
  phone: "+46812345678",
  pno: ""
});

Services sort order

The services and service groups are displayed using the sort order set in Cliento.

When multiple accounts are merged using the mergeLocations property, service groups are displayed in alphabetical order.

In this case it is possible to override the sort order priority for some or all service groups. Any groups not matching the sort order property are sorted alphabetically.

// Display service groups containing "stockholm" on top, then "göteborg"
// followed by "malmö". The rest of the groups are sorted alphabetically
cbk("serviceSortOrder", ["stockholm", "göteborg", "malmö"]);

Filter services

The services shown in the widget can be filtered, for instance if you want to split the booking of some services to a different place on your site.

The serviceFilter accepts either a string, an array of strings or a function. In the case of string or array, the widget will apply the filter on the service group header.

// Only show service groups matching any of the words "cut" or "dye"
cbk("serviceFilter", ["cut", "dye"]);

If the filter is set to a function, it will get a service as argument.

// Only show services where minimum price is more than 0
cbk("serviceFilter", function(service) {
  return service.minPrice > 0;
});

Filter resources

The resources shown in the widget can be filtered, for instance if you want to split the booking of some resources to a different place on your site.

The resourceFilter accepts either a string, an array of strings or a function. In the case of string or array, the widget will apply the filter on the resource name.

// Only show resources matching any of the names "victor" or "henric"
cbk("resourceFilter", ["victor", "henric"]);

If the filter is set to a function, it will get a resource as argument.

// Only show the resource with hashId 3V5R2Q
cbk("resourceFilter", function(resource) {
  return resource.hashId === "3V5R2Q";
});

Limit date navigation

A min and max date can be set to prevent navigation outside certain dates. For instance when setting up a widget for a specific event or popup location.

cbk("minDate", "2022-06-01");
cbk("maxDate", "2022-06-30");

Automatic tracking

The widget will automatically send page view and purchase events to Meta Pixel and Google Analytics, if they are present on the page.

The enableTracking accepts either a string or an array. Currently supported values are GTM and Meta. To disable all automatic tracking, set this parameter to null.

// Only enable automatic tracking for Meta Pixel
cbk("enableTracking", ["Meta"]);

To override the default implementation, you can disable the automatic tracking and implement custom tracking in the events. For more information, see the Events section.