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