Saltar a contenido

Configurar Chat, avanzado

Obteniendo mi token para Chat

Para obtener una token de acceso, usted debe iniciar sesión en Desk como Administrador y luego dirigirse a la sección de Canales de Chat

De la lista de cuentas de chat disponibles, haga clic en el botónConfigurar de la cuenta que desea obtener el token. Dentro de la lista de parámetros, usted verá Token de autenticación.

Screenshot

Token única por chat

Es importante destacar que cada Chat posee su propia token de autenticación la cual estará ligada al dominio donde usted desee integrar un chat.

TalkCenter demo

Esta ducumentacion se refiere al siguiente tutorial. El siguiente documento nos permite usar la TalkCenterLib para controlar un chat personalizado.

La idea es poder utilizar el metodo en aplicaciones simples escritas en javascript, Angular o Ionic Framework.

Usa talkcenter.lib.js exponiendo el metodo open en el objeto TalkCenterLib. esto retorna una instancia de TalkCenterChat en el callback.

Ejemplos de codigo

Setup

Separamos nuesta libreria en 3 componentes principales, para poder usar cache con talkcenter.manifest.js y talkcenter.vendor.js las que se mantendran por lo general sin cambios, y solo actualizar talkcenter.lib.js para tener cargas de chat mas rapidos. Ademas, recuerde agregar <meta charset="utf-8" /> para evitar errores al cargar TalkCenterLib.

1
2
3
4
5
6
7
<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>

Uso basico

Aqui tenemos un chat simple en un div que funciona como un contnedor del chat llamado con un boton.

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

Aqui tienes que cambiar USE_YOUR_TOKEN_HERE por tu propio token.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
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)
   });

 }

1
2
3
4
5
6
7
8
.chat-window-container{
  position: fixed;
  bottom:0px;
  height:500px;right:0;
  width:400px;
  display:none;
  border: 1px solid grey;
}

Uso avanzado

Aqui te mostramos como usar el callback de onAgentResponse. El callback se llamara solo en agent messages.

Aqui tenemos un chat simple en un div que funciona como un contnedor del chat llamado con un boton.

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

Aqui tienes que cambiar USE_YOUR_TOKEN_HERE por tu propio token.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
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)
   });

 }

1
2
3
4
5
6
7
8
.chat-window-container{
  position: fixed;
  bottom:0px;
  height:500px;right:0;
  width:400px;
  display:none;
  border: 1px solid grey;
}