Configuration

Quickley
Home Live Chat WhatsApp Business API Pricing
Search…
Welcome
Quickley Chat API
Installation
Configuration
Methods
Configuration
Quickley Live Chat is configured via window.QCHAT_CFG object before the widget code, e.g.:
1
<script>
2
	window.QCHAT_CFG = {
3
		client_data: {
4
			"email": "[email protected]"
5
		},
6
		color: "#009688",
7
		...
8
	}
9
</script>
10
​
11
<!-- Quickley.Chat -->
12
...
13
<!-- /Quickley.Chat -->
Copied!
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".
1
<script>
2
	window.QCHAT_CFG = {
3
		button_type: 'horizontal'
4
		...
5
	}
6
</script>
7
​
8
<!-- Quickley.Chat -->
9
...
10
<!-- /Quickley.Chat -->
Copied!
button_text
Displayed text at the button with type horizontal.
1
<script>
2
	window.QCHAT_CFG = {
3
		button_text: 'Ask us a question!'
4
		...
5
	}
6
</script>
7
​
8
<!-- Quickley.Chat -->
9
...
10
<!-- /Quickley.Chat -->
Copied!
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".
1
<script>
2
	window.QCHAT_CFG = {
3
		position: "left"
4
	}
5
</script>
6
​
7
<!-- Quickley.Chat -->
8
...
9
<!-- /Quickley.Chat -->
Copied!
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.
1
<script>
2
	window.QCHAT_CFG = {
3
  	postition: "left",
4
		button_margin: {
5
			left: 15,
6
			bottom: 15
7
		}
8
	}
9
</script>
10
​
11
<!-- Quickley.Chat -->
12
...
13
<!-- /Quickley.Chat -->
Copied!
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".
1
<script>
2
	window.QCHAT_CFG = {
3
  	button_size: "s"
4
	}
5
</script>
6
​
7
<!-- Quickley.Chat -->
8
...
9
<!-- /Quickley.Chat -->
Copied!
main_color
Main color of the Chat color scheme. This option overrides value from settings.
Default value is specified in the chat configuration window.
1
<script>
2
	window.QCHAT_CFG = {
3
  	main_color: "#f77d05"
4
	}
5
</script>
6
​
7
<!-- Quickley.Chat -->
8
...
9
<!-- /Quickley.Chat -->
Copied!
text_color
Text color of the Chat color scheme.
The default value is determined automatically based on main_color.
1
<script>
2
	window.QCHAT_CFG = {
3
  	text_color: "#333333"
4
	}
5
</script>
6
​
7
<!-- Quickley.Chat -->
8
...
9
<!-- /Quickley.Chat -->
Copied!
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.
1
<script>
2
	window.QCHAT_CFG = {
3
  	button_hidden: true
4
	}
5
</script>
6
​
7
<!-- Quickley.Chat -->
8
...
9
<!-- /Quickley.Chat -->
Copied!
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.
1
<script>
2
	window.QCHAT_CFG = {
3
  	container: 'chat-container-id'
4
	}
5
	// or
6
	window.QCHAT_CFG = {
7
  	container: document.getElementsByClassName('chat-container')[0]
8
	}
9
</script>
10
​
11
<!-- Quickley.Chat -->
12
...
13
<!-- /Quickley.Chat -->
Copied!
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
Node.js
1
<?php
2
use \Firebase\JWT\JWT;
3
​
4
$key = $_ENV["QCHAT_SIGN_KEY"];
5
$payload = "1";
6
$jwt = JWT::encode($payload, $key);
Copied!
1
import {JWS} from 'jose';
2
​
3
const key = process.env.QCHAT_SIGN_KEY;
4
const payload = "1";
5
const jwt = JWS.sign(payload, key);
Copied!
An already signed string must be passed to the chat configuration.
1
<script>
2
	window.QCHAT_CFG = {
3
  	client_id: "eyJhbGciOiJIUzI1NiJ9.ODM4.X-C5u0yzv2JfvkfauRYqmC3sQAOT_D-bnH-BK41JMK"
4
	}
5
</script>
6
​
7
<!-- Quickley.Chat -->
8
...
9
<!-- /Quickley.Chat -->
Copied!
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 {}.
1
<script>
2
	window.QCHAT_CFG = {
3
  	client_data: {
4
  		name: "John Dorian"
5
    	email: "[email protected]",
6
      "Any kind of information's title": "Any kind of information's value"
7
    }
8
	}
9
</script>
10
​
11
<!-- Quickley.Chat -->
12
...
13
<!-- /Quickley.Chat -->
Copied!
​