El SDK web está diseñado para funcionar en todos los navegadores modernos para computadoras y dispositivos móviles, pero admitimos oficialmente la versión más reciente de los siguientes navegadores:
Computadoras:
Chrome
Safari
Edge
Android:
Chrome
Edge
iOS:
Chrome
Safari
Edge
Activadores proactivos
Los activadores proactivos permiten iniciar el SDK web y enviar un mensaje a los consumidores de forma proactiva. Puedes configurar activadores de chat proactivos en Contact Center AI Platform. Para ello, navega a Configuración > Chat > Activadores de chat proactivo web.
Para obtener más información, consulta Activadores del SDK web proactivos.
Seguimiento de los usuarios
Si deseas identificar a los usuarios recurrentes en tu CRM o usar respuestas prediseñadas con la información de los usuarios, debes agregar identifiers a los usuarios.
El uso de respuestas estándar requiere una CRM.
La autenticación (actualización del identificador) se puede realizar al comienzo o a la mitad de una sesión. Para obtener más información sobre la autenticación durante la sesión, consulta Autenticación durante la sesión por API.
Identificador
Cuando se inicia una llamada o un chat, nuestro sistema se basa en un identificador para la autenticación del usuario. Puedes especificar el valor que prefieras para el campo del identificador durante la configuración. Si ya tienes un GUID (identificador único global) para tus usuarios, puedes usarlo para identificarlos. Sin embargo, si el identificador que tienes para un usuario es enumerable o contiene información de identificación personal (PII), debes aplicarle un hash para mejorar la seguridad.
Los identificadores deben agregarse en los siguientes lugares:
Pasa al backend en
getAuthToken()function getAuthToken() { // YOU SHOULD HAVE THIS KIND OF API ON YOUR SERVER return fetch('/auth/token', { headers: { 'Content-Type': 'application/json' }, method: "POST", body: JSON.stringify({ payload: { identifier: 'c727f2851b64b29761da170d0adee67a9a89c2d9960c8eee0ae53737413cfa4e', name: 'Test user', email: 'test@user.com', phone: '18008675309' } }) }).then(function(resp) { return resp.json(); }); }Se agrega a la carga útil cuando se codifica el JWT.
const express = require('express'); const jwt = require('jsonwebtoken'); const port = process.env.PORT || 3000; const secret = process.env.COMPANY_SECRET || 'secret'; const app = express(); app.use(express.json()); app.post('/auth/token', function (req, res) { const payload = req.body.payload; payload['iss'] = 'YOUR_COMPANY_NAME'; const iat = parseInt(Date.now() / 1000, 10); payload['iat'] = iat; payload['exp'] = iat + 600; const token = jwt.sign(payload, secret, { algorithm: 'HS256' }); res.json({ token }); }); app.listen(port, function () { console.log(`Listening at http://localhost:${port}`); });Agrega opciones adicionales en
authentication()new UJET({` // ... authenticate: function() { return getAuthToken().then({ token } => { return { token: token, user: { identifier: YOUR_UNIQUE_USER_ID, name: 'Test user', //optional, email: 'test@user.com', //optional, phone: '000000000' //optional } }; }); }, })
Transferencia de chatbot externo
Cuando transfieres un chat del agente virtual al agente, puedes anular el mensaje de saludo y pasar las transcripciones al agente completando el campo external_chat_transfer con los datos personalizados. El greeting_override admite el formato de Markdown.
ccaas.config({
customData: {
"external_chat_transfer": {
"greeting_override": "YOUR GREETING MESSAGE."
}
}
"agent": {
"name": "Agent Name",
"avatar": "https://ujet.s3.amazonaws.com/default-virtual-agent-avatar-1.png"
},
"transcript": [
{
"sender": "agent",
"timestamp": "2021-03-15 12:00:00Z",
"content": [
{
"type": "text",
"text": "Hello! How can I help you today?"
},
{
"type": "buttons",
"buttons": [
{
"label": "Create New Order",
"selected": false
},
{
"label": "Check Order Status",
"selected": true
},
{
"label": "Check Account Balance",
"selected": false
}
]
}
]
},
{
"sender": "end_user",
"timestamp": "2021-03-15 12:00:15Z",
"content": [
{
"type": "text",
"text": "Check Order Status"
}
]
},
{
"sender": "agent",
"timestamp": "2021-03-15 12:00:16Z",
"content": [
{
"type": "text",
"text": "I can help you with that, what's your order number?"
}
]
},
{
"sender": "end_user",
"timestamp": "2021-03-15 12:00:20Z",
"content": [
{
"type": "media",
"media": {
"type": "image",
"url": "https://ujet.s3.amazonaws.com/default-virtual-agent-avatar-1.png"
}
}
]
}
]
}
}
Nombre de la empresa
Elegir un name personalizado en lugar del nombre de la API de la empresa
ccaas.config({
name: 'ACME',
})
Desviación de chats
Cuando los agentes están no disponibles, puedes especificar opciones para manejar automáticamente la situación con desvíos.
Las opciones de desvío de chat se encuentran en el portal en Configuración > Chat > Desvíos web y para dispositivos móviles.
Puntos de acceso directo (DAP)
Puedes dirigir a un usuario directamente a una cola específica en la estructura de colas con puntos de acceso directo.
Para usar un punto de acceso directo, primero debes crear uno en el portal.
En el portal de CCAI Platform, haz clic en Configuración > Queue. Si no ves el menú Configuración, haz clic en Menú.
Activa Usar para el menú Web y ve a EDITAR / VER.
Selecciona cualquier cola de la estructura de colas.
Haz clic en Create direct access point.
El tipo de punto de acceso es General.
Agrega datos de entrada para el punto de acceso directo en el diálogo. Ten en cuenta que el campo
General Access Point Labelcorresponde alMenuKeyque se menciona en el siguiente paso.Haz clic en CREAR.
Una vez que se configura con el portal, puedes dirigir a un usuario a una fila específica con MenuKey:.
ccaas.config({
menuKey: 'vip'
})
ID del ticket
Si tienes un ticket existente para un consumidor, puedes recuperar el ID del ticket desde tu CRM y pasarlo al SDK web:
retrieveTicket().then(ticket => {
ccaas.config({ ticketId: ticket.id })
})
Selección automática de canales
Con preferredChannel, puedes seleccionar automáticamente un canal cuando un consumidor selecciona una cola en particular:
ccaas.config({
preferredChannel: 'chat'
})
Cómo inhabilitar los archivos adjuntos
De forma predeterminada, el SDK web permite que los consumidores suban fotos y videos durante una sesión de chat. Puedes inhabilitarlo con la siguiente secuencia de comandos:
ccaas.config({
disableAttachment: false
})
Cómo pasar datos personalizados
Cuando se inicia un chat, se pueden enviar datos personalizados con el objeto de chat. Los datos personalizados pueden ser cualquier cosa, desde el SO, la versión, la ubicación o cualquier otro dato que pueda ser relevante para el chat respectivo.
Puedes agregar datos personalizados sin firmar con la configuración de customData.
El formato de datos personalizado es similar a un objeto JSON y consta de key, label y value.
ccaas.config({
customData: {
k1: {
label: 'Version',
value: '1.1.0'
},
k2: {
label: 'Platform',
value: navigator.platform
}
}
})
Key: Es un identificador único para los datos. En el ejemplo anterior, k1 y k2 son claves.
Label: Es el nombre visible en la página del CRM.
Value: El valor de la etiqueta
Puedes agregar datos personalizados firmados con la configuración de signedCustomData:
ccaas.config({
signedCustomData: "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.n...."
})
El signedCustomData es una cadena de JWT con el algoritmo HS256.
SIGN_JWT(
algorithm='HS256',
secret=YOUR_COMPANY_SECRET,
payload={
custom_data: {
version: {
label: 'Version',
value: '1.0.0'
},
...
},
iss: 'YOUR TENANT',
iat: NOW,
exp: NOW + 3600,
}
)
Compatibilidad con varios idiomas
El campo lang se puede usar para controlar el idioma predeterminado en el lanzamiento y para admitir varios idiomas. Si se omite, el idioma predeterminado es inglés (en). El idioma predeterminado se puede configurar por página de tu sitio web. Si hay otros idiomas disponibles en tu arrendatario, se le proporcionará al consumidor la opción de cambiar a otro.
client.getMenus(key?: string, lang?: string)
El método .getMenus acepta un parámetro lang opcional. Cuando no se pasa el parámetro lang a .getMenus, este método usará la opción lang predeterminada.
Ejemplo:
const client = new Client({
// ...
lang: 'ja',
})
Se puede acceder a esta opción con la siguiente propiedad:
console.log(client.lang)
Se admiten los siguientes idiomas, que usan las abreviaturas indicadas en la siguiente tabla:
| Idioma | Abreviatura |
| Inglés | en |
| Inglés (Canadá) | en-CA |
| Inglés (Reino Unido) | en-GB |
| Inglés (Australia) | en-AU |
| Inglés (India) | en-IN |
| Español (España) | es |
| Español (México) | es-MX |
| Francés (Canadá) | fr-CA |
| Alemán | de |
| Japonés | ja |
| Coreano | ko |
| Italiano | it |
| Chino (simplificado) | zh |
| Chino (tradicional) | zh-Hant |
| Sueco | sv |
| Portugués | pt |
| Portugués (Brasil) | pt-BR |
| Finlandés | fi |
| Noruego | nb |
| Danés | da |
| Neerlandés | nl |
| Turco | tr |
| Vietnamita | vi |
| Tailandés | th |
| Árabe | ar |
| Checo | cs |
| Polaco | pl |
| Húngaro | hu |
| Ruso | ru |
| Hindi | hi |
| Rumano | ro |
| Croata | h |
| Ucraniano | uk |
| Tagalo | tl |
Para obtener más información sobre las traducciones, consulta la sección Personalización de mensajes y traducciones.
Cómo iniciar la IU web de forma programática
Este paso te permite abrir la IU web de forma programática con el método ccaas.start(options).
En algunos casos, es posible que desees que el consumidor haga clic en un botón adicional para abrir la IU del SDK web.
Ejemplo:
<button id="launcher">Click to open</button>
var ccass = new UJET({
companyId: "YOUR_COMPANY_ID",
host: "HOST_URL",
authenticate: getAuthToken,
});
ccass.config({disableLauncher: true})
var launcher = document.getElementById('launcher');
launcher.addEventListener('click', function() {
if (ccass.visible) {
ccaas.hide();
launcher.textContent = 'Click to open';
} else {
ccaas.show();
launcher.textContent = 'Click to close';
}
});
ccass.on('ready', function() {
launcher.textContent = 'ready to talk';
});
También puedes cerrar el widget con el método ccass.close() y quitarlo con el método ccass.destroy().
Cierre de la IU web de forma programática
Este paso te permite llamar a la función de devolución de llamada cuando el consumidor quiere cerrar el SDK web.
ccass.on('visible', function(visible) {console.log(visible) })
Obtén información sobre las sesiones de chat activas
Puedes obtener información sobre las sesiones de chat activas, incluido el ID del chat.
Consulta el siguiente ejemplo:
ccass.getOngoingChat()
Si hay una sesión de chat activa, se devuelven los metadatos del chat. Si no hay sesiones de chat activas, se devuelve null.
Puedes usar esta opción para evitar que los consumidores abran varias sesiones de chat ocultando el SDK de forma condicional si hay un chat activo en curso.
Realizar un seguimiento del estado de apertura o cierre entre varias pestañas o ventanas
Puedes sincronizar el estado de apertura o cierre del SDK entre varias pestañas o ventanas de tu sitio web. Usa el fragmento de código para hacer un seguimiento del estado del SDK en el almacenamiento local:
ccass.on('visible', (isVisible) => {
localStorage['ujetOpen'] = isVisible ? 'yes' : 'no'
})
if (localStorage['ujetOpen'] == 'yes') {
ccass.show()
} else {
ccass.hide()
}
Personaliza los diálogos de consentimiento para compartir pantalla y el botón de finalizar
plantilla
Puedes personalizar la plantilla del diálogo de compartir pantalla con esta opción. El valor predeterminado de template es el siguiente:
<dialog open class="cobrowse-dialog">
<h1>$title</h1>
<div class="cobrowse-dialog_content">$content</div>
<div class="cobrowse-dialog_footer">
<button class="cobrowse-dialog_allow js-cobrowse-allow">$allow</button>
<button class="cobrowse-dialog_deny js-cobrowse-deny">$deny</button>
</div>
</dialog>
Este template se usa para lo siguiente:
Diálogo de confirmación de la sesión
Diálogo de confirmación del control remoto
Diálogo de confirmación del dispositivo completo
Los parámetros de la plantilla se reemplazarán por el contenido de la opción messages.
confirmSessionTemplate
Esta opción se usa para personalizar el diálogo de confirmación de la sesión.
confirmRemoteControlTemplate
Esta opción se usa para personalizar el diálogo de confirmación del control remoto.
confirmFullDeviceTemplate
Esta opción se usa para personalizar el diálogo de confirmación del dispositivo completo.
sessionControlsTemplate
Esta opción se usa para personalizar el botón de controles de sesión. La plantilla predeterminada es la siguiente:
<button class="cobrowse-end js-cobrowse-end">$end</button>
Mensajes
Las plantillas anteriores contienen las siguientes variables de mensaje:
$title$content$allow$deny
Estas variables se reemplazarán por lo siguiente:
{
confirmSessionTitle: string; // $title
confirmSessionContent: string; // $content
confirmRemoteControlTitle: string; // $title
confirmRemoteControlContent: string; // $content
confirmFullDeviceTitle: string; // $title
confirmFullDeviceContent: string; // $content
allowText: string; // $allow
denyText: string; // $deny
endSessionText: string; // $end
}
Tenemos mensajes integrados de Compartir pantalla, por ejemplo, los mensajes para la configuración regional en:
{
"confirmSessionTitle": "Screen Share Session Request",
"confirmSessionContent": "Do you want to share your current screen with the agent?",
"endSessionText": "End Screen Share Session",
"confirmRemoteControlTitle": "Remote Access Request",
"confirmRemoteControlContent": "The agent would like to have access to your currently shared screen to further assist you. Do you want to allow this?",
"confirmFullDeviceTitle": "Screen Share Request",
"confirmFullDeviceContent": "Do you want to share your full screen with the agent? The agent will not be able to control anything on the screen.",
"allowText": "Allow",
"denyText": "Deny"
}