# Configuration

Quickley Live Chat is configured via `window.QCHAT_CFG` object **before** the widget code, e.g.:

```markup
<script>
	window.QCHAT_CFG = {
		client_data: {
			"email": "testemail@anydomain.com"
		},
		color: "#009688",
		...
	}
</script>

<!-- Quickley.Chat -->
...
<!-- /Quickley.Chat -->
```

## `button_type`

Button display type. Possible values:

* `"hexagon"` - displayed as a hexagon button with Quickley logo
* `"horizontal"` - displayed as a button with text

Default value is `"hexagon"`.

```markup
<script>
	window.QCHAT_CFG = {
		button_type: 'horizontal'
		...
	}
</script>

<!-- Quickley.Chat -->
...
<!-- /Quickley.Chat -->
```

## `button_text`

Displayed text at the button with type `horizontal`.

```markup
<script>
	window.QCHAT_CFG = {
		button_text: 'Ask us a question!'
		...
	}
</script>

<!-- Quickley.Chat -->
...
<!-- /Quickley.Chat -->
```

## `position`

Chat button position. Possible values:

* `"left"` - at the bottom of the screen, on the left
* `"right"` - at the bottom of the screen, on the right
* `"center"` - at the bottom of the screen, on the centre. Available only for button with type `"horizontal"`

Default value is `"left"`.

```markup
<script>
	window.QCHAT_CFG = {
		position: "left"
	}
</script>

<!-- Quickley.Chat -->
...
<!-- /Quickley.Chat -->
```

## `button_margin`

Margin of the button from the window borders. Value is defined as a number or string without "px".

Default value for `left` and `right` is `10` and for `bottom` is `20`.

```markup
<script>
	window.QCHAT_CFG = {
  	postition: "left",
		button_margin: {
			left: 15,
			bottom: 15
		}
	}
</script>

<!-- Quickley.Chat -->
...
<!-- /Quickley.Chat -->
```

## `button_size`

Size of the button from the window borders. Possible values:

* `"s"` - small button `48x48`
* `"m"` - medium button `64x64`
* `"l"` - large button `72x72`

Default value is `"m"`.

```markup
<script>
	window.QCHAT_CFG = {
  	button_size: "s"
	}
</script>

<!-- Quickley.Chat -->
...
<!-- /Quickley.Chat -->
```

## `main_color`

Main color of the Chat color scheme. This option overrides value from settings.

Default value is specified in the chat configuration window.

```markup
<script>
	window.QCHAT_CFG = {
  	main_color: "#f77d05"
	}
</script>

<!-- Quickley.Chat -->
...
<!-- /Quickley.Chat -->
```

## `text_color`

Text color of the Chat color scheme.

The default value is determined automatically based on `main_color`.

```markup
<script>
	window.QCHAT_CFG = {
  	text_color: "#333333"
	}
</script>

<!-- Quickley.Chat -->
...
<!-- /Quickley.Chat -->
```

## `button_hidden`

The start visibility state of the button. If `true` the widget starts **hidden**. You can also show and hide the widget using `show` and `hide` methods.

Default value is `false`.

```markup
<script>
	window.QCHAT_CFG = {
  	button_hidden: true
	}
</script>

<!-- Quickley.Chat -->
...
<!-- /Quickley.Chat -->
```

## `container`

Allows embedded chat window into specific container. It takes an element identifier or a link to a HTML element as a value.

Default value is `undefined`.

```markup
<script>
	window.QCHAT_CFG = {
  	container: 'chat-container-id'
	}
	// or
	window.QCHAT_CFG = {
  	container: document.getElementsByClassName('chat-container')[0]
	}
</script>

<!-- Quickley.Chat -->
...
<!-- /Quickley.Chat -->
```

## `client_id`

Used to recognize users logged into your system regardless of the device or browser they use. To prevent access to other user's conversations the `client_id` parameter must be signed with **JSON Web Signature**. The key with which the identifier should be signed is displayed in the chat configuration window.

{% hint style="danger" %}
If value of `client_id` is **unsigned** or signed using a **wrong** sign key it will be **ignored**.
{% endhint %}

Below are examples of server side user ID signing.

{% tabs %}
{% tab title="PHP" %}

```php
<?php
use \Firebase\JWT\JWT;

$key = $_ENV["QCHAT_SIGN_KEY"];
$payload = "1";
$jwt = JWT::encode($payload, $key);
```

{% endtab %}

{% tab title="Node.js" %}

```javascript
import {JWS} from 'jose';

const key = process.env.QCHAT_SIGN_KEY;
const payload = "1";
const jwt = JWS.sign(payload, key);
```

{% endtab %}
{% endtabs %}

An already signed string must be passed to the chat configuration.

```markup
<script>
	window.QCHAT_CFG = {
  	client_id: "eyJhbGciOiJIUzI1NiJ9.ODM4.X-C5u0yzv2JfvkfauRYqmC3sQAOT_D-bnH-BK41JMK"
	}
</script>

<!-- Quickley.Chat -->
...
<!-- /Quickley.Chat -->
```

## `client_data`

Allows specify any information about visitors like email, phone or any kind of data. This info displays in the right panel in Quickley.

Default value is `{}`.

```markup
<script>
	window.QCHAT_CFG = {
  	client_data: {
  		name: "John Dorian"
    	email: "jd@thescrubs.com",
      "Any kind of information's title": "Any kind of information's value"
    }
	}
</script>

<!-- Quickley.Chat -->
...
<!-- /Quickley.Chat -->
```


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://developers.quickley.com/chat-api/configuration.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.