View as Markdown

Parameters

Parameters adjust the widget: which services and resources it shows, its language, its colors, and more. You set each one in the widget code with the cbk(key, value) method. The widget reads them once, when it loads. They cannot be changed after that.

Debug information

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

cbk("debug", true);

Styling and colors

Change the widget's color theme with the style parameter. primaryColor is the base color of the theme.

cbk("style", {
  primaryColor: "#2F7DB3"
});

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

Custom CSS

The widget loads its own stylesheet automatically. To load a different file, use the css parameter. To skip loading any CSS, set this parameter to null.

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

Language and locale

The language of the widget is set with the parameter locale. Currently supported locales are Swedish (sv), Danish (da), Norwegian (nb) and English (en). The default language is Swedish.

cbk("locale", "en");

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: ""
});

Show all classes

If you only offer class bookings, set allClasses to true. The widget then always shows the list view with all classes, instead of the regular booking flow.

cbk("allClasses", true);

Services sort order

The widget shows services and service groups in the order set in Cliento.

When several accounts are merged with the mergeLocations parameter, it shows the service groups in alphabetical order instead.

In that case you can put some groups first with serviceSortOrder. Give it a list of words: the groups whose name contains one of them come first, in the order of the list. The other groups follow in alphabetical order.

// 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 to offer some services in a separate widget elsewhere on your site.

The serviceFilter parameter accepts a string, an array of strings or a function. With a string or an array, the widget shows only the service groups whose header matches one of the words.

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

A function is called with each service. Return true to show the service.

// 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 to offer some resources in a separate widget elsewhere on your site.

The resourceFilter parameter accepts a string, an array of strings or a function. With a string or an array, the widget shows only the resources whose name matches one of the words.

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

A function is called with each resource. Return true to show the resource.

// 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 in a widget for a specific event or a pop-up location.

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

Automatic tracking

The widget will automatically send purchase events to Google Tag Manager, Meta pixel, TikTok pixel and the OpenAI pixel, if they are present on the page. It also sends page view events to all of them except the OpenAI pixel.

The enableTracking parameter accepts a string or an array of these values:

  • GTM: Google Tag Manager
  • Meta: Meta pixel
  • TikTok: TikTok pixel
  • OpenAI: OpenAI pixel

All of them are enabled by default. To disable all automatic tracking, set this parameter to null.

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

To do the tracking yourself, disable the automatic tracking and send your own tracking from the widget's events. For more information, see the Tracking section.