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 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 -->
Displayed text at the button with type
horizontal.<script>
window.QCHAT_CFG = {
button_text: 'Ask us a question!'
...
}
</script>
<!-- Quickley.Chat -->
...
<!-- /Quickley.Chat -->
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 -->
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 -->
Size of the button from the window borders. Possible values:
"s"- small button48x48"m"- medium button64x64"l"- large button72x72
Default value is
"m".<script>
window.QCHAT_CFG = {
button_size: "s"
}
</script>
<!-- Quickley.Chat -->
...
<!-- /Quickley.Chat -->
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 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 -->
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 -->
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 -->
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
<?php
use \Firebase\JWT\JWT;
$key = $_ENV["QCHAT_SIGN_KEY"];
$payload = "1";
$jwt = JWT::encode($payload, $key);
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 -->
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 -->
Last modified 2yr ago