TalkCenter Lib Demo Page

Overview

Welcome to the demo page. This will document the use of TalkCenterLib allowing us to control a custom launch of the chat.

The idea behind this is to use the method for mobile applications written in simple javascript, Angular or Ionic Framework.

It uses talkcenter.lib.js exposing open method on the TalkCenterLib object. This will return a TalkCenterChat instance on it's callback.

Code example

Setup

HTML

We separate our library into 3 main components, so we can cache talkcenter.manifest.js and talkcenter.vendor.js libraries which usually will remain unchanged and just update talkcenter.lib.js for faster chat loads. Also, remember to add <meta charset="utf-8" /> to avoid loading errors on TalkCenterLib.

<head>
    <!-- This is important to avoid loading errors -->
    <meta charset="utf-8" />
    <script type="text/javascript" src="https://app.talkcenter.io/v2/talkcenter.manifest.js"></script>
    <script type="text/javascript" src="https://app.talkcenter.io/v2/talkcenter.vendor.js"></script>
    <script type="text/javascript" src="https://app.talkcenter.io/v2/talkcenter.lib.js"></script>
</head>

Basic Usage

Here is a simple example with a div working as a chat container and a button to call the chat.

<body>
    <div class="chat-window" id="chat" style="display:none;"></div>
    <button id="button" onclick="openChat()">Open Chat</button>
</body>

Here you must change USE_YOUR_TOKEN_HERE for your own token.

 function openChat(){

   var talkcenterToken = 'USE_YOUR_TOKEN_HERE';
   var container = document.getElementById('chat');
   document.getElementById('button').disabled = true;

   TalkCenterLib.open(talkcenterToken, document.getElementById('chat'), true).then(function(chat){
     document.getElementById('chat').style.display = 'block';
   }, function(error){
     console.error("No token?: " + error)
   });

 }

.chat-window-container{
  position: fixed;
  bottom:0px;
  height:500px;right:0;
  width:400px;
  display:none;
  border: 1px solid grey;
}

Advanced Usage

Here we show how to use the onAgentResponse callback. The callback will be called only on agent messages.

Here is a simple example with a div working as a chat container and a button to call the chat.

<body>
    <div class="chat-window" id="chat" style="display:none;"></div>
    <button id="button" onclick="openChat()">Open Chat</button>
</body>

Here you must change USE_YOUR_TOKEN_HERE for your own token.

 function openChat(){

   var talkcenterToken = 'USE_YOUR_TOKEN_HERE';
   var container = document.getElementById('chat');
   document.getElementById('button').disabled = true;

   /* New Code */
   var agentResponseCallback = function (event) {
     console.log('Got agent message!');
   }

   TalkCenterLib.open(talkcenterToken, container, true).then(function(chat){
     chat.onAgentResponse(agentResponseCallback);
     document.getElementById('chat').style.display = 'block';
   }, function(error){
     console.error("No token?: " + error)
   });

 }

.chat-window-container{
  position: fixed;
  bottom:0px;
  height:500px;right:0;
  width:400px;
  display:none;
  border: 1px solid grey;
}