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

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

## Debug information

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

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

## Styling and colors

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

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

It is also possible to set specific styles using CSS variables.
For more information, see the [Styling](https://developers.cliento.com/docs/widget/styling.md) 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`.

```javascript
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.

```javascript
cbk("locale", "en");
```

> **Note**
>
> Time zone, currency and phone number prefix are settings of the account in Cliento, not parameters of the widget.


## Prefill customer info

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

```javascript
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.

```javascript
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.

```javascript
// 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.

```javascript
// 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.

```javascript
// 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.

```javascript
// 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.

```javascript
// 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.

```javascript
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`.

```javascript
// 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](https://developers.cliento.com/docs/widget/tracking.md) section.