Configuration

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

<script>
	window.QCHAT_CFG = {
		client_data: {
			"email": "[email protected]"
		},
		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".

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

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

button_text

Displayed text at the button with type horizontal.

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

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

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

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

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

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

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

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

If value of client_id is unsigned or signed using a wrong sign key it will be ignored.

Below are examples of server side user ID signing.

PHP

<?php
use \Firebase\JWT\JWT;

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

Node.js

import {JWS} from 'jose';

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

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

<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 {}.

<script>
	window.QCHAT_CFG = {
  	client_data: {
  		name: "John Dorian"
    	email: "[email protected]",
      "Any kind of information's title": "Any kind of information's value"
    }
	}
</script>

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