Cention Chat Widget 5.2.0

Introduction

This document describes embedding of Cention Chat Widget inside your webpages so that users of the website can chat with your agents. Conversations started from one page are resumed when the user navigate to other pages of your website, provided that the other pages also load the same chat widget.

Requirements

Jquery library is needed to run the chat widget.
The hostnames and ports combination of the websites that will serve the widget must be added to the Cross Origin Resource Control (CORS) whitelist in your Cention Contact Center system configuration.

You can embed the chat widget anywhere on your page by inserting the html code similar to the ones in the example below.

The following examples use https://cloud.cention.com/s/demo as the url where Cention Contact Center is hosted, and connects the chat to Cention area 1. You will have to replace them with the appropriate values for the example to work with your Cention Contact Center.

No customization

At the minimum the following must be specified when loading the widget:

Field	Description
areaId	The Cention area id (number) where the chat should be started in, or a list of area id (array of objects) for example, `areaId: [{id: 1, name: Area 1},{id: 2, name: Area 2}]`
CentionBaseURL	Global javascript variable. This is the url where your Cention Contact Center is hosted.

Example - no customization

<script type="text/javascript" src="https://cloud.cention.com/s/demo/cention/chat/js/jquery.min.js"></script>
<script type="text/javascript">var CentionBaseURL = "https://cloud.cention.com/s/demo";</script>
<script src="https://cloud.cention.com/s/demo/cention/chat/js/widget.js" type="text/javascript"></script>
<div id="cention-chat-container"></div>
<script type="text/javascript">
if(typeof CentionChat !== "undefined") {
  CentionChat("cention-chat-container", { areaId: 1 });
}
</script>

Full customization

Many aspects of the chat widget can be customized. The following example list all the customizable settings at their default values.

Example - full customization

<script type="text/javascript" src="https://cloud.cention.com/s/demo/cention/chat/js/jquery.min.js"></script>
<script type="text/javascript">var CentionBaseURL = "https://cloud.cention.com/s/demo";</script>
<script src="https://cloud.cention.com/s/demo/cention/chat/js/widget.js" type="text/javascript"></script>
<div id="cention-chat-container"></div>
<script type="text/javascript">
if(typeof CentionChat !== "undefined") {
	CentionChat("cention-chat-container", {
		translation: {
			// {CHAT_I18N_KEYS} DO NOT REMOVE
		},
		css: {
			// CUSTOM_CSS
		},
		text: {
			// CUSTOM_TEXT
		},
		ui: {
			// CUSTOM_UI
		},
		hooks: {
			// CUSTOM_HOOKS
		},
		areaId: 1
	});
}
</script>

Chat config. guide

Screenshot given is the guide to the certain config setup

Questions

If you have any questions regarding the customizations process feel free to ask your excellent support team at which you can reach by emailing support@cention.com.