Guía de instalación del SDK web

En esta página, se explica cómo instalar y usar el SDK web de Contact Center AI Platform (CCAI Platform). Para ayudarte a comenzar, Google recomienda descargar y usar nuestros archivos de ejemplos de la versión 2 del SDK para la Web.

Antes de comenzar

  1. Incluye el cargador del SDK web de la plataforma de CCAI en tu cliente web.

    <script src="https://websdk.ujet.co/v2/loader.js"></script>

  2. Inicializa el SDK web de CCAI Platform con tu COMPANY_KEY.

  3. Inicializa la autenticación con tu COMPANY_SECRET usando tu código de backend.

Flujo de trabajo de instalación

Flujo de trabajo de instalación

Comenzar

En las siguientes secciones, se proporciona información para comenzar a usar el SDK web de CCAI Platform.

Inicializa el SDK web

Puedes inicializar el SDK web con la clave de tu empresa.

Obtén la clave de tu empresa

Para obtener la clave de tu empresa, sigue estos pasos:

  1. Accede al portal de CCAI Platform con credenciales de administrador.

  2. Haz clic en Menú y, luego, en Configuración > Configuración para desarrolladores.

  3. Ve al panel Clave y código secreto de la empresa y guarda el código en el campo Clave de la empresa.

Luego, puedes inicializar el SDK web con el método UJET(config) y el evento ujet.on('created', function). Proporciona el host de tu instancia de CCAI Platform, por ejemplo, myccaip.uc1.ccaiplatform.com.

// INITIALIZE WEB SDK
var ujet = new UJET({
  companyId: "YOUR_COMPANY_ID",
  host: "https://myccaip.uc1.ccaiplatform.com",
});

ujet.on('created', function () {
  ujet.authenticate(getAuthToken);
});

Como alternativa, puedes usar la opción de autenticación sin un evento creado:

var ujet = new UJET({
  companyId: "YOUR_COMPANY_ID",
  authenticate: getAuthToken,
  host: "https://myccaip.uc1.ccaiplatform.com",
});

donde getAuthToken() es una función que invoca un mecanismo de firma de JWT desde tu backend:

function getAuthToken() {
  // YOU SHOULD HAVE THIS KIND OF API ON YOUR SERVER
  return fetch('/auth/token')
    .then(function(resp) {
      // { token: '....' }
      return resp.json();
    });
}

Aquí, fetch() invoca un mecanismo de firma de JWT desde tu backend. Para obtener más información, consulta la API de Fetch de Mozilla.

Configura el SDK web para la navegación conjunta

La función de navegación conjunta es opcional y permite que un agente vea la pantalla de un usuario final y, de manera opcional, tome el control de ella. Para usar la navegación conjunta, debes proporcionar el dominio de navegación conjunta y la clave de licencia de tu instancia de CCAI Platform durante la inicialización del SDK.

Para configurar el SDK web para la navegación conjunta, sigue estos pasos:

  1. Para obtener el dominio de navegación conjunta y la clave de licencia de tu instancia de CCAI Platform, haz lo siguiente:

    1. Accede al portal de CCAI Platform con credenciales de administrador.

    2. Haz clic en Menú y, luego, en Configuración > Configuración para desarrolladores.

    3. Ve al panel Navegación conjunta y haz clic en el botón de activación para llevarlo a la posición activada.

    4. Guarda los valores en los campos Dominio de navegación conjunta y Clave de licencia.

  2. Para proporcionar el dominio de navegación conjunta y la clave de licencia durante la inicialización del SDK, incluye el siguiente código cuando inicialices el SDK web:

    var ujet = new UJET({
  // other options
  cobrowseOptions: {
    license: "LICENSE_KEY",
    trustedOrigins: ["CO-BROWSE_DOMAIN"],
    api: "CO-BROWSE_DOMAIN"
  },
  // other options
})

    Reemplaza lo siguiente:

    • LICENSE_KEY: La clave de licencia que guardaste en el paso anterior

    • CO-BROWSE_DOMAIN: El dominio de navegación conjunta que guardaste en el paso anterior

Para obtener más información, consulta Cómo configurar la navegación conjunta.

Inicializa la autenticación con el secreto de tu empresa

La función getAuthToken() debe llamar a tu API y codificar tu carga útil con tu COMPANY_SECRET.

A continuación, se muestra un ejemplo de firma de JWT con ExpressJS:

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 = {}
  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(`Listing at http://localhost:${port}`)
})

Puedes usar cualquier servicio de backend.

Política de seguridad del contenido

Si tu servidor de producción tiene una política de seguridad del contenido, agrega https://websdk.ujet.co/ a tus script-src y frame-src.

Compatibilidad con Internet Explorer 11

Para admitir Internet Explorer, se usa babel-polyfill en nuestro código. Si tu sitio web también usa babel-polyfill, no lo importes al SDK web, ya que usar la misma biblioteca de forma global y en el SDK web podría causar una excepción. Antes de importar el paquete, te recomendamos que agregues código para verificar esto y evitar que suceda.

Hacer un seguimiento de los usuarios

En el ejemplo anterior, no se realizará un seguimiento de los usuarios. Si deseas identificar a los usuarios recurrentes en tu CRM y usar respuestas prediseñadas con la información de los usuarios, debes agregar identificadores a los usuarios.

Para ello, debes agregar identificadores en los siguientes lugares:

  1. 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: '1800UJETSDK'
      }
    })
  }).then(function(resp) {
    return resp.json();
  });
}

  2. 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(`Listing at http://localhost:${port}`)
})

  3. 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 parámetro greeting_override admite el formato de Markdown.

{
  "external_chat_transfer": {
    "greeting_override": "Please hold while we connect you with a human agent.",
    "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": "txt",
            "text": "Ceck Order Status"
          }
        ]
      },
      {
        "sender": "aget",
        "timestamp": "021-03-15 12:00:16Z",
        "content": [
          {
            "type": "txt",
            "text": "Ican help you with that, what's your order number?"
          }
        ]
      },
      {
        "sender": "enduser",
        "timestamp": "021-03-15 12:00:20Z",
        "content": [
          {
            "type": "mdia",
            "media": {
              "type": image",
              "url": "https://ujet.s3.amazonaws.com/default-virtual-agent-avatar-1.png"
            }
          }
        ]
      }
    ]
  }
}

Chatea con datos personalizados sin firmar

Cuando se inicia un chat, puedes pasar datos personalizados con el objeto de chat. Los datos personalizados pueden ser el sistema operativo, el número de versión, la ubicación o cualquier otro dato que pueda ser relevante para el chat. Estos datos no están encriptados y, por lo tanto, no deben contener información de identificación personal (PII).

También puedes pasar estos datos personalizados a un agente virtual. Para obtener más información, consulta Agentes virtuales.

var ujet = new UJET({
  // other parameters
  customData: {
    version: {
      label: 'Version',
      value: '1.1.0'
    },
    platform: {
      label: 'Platform',
      value: navigator.platform
    }
  },
});

El formato de datos personalizado es similar a JSON. Cada campo de datos contiene una clave, una etiqueta y un valor. A continuación, se muestra un ejemplo:

{
  "k1": {
    "label": "Version",
    "value": "1.2.3"
  },
  "k2": {
    "label": "Dashboard",
    "value": "http://example.com"
  }
}

En este ejemplo, k1 y k2 son claves. label es una etiqueta en una página del CRM y value es el valor de la etiqueta.

Cómo evitar que se muestren datos personalizados

Puedes usar la propiedad invisible_to_agent con un objeto customData para evitar que se muestren datos personalizados firmados o no firmados en el adaptador del agente. En el siguiente ejemplo, se muestra la versión en el adaptador del agente, pero no se muestra la plataforma.

var ujet = new UJET({
  // Other parameters
});

ujet.config({
  customData: {
    version: {
      label: 'Version',
      value: '1.1.0'
      invisible_to_agent: true
    },
    platform: {
      label: 'Platform',
      value: navigator.platform
      invisible_to_agent: false
    }
  }
});

Cuando incluyes la propiedad "invisible_to_agent" : true con un objeto de datos personalizado, puedes esperar el siguiente comportamiento:

Para obtener más información, consulta Cómo ver los datos de la sesión en el adaptador del agente.

Propiedades de datos reservadas

Puedes enviar propiedades de datos reservadas a Contact Center AI Platform (CCAI Platform) como datos personalizados firmados cuando comienza una sesión. Para obtener más información, consulta Envía propiedades de datos reservadas.

A continuación, se muestra un ejemplo de las propiedades de datos reservadas en los datos personalizados:

  {
    "custom_data": {
      "reserved_verified_customer": {
        "label": "Verified Customer",
        "value": "VERIFIED_CUSTOMER_BOOLEAN": ,
        "type": "boolean"
      },
      "reserved_bad_actor": {
        "label": "Bad Actor",
        "value": "VERIFIED_BAD_ACTOR_BOOLEAN": ,
        "type": "boolean"
      },
      "reserved_repeat_customer": {
        "label": "Repeat Customer",
        "value": "REPEAT_CUSTOMER_BOOLEAN": ,
        "type": "boolean"
      }
    }
  }

Reemplaza lo siguiente:

  • VERIFIED_CUSTOMER_BOOLEAN: Es verdadero si consideras que este usuario final es un cliente legítimo.
  • VERIFIED_BAD_ACTOR_BOOLEAN: Es verdadero si consideras que este usuario final podría ser una persona que actúa de mala fe.
  • REPEAT_CUSTOMER_BOOLEAN: Es verdadero si determinaste que este usuario final se comunicó con tu centro de contacto anteriormente.

Inhabilita los archivos adjuntos

Puedes impedir que los clientes suban archivos adjuntos con la opción disableAttachment:

new UJET({
// ...
  disableAttachment: true
});

Con disableAttachment: true, no habrá un ícono de adjuntos en el área de entrada del chat, y los clientes no podrán arrastrar archivos al área de mensajes.

Desviación de chats

Cuando los agentes no están disponibles, puedes especificar opciones para controlar automáticamente esta condición en los chats web y para dispositivos móviles.

Las opciones de desviación de chat se encuentran en el portal de la plataforma de CCAI, en Configuración>Chat>Desviación web y para dispositivos móviles.

Desvío fuera de horario

El desvío fuera de horario es específico del centro de contacto o de la cola que se encuentra fuera del horario de atención. Para habilitar el desvío fuera de horario, haz lo siguiente:

  1. En el portal de CCAI Platform, en Configuración > Chat > Desviación web y móvil.

  2. Si la opción Desvío fuera de horario está desactivada, puedes habilitarla seleccionando la opción Desvío fuera de horario.

  3. Cambia la opción Allow Transfers para permitir transferencias a filas fuera del horario de atención para el siguiente comportamiento:

    • Los agentes podrán ver las siguientes filas como opciones para transferir en el adaptador de agente:

      • Todas las filas durante el horario de atención

      • Todas las filas que están fuera del horario de atención sin desvío habilitado y activo, y agentes conectados

      • Todas las colas que están fuera del horario de atención con un agente virtual asignado en el modo de disponibilidad las 24 horas

    • Los agentes no podrán ver los siguientes tipos de filas:

      • Todas las colas que están fuera de horario con el desvío fuera de horario habilitado

      • Todas las colas que están fuera del horario de atención con un agente virtual asignado limitado al horario de atención de la cola

Desviación por exceso de capacidad

La capacidad excedida se refiere específicamente a la capacidad actual del agente y al tiempo de espera actual de la cola a la que se asignó la sesión. Para habilitar esta opción, haz lo siguiente:

  1. En el portal de Contact Center AI Platform, en Settings > Chat > Web & Mobile Deflection.

  2. Si la opción Overcapacity Deflection está desactivada, selecciona el botón de activación Overcapacity Deflection para activarla.

  3. Establece el tiempo de espera en minutos que cambiaría el estado de la cola a sobrecarga.

    Este parámetro de configuración de umbral de tiempo también se usa para establecer la frecuencia con la que el usuario final verá el mensaje de sobrecarga.

Opciones de desvío

Es posible especificar las opciones disponibles para el usuario final cuando se produce el desvío.

Correo electrónico

Cuando se habilita la opción de correo electrónico, el usuario final puede ser redirigido a un correo electrónico. Cuando el usuario final establece una sesión de chat web o móvil fuera del horario de atención, se le pregunta si desea redactar un correo electrónico.

El comportamiento específico es el siguiente:

  • Dispositivos móviles: Cuando la desviación de correo electrónico está habilitada y se cumple el umbral de tiempo de espera estimado, cuando el usuario final presiona la opción de chat, se lo dirige a su app de correo electrónico predeterminada. La versión de la app y la versión de iOS o Android se insertan automáticamente en el cuerpo del correo electrónico, y el asunto es Asistencia para [ruta de menú seleccionada]. Como alternativa, es posible que se habilite el formulario de correo electrónico. Para obtener más información, consulta Formulario de correo electrónico integrado para SDKs web y para dispositivos móviles.

  • Web: Presenta una opción de correo electrónico a los usuarios finales. Cuando hagas clic en él, aparecerá un formulario de correo electrónico. Para obtener más información, consulta Formulario integrado de correo electrónico para SDKs web y para dispositivos móviles.

  • Keep Waiting (solo en la Web): Permite que el usuario final haga clic en una opción para seguir esperando.

Los diálogos de consentimiento de navegación conjunta permiten que un usuario final dé su consentimiento para una solicitud inicial de sesión de navegación conjunta, así como para una solicitud posterior de control remoto o de acceso completo al dispositivo. Cuando configuras el SDK web para la navegación conjunta, este proporciona diálogos de consentimiento y un botón para finalizar la sesión predeterminados. Sin embargo, puedes agregar campos opcionales al objeto cobrowseOptions que te permiten personalizar los diálogos de consentimiento y el botón de finalización de la sesión. Esto no solo te permite controlar el aspecto de estos elementos, sino que también te permite adaptar las declaraciones de consentimiento en los diálogos de consentimiento para que se ajusten a tus requisitos.

Aparece una declaración de consentimiento en un cuadro de diálogo de consentimiento. La declaración de consentimiento indica al usuario final qué comportamiento puede esperar de la experiencia de navegación conjunta y a qué da su consentimiento. Si planeas grabar una sesión de navegación conjunta, debes indicarlo en tu declaración de consentimiento. Consulta Ejemplo de código para diálogos de consentimiento personalizados para ver ejemplos de diálogos de consentimiento personalizados que contienen declaraciones de consentimiento.

Procedimiento

Para configurar el SDK web para la navegación conjunta y personalizar los diálogos de consentimiento, sigue estos pasos:

  1. Para obtener el dominio de navegación conjunta y la clave de licencia de tu instancia de CCAI Platform, haz lo siguiente:

    1. Accede al portal de CCAI Platform con credenciales de administrador.

    2. Haz clic en Menú y, luego, en Configuración > Configuración para desarrolladores.

    3. Ve al panel Navegación conjunta y, luego, haz clic en el botón de activación para cambiarlo a la posición de encendido.

    4. Guarda los valores en los campos Dominio de navegación conjunta y Clave de licencia.

  2. Para inicializar el SDK web y, luego, incluir los campos de personalización de la navegación conjunta, ejecuta el siguiente código:

    var ujet = new UJET({
  // other options
  cobrowseOptions: {
    license: "LICENSE_KEY",
    trustedOrigins: ["CO-BROWSE_DOMAIN"],
    api: "CO-BROWSE_DOMAIN"
    cobrowseRequestHtml: "COBROWSE_REQUEST_HTML",
    remoteControlHtml: "REMOTE_CONTROL_HTML",
    fullDeviceHtml: "FULL_DEVICE_HTML",
    styles: "STYLES",
    sessionControlsHtml: "SESSION_CONTROLS_HTML"
  },
  // other options
})

    Reemplaza lo siguiente:

Clases de botones

Los diálogos de consentimiento contienen botones que permiten al usuario aceptar o rechazar la solicitud de navegación conjunta, o bien cerrar el cuadro de diálogo de consentimiento. Para que estos botones se comuniquen con el SDK web, debes asociar las siguientes clases de botones con los tipos de botones correspondientes. El SDK web busca estas clases en el código y agrega un objeto de escucha de eventos para cada una de ellas. Estas son las clases de botones:

  • cobrowse-allow: Es un botón para que el usuario final permita la solicitud.

  • cobrowse-deny: Es un botón para que el usuario final rechace la solicitud.

  • cobrowse-close: Es un botón para que el usuario final cierre el cuadro de diálogo de consentimiento.

La siguiente muestra de código contiene diálogos de consentimiento personalizados, un botón para finalizar la sesión y la información de diseño de estos elementos. Cada cuadro de diálogo de consentimiento del ejemplo contiene una declaración de consentimiento. A continuación, se indican las propiedades de los diálogos de consentimiento para cada uno de los tres modos de navegación conjunta:

"cobrowseOptions": {
    "license": "example_license",
    "trustedOrigins": "[https://example.com]",
    "cobrowseRequestHtml": "<div class=\"custom-backdrop\">\n <div class=\"cobrowse-confirm-dialog\">\n <div class=\"title\">\n <div></div>\n <span>Co-browse</span>\n <div class=\"cobrowse-close cobrowse-deny\">\n <svg width=\"14\" height=\"14842 13.1765 11.5294L8.64706 7L13.1765 2.47059C13.6313 2.01577 13.6313 1.27835 13.1765 0.823529C12.7216 0.368707 11.9842 0.368706 11.5294 0.823529L7 5.35294Z\" fill=\"#919191\"/>\n </svg>\n </div>\n </div>\n <div class=\"body\">\n <h2>Get step-by-step live and secure guidance with a Care Expert</h2>\n \n <ul>\n <li>Stop screen sharing at any time</li>\n <li>Personal info automatically hidden</li>\n  <li>Only your_company_name screens are shared</li>\n </ul>\n </div>\n <div class=\"description\">\n <svg id=\"loader\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><line x1=\"12\" y1=\"2\" x2=\"12\" y2=\"6\"></line><line x1=\"12\" y1=\"18\" x2=\"12\" y2=\"22\"></line><line x1=\"4.93\" y1=\"4.93\" x2=\"7.76\" y2=\"7.76\"></line><line x1=\"16.24\" y1=\"16.24\" x2=\"19.07\" y2=\"19.07\"></line><line x1=\"2\" y1=\"12\" x2=\"6\" y2=\"12\"></line><line x1=\"18\" y1=\"12\" x2=\"22\" y2=\"12\"></line><line x1=\"4.93\" y1=\"19.07\" x2=\"7.76\" y2=\"16.24\"></line><line x1=\"16.24\" y1=\"7.76\" x2=\"19.07\" y2=\"4.93\"></line></svg>\n <span>\n Co-browse lets us view your active session in a limited way to give you live, on-screen assistance. We won't be able to view any other applications on your device.\n </span>\n </div>\n <div class=\"footer\">\n <span>\n By tapping accept & continue, you are consenting to allow the your_company_name Expert to view your screen to initiate assisted navigation. <a href=\"https://www.example.com\">View the your_company_name Privacy Policy</a>\n </span>\n <button class=\"cobrowse-allow\">Accept & continue</button>\n </div>\n </div>\n </div>\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M7 5.35294L2.47059 0.823529C2.01577 0.368707 1.27835 0.368707 0.823529 0.823529C0.368707 1.27835 0.368706 2.01576 0.823529 2.47059L5.35294 7L0.823529 11.5294C0.368707 11.9842 0.368707 12.7216 0.823529 13.1765C1.27835 13.6313 2.01576 13.6313 2.47059 13.1765L7 8.64706L11.5294 13.1765C11.9842 13.6313 12.7216 13.6313 13.1765 13.1765C13.6313 12.7216 13.6313 11.9",
    "remoteControlHtml": "<div class=\"custom-backdrop\">\n <div class=\"cobrowse-confirm-dialog\">\n <div class=\"title\">\n <div></div>\n <span>Co-browse</span>\n <div class=\"cobrowse-close cobrowse-deny\">\n  <svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M7 5.35294L2.47059 0.823529C2.01577 0.368707 1.27835 0.368707 0.823529 0.823529C0.368707 1.27835 0.368706 2.01576 0.823529 2.47059L5.35294 7L0.823529 11.5294C0.368707 11.9842 0.368707 12.7216 0.823529 13.1765C1.27835 13.6313 2.01576 13.6313 2.47059 13.1765L7 8.64706L11.5294 13.1765C11.9842 13.6313 12.7216 13.6313 13.1765 13.1765C13.6313 12.7216 13.6313 11.9842 13.1765 11.5294L8.64706 7L13.1765 2.47059C13.6313 2.01577 13.6313 1.27835 13.1765 0.823529C12.7216 0.368707 11.9842 0.368706 11.5294 0.823529L7 5.35294Z\" fill=\"#919191\"/>\n  </svg>\n </div>\n </div>\n <div class=\"body\">\n <h2>Get step-by-step live and secure guidance with a Care Expert</h2>\n \n <ul>\n  <li>Stop screen sharing at any time</li>\n  <li>Personal info automatically hidden</li>\n <li>Only your_company_name screens are shared</li>\n</ul>\n</div>\n<div class=\"description\">\n<svg id=\"loader\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><line x1=\"12\" y1=\"2\" x2=\"12\" y2=\"6\"></line><line x1=\"12\" y1=\"18\" x2=\"12\" y2=\"22\"></line><line x1=\"4.93\" y1=\"4.93\" x2=\"7.76\" y2=\"7.76\"></line><line x1=\"16.24\" y1=\"16.24\" x2=\"19.07\" y2=\"19.07\"></line><line x1=\"2\" y1=\"12\" x2=\"6\" y2=\"12\"></line><line x1=\"18\" y1=\"12\" x2=\"22\" y2=\"12\"></line><line x1=\"4.93\" y1=\"19.07\" x2=\"7.76\" y2=\"16.24\"></line><line x1=\"16.24\" y1=\"7.76\" x2=\"19.07\" y2=\"4.93\"></line></svg>\n<span>\n Co-browse lets us view your active session in a limited way to give you live, on-screen assistance. We won't be able to view any other applications on your device.\n</span>\n</div>\n<div class=\"footer\">\n<span>\n By tapping accept & continue, you are consenting to allow the your_company_name Expert to view your screen to initiate assisted navigation. <a href=\"https://www.example.com\">View the your_company_name Privacy Policy</a>\n </span>\n <button class=\"cobrowse-allow\">Accept & continue</button>\n </div>\n </div>\n </div>",
    "fullDeviceHtml": "<div class=\"custom-backdrop\">\n <div class=\"cobrowse-confirm-dialog\">\n <div class=\"title\">\n <div></div>\n <span>Co-browse</span>\n <div class=\"cobrowse-close cobrowse-deny\">\n  <svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M7 5.35294L2.47059 0.823529C2.01577 0.368707 1.27835 0.368707 0.823529 0.823529C0.368707 1.27835 0.368706 2.01576 0.823529 2.47059L5.35294 7L0.823529 11.5294C0.368707 11.9842 0.368707 12.7216 0.823529 13.1765C1.27835 13.6313 2.01576 13.6313 2.47059 13.1765L7 8.64706L11.5294 13.1765C11.9842 13.6313 12.7216 13.6313 13.1765 13.1765C13.6313 12.7216 13.6313 11.9842 13.1765 11.5294L8.64706 7L13.1765 2.47059C13.6313 2.01577 13.6313 1.27835 13.1765 0.823529C12.7216 0.368707 11.9842 0.368706 11.5294 0.823529L7 5.35294Z\" fill=\"#919191\"/>\n </svg>\n </div>\n </div>\n <div class=\"body\">\n <h2>Get step-by-step live and secure guidance with a Care Expert</h2>\n \n <ul>\n <li>Stop screen sharing at any time</li>\n <li>Personal info automatically hidden</li>\n <li>Only your_company_name screens are shared</li>\n </ul>\n </div>\n <div class=\"description\">\n <svg id=\"loader\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><line x1=\"12\" y1=\"2\" x2=\"12\" y2=\"6\"></line><line x1=\"12\" y1=\"18\" x2=\"12\" y2=\"22\"></line><line x1=\"4.93\" y1=\"4.93\" x2=\"7.76\" y2=\"7.76\"></line><line x1=\"16.24\" y1=\"16.24\" x2=\"19.07\" y2=\"19.07\"></line><line x1=\"2\" y1=\"12\" x2=\"6\" y2=\"12\"></line><line x1=\"18\" y1=\"12\" x2=\"22\" y2=\"12\"></line><line x1=\"4.93\" y1=\"19.07\" x2=\"7.76\" y2=\"16.24\"></line><line x1=\"16.24\" y1=\"7.76\" x2=\"19.07\" y2=\"4.93\"></line></svg>\n <span>\n Co-browse lets us view your active session in a limited way to give you live, on-screen assistance. We won't be able to view any other applications on your device.\n </span>\n </div>\n <div class=\"footer\">\n <span>\n By tapping accept & continue, you are consenting to allow the your_company_name Expert to view your screen to initiate assisted navigation. <a href=\"https://www.example.com\">View the your_company_name Privacy Policy</a>\n </span>\n  <button class=\"cobrowse-allow\">Accept & continue</button>\n </div>\n </div>\n </div>",
    "styles": ".some-end-button {\n border-radius: 20px;\n background-color: blue;\n color: white;\n display: marquee;\n width: 20rem;\n font-size:200%;\n height: 20rem;\n }\n .custom-backdrop {\n background: rgba(0, 0, 0, 0.1);\n position: fixed;\n z-index: 2147483647;\n bottom: 0;\n top: 0;\n left: 0;\n right: 0;\n }\n .cobrowse-confirm-dialog {\n color: #232424;\n font-family:sans-serif;\n line-height:140%;\n position:fixed;\n background:white;\n border-radius:5px;\n z-index:2147483647;\n top:50px;\n left:50%;\n width:75%;\n max-width:450px;\n transform:translateX(-50%);\n box-shadow:2px 2px 30px rgb(0,0,0,0.08);\n padding: 1.5rem;\n }\n .title {\n text-align:center;\n display: flex;\n align-items: center;\n justify-content: space-between;\n font-size: 125%;\n line-height: 25px;\n padding: 20px;\n border-radius: 5px 5px 0 0;\n }\n \n .description {\n height: 8rem;\n display: flex;\n flex-direction:column;\n justify-content: center;\n align-items: center;\n background-color: #F3F3F3;\n }\n \n #loader {\n height:4rem;\n }\n \n .footer {\n margin-top: 1rem;\n margin-bottom: 1rem;\n display: flex;\n flex-direction: column;\n justify-content: flex-start\n }\n .cobrowse-allow {\n background-color: pink;\n color: white;\n flex-grow: 2;\n height: 3rem;\n }\n #cobrowse-end-button {\n cursor: pointer;\n position: fixed;\n z-index: 2147483647;\n top: 50%;\n left: 25%;\n transform: translateX(-50%);\n display: flex;\n justify-content: center;\n align-items: center;\n }\n #cobrowse-end-button:hover {\n background-color: #92162D;\n }",
    "sessionControlsHtml": " <div class=\"some-end-button\">\n End Session\n </div>"
  }

Para obtener más información, consulta Cómo configurar la navegación conjunta.

Personalización de mensajes visuales y en varios idiomas

El nuevo método de la plataforma de CCAI (opción) tiene dos campos para admitir varios idiomas y la personalización de mensajes visuales:

  • lang: Indica el idioma predeterminado cuando el usuario final no eligió un idioma preferido. Este código cumple con la norma ISO 639-1 y, si se omite, se establece en inglés de forma predeterminada.

  • translation: El SDK web admite varios idiomas para los textos que se muestran. Con el objeto de traducción, puedes personalizar textos para un idioma existente o incluso agregar textos para idiomas nuevos. Por ejemplo: de, es, fr, ja.

A continuación, se muestra un ejemplo de un objeto de traducción que personaliza el texto en inglés. Como puedes ver, las claves de nivel superior del objeto de traducción deben ser el código de idioma.

// ES6
let translation = `{
  "en": {
    "ujet_start_title": "Hi!"
  },
  "es": {
    "ujet_start_title": "¡Hola!"
  },
  "fr": {
    "ujet_start_title": "Salut!"
  },
  "de": {
    "ujet_start_title": "Hallo!"
  },
  "it": {
    "ujet_start_title": "Ciao!"
  },
  "ja": {
    "ujet_start_title": "こんにちは！"
  },
  "ko": {
    "ujet_start_title": "안녕하세요!"
  },
  "pt": {
    "ujet_start_title": "Olá!"
  },
  "pt-BR": {
    "ujet_start_title": "Olá!"
  },
  "sv": {
    "ujet_start_title": "Hej!"
  }
}`;

// initialize when dom ready
var ujet = new UJET({
  // other fields
  lang: 'en',
  translation: translation
});

Los mensajes de personalización son los siguientes:

"ujet_ask_phone_number_button_title": "Call Me"
"ujet_ask_phone_number_description": "Provide your phone number below"
"ujet_ask_phone_number_title_instant": "We'll Call You"
"ujet_ask_phone_number_title_scheduled": "Let's Schedule a Call"
"ujet_ask_phone_number_warning": "Your call may be monitored or recorded for training and quality assurance purposes."
"ujet_call_confirm_content": "Your phone should be ringing right about - {0}"
"ujet_call_confirm_start_new_conversation": "Start A New Conversation"
"ujet_call_record_permission_subtitle": "Do you give permission for {0} to record your call for training and quality?"
"ujet_call_record_permission_title": "Permission to Record"
"ujet_channel_chat": "Let's connect you to one of our chat support specialists",
"ujet_channel_instant_call": "Let one of our support specialists give you a call now",
"ujet_channel_menu_chat": "Chat now"
"ujet_channel_menu_email": "Email"
"ujet_channel_menu_instant_call": "Call now"
"ujet_channel_menu_keep_waiting": "Keep Waiting"
"ujet_channel_menu_scheduled_call": "Schedule call"
"ujet_channel_scheduled_call": "Let's schedule a time for a support specialist to call and help you",
"ujet_channel_email": "Please send us an email so we can help",
"ujet_chat_end": "End chat"
"ujet_chat_ended": "This chat has ended"
"ujet_chat_input_placeholder": "Type your message here"
"ujet_chat_leave": "Leave chat"
"ujet_chat_timed_out": "This chat has timed out"
"ujet_chat_title_with_multiple_agent": "Multiple Agents"
"ujet_chat_title_with_one_agent": "Chatting with {0}"
"ujet_chat_title_with_two_agent": "Chatting with {0} & {1}"
"ujet_chat_transfer_failed": "Transfer has failed"
"ujet_chat_transfer_joined": "<b>{0}<\/b> just joined the conversation"
"ujet_chat_transfer_left": "<b>{0}<\/b> just left the conversation"
"ujet_chat_transfer_started_menu": "<b>{0}<\/b> is transferring this chat to another agent..."
"ujet_chat_transfer_started_user": "<b>{0}<\/b> is adding another agent to this conversation..."
"ujet_common_back": "Back"
"ujet_common_cancel": "Cancel"
"ujet_common_end": "End"
"ujet_common_no": "No"
"ujet_common_save": "Save"
"ujet_common_submit": "Submit"
"ujet_common_support": "Support"
"ujet_common_yes": "Yes"
"ujet_deflection_menu_title": "Select from the options below"
"ujet_error_no_available_language": "No Available Language"
"ujet_error_phone_number_invalid": "Please input a valid phone number."
"ujet_file_upload_button": "Choose a file to upload"
"ujet_file_upload_failure_size": "Looks like we couldn't upload. <br> Please try uploading a file <br> that is less than {0}."
"ujet_file_upload_failure_type": "Looks like we couldn't upload. <br> We only accept <br> .JPG, .PNG, or .MP4."
"ujet_file_upload_failure_unknown": "Looks like we couldn't upload. <br> Please try again!"
"ujet_file_upload_subtitle": "Drop files here to upload"
"ujet_file_upload_title": "Upload Files"
"ujet_greeting": "Hi there, how can we help?"
"ujet_instant_call_confirm_content": "Your phone should be ringing shortly"
"ujet_language_chinese": "中文"
"ujet_language_english": "English"
"ujet_language_french": "Français"
"ujet_language_german": "Deutsch"
"ujet_language_italian": "Italiano"
"ujet_language_japanese": "日本語"
"ujet_language_korean": "한국어"
"ujet_language_portuguese": "Português (Portugal)"
"ujet_language_portuguese_brazil": "Português (Brazil)"
"ujet_language_spanish": "Español"
"ujet_language_swedish": "Svenska"
"ujet_menu_title": "Select an option"
"ujet_message_back_in_menu": "Looks like you changed your mind! How else can we help?"
"ujet_message_channel": "How would you like to communicate?"
"ujet_message_chat_deflection_afterhour": "We are currently closed. We look forward to helping you during our normal business hours."
"ujet_message_chat_deflection_default": "We are currently experiencing a high volume of requests with a current wait time of <b>{0}<\/b>. How would you like to reach out?"
"ujet_message_chat_deflection_email": "Please contact us via email: <b><a href="mailto:{0}">{0}<\/a><\/b>."
"ujet_message_chat_deflection_keepwaiting": "Thank you for continuing to wait. The remaining wait time is <b>{0}<\/b>."
"ujet_message_chat_deflection_outage": "We are currently experiencing a high volume of request, how would you like to reach out?"
"ujet_message_chat_deflection_recurring": "Thanks for your patience! The remaining wait time is <b>{0}<\/b>."
"ujet_message_chat_restart": "Connecting to your ongoing chat, one moment please..."
"ujet_message_chat_start": "One moment please..."
"ujet_message_queue": "Let's help you with<br /><strong>{0}<\/strong>"
"ujet_rating_feedback_placeholder": "Let us know how we can improve."
"ujet_rating_result_subtitle": "We appreciate your feedback"
"ujet_rating_result_title": "Thank you!"
"ujet_rating_title": "Rate Your Experience"
"ujet_redirect_action_title": "Open this page in a new tab"
"ujet_redirect_url_title": "Visit the page below"
"ujet_schedule_time_description": "Pick a time that works best for you"
"ujet_schedule_time_title": "Let's Schedule a Call"
"ujet_scheduled_call_cancel_cancel": "Cancel"
"ujet_scheduled_call_cancel_content": "You scheduled a support call for<br><b>{0}<\/b> at <b>{1}<\/b>."
"ujet_scheduled_call_cancel_keep": "Keep It"
"ujet_scheduled_call_cancel_title": "Cancel the existing call?"
"ujet_screenshot_init_cancel": "No Thanks"
"ujet_screenshot_init_okay": "Accept"
"ujet_screenshot_init_title": "Screenshot Request"
"ujet_screenshot_install_cancel": "Cancel"
"ujet_screenshot_install_okay": "Install"
"ujet_screenshot_install_title": "Install Chrome Extension"
"ujet_screenshot_take_action": "Take Screenshot"
"ujet_screenshot_take_title": "Click the button below to send a screenshot to the agent"
"ujet_screenshot_verify_cancel": "No"
"ujet_screenshot_verify_okay": "Yes"
"ujet_screenshot_verify_title": "Successfully Installed Chrome Extension"
"ujet_start_title": "Need any help?"
"ujet_tap_to_minimize": "Tap to minimize"
"ujet_time_hour": "hour | hours"
"ujet_time_minute": "minute | minutes"

Personalización de íconos y logotipos

El método new UJET(option) tiene campos para admitir la personalización del ícono y el logotipo.

  • logo: URL de la imagen del logotipo

  • Posición del widget (solo se aplica a computadoras)

    • right: Establece la posición del borde derecho en px (el valor predeterminado es 50).

    • bottom: Establece la posición del borde inferior en px (el valor predeterminado es 50).

  • Posición del ícono (solo se aplica a computadoras)

    • right: Establece la posición del borde derecho en px (el valor predeterminado es 50).

    • bottom: Establece la posición del borde inferior en px (el valor predeterminado es 50).

Ejemplo de personalización de logotipo e ícono

new UJET({
  logo: 'https://example.com/logo.svg',
  // widget position
  right: '50px',
  bottom: '150px',

  // launcher position
  launcher: {
    right: '50px',
    bottom: '50px',
  }
})

Personalización de íconos y logotipos

Personalización de íconos y logotipos

Personalización de íconos y logotipos

Personalización de íconos y logotipos

Personalización de temas

El método new UJET(option) tiene un campo para admitir la personalización del tema.

  • style: El objeto de tema admite cuatro valores para el widget.

    • links: Es una lista de vínculos de hojas de estilo para fuentes web.

    • --primary-font: Es un valor para el estilo CSS de font-family que se aplica a toda la IU web, p. ej., Merriweather.

    • --primary-color: Es un valor de código hexadecimal que se usa como el color principal de la IU web, p. ej., #51C3C3.

    • --link-color: Es un valor de código hexadecimal que se usa como el color del vínculo de la IU web, p. ej., #51C3C3.

  • launcher: El objeto de inicio admite cuatro valores para el inicio.

    • cssText: Sintaxis de CSS que se usa como el diseño CSS del selector

    • chatIcon: URL de un ícono SVG que se usa para el ícono de chat normal

    • closeIcon: URL de un ícono SVG que se usa para el ícono de cierre

    • style: Este objeto de tema separado admite dos valores para el selector.

      • --background-color: Es un valor de código hexadecimal que se usa como color de fondo del selector, p. ej., #E85230. --icon-color: Es un valor de código hexadecimal que se usa como color del ícono del selector, p. ej., #FFF.
var ujet = new UJET({
  // ...
  style: {
    links: [
      'https://fonts.example.com/css?family=Droid+Serif:400,700&display=swap',
    ],
    '--primary-font': 'Droid Serif, Georgia, serif',
    '--primary-color': '#F1684A',
    '--link-color': '#F1684A',
  },
  launcher: {
    cssText: '.wrap button {background: #E85230}',
    chatIcon: 'https://example.com/logo.svg',
    closeIcon: 'https://example.com/close.svg',
    style: {
      '--background-color': '#F1684A',
      '--icon-color': '#fff',
    }
  }
});

Estilo del selector

Seguimiento de la selección del canal y el envío de correos electrónicos

Para permitir el seguimiento de la selección de canales y el envío de correos electrónicos, el SDK web usa la función postMessage, que pasa un mensaje con los siguientes datos:

  • application: Es el tipo de dispositivo.

  • sdk_version: Es la versión del SDK web.

  • user_agent: Es la versión del navegador.

  • company: Es el nombre del arrendatario.

  • menu_name: Es el nombre de la fila o el menú que seleccionó el usuario final.

  • menu_path: Es la ruta de acceso a la fila o al menú que seleccionó el usuario final.

  • menu_id: Es el ID del menú o la fila que seleccionó el usuario final.

  • url: Es la URL de la página web en la que se encontraba el usuario final cuando seleccionó un canal o envió un correo electrónico.

  • timestamp: Es la fecha y hora en que el usuario final realizó su selección.

  • has_attachments: Indica si un correo electrónico tenía archivos adjuntos cuando se envió (esto solo aparece durante el envío del correo electrónico, no durante la selección del canal).

Los datos del mensaje se almacenan en un objeto ujet con 2 atributos: uno llamado action, que será una cadena que contiene el nombre de la acción completada, y otro llamado data, que incluirá los datos descritos anteriormente.

Para recuperar datos del mensaje, puedes crear un objeto de escucha de eventos que escuche "message". En la siguiente sección, se describe un ejemplo que imprimirá la acción y los datos en la consola. Puedes encontrar un ejemplo funcional en la carpeta tracking-channel-selection.

window.addEventListener('message', (e) => {
  if (e.data && e.data.ujet) {
    console.log(`Action: ${e.data.ujet.action}`);
    console.log(`Message Data: ${e.data.ujet.data}`);
  }
});

Cómo ocultar el borde del logotipo del agente

Para ocultar el borde del logotipo del agente, agrega "--logo-shadow": "none" en el atributo de estilo y configúralo como verdadero en el nuevo UJET(opción):

new UJET({
  // ...
  style: {
    '--logo-shadow': 'none',
  }
});

Cómo ocultar el ícono de inicio

Por motivos estéticos, es posible ocultar el ícono de inicio de la IU web y, en su lugar, usar un activador de chat proactivo o iniciar el chat de forma programática. Para quitar el ícono de inicio, agrega el atributo launcher y configúralo como verdadero en el nuevo UJET(opción):

new UJET({
  // ...
  launcher: false,
});

Para iniciar la IU web de forma programática, consulta Cómo iniciar la IU web de forma programática. Para iniciar la IU web con un activador de chat proactivo, consulta Activador Proactivo.

Cómo usar un punto de acceso directo

Puedes usar un acceso directo para enviar a un usuario final directamente a una cola específica.

Para usar un punto de acceso directo, sigue estos pasos:

  1. Accede al portal de CCAI Platform.

  2. Ve a Configuración > Cola.

  3. Asegúrate de que el canal web esté habilitado con el botón de activación use.

  4. Ve a Editar > Ver para el canal web. Se muestra la estructura web.

  5. Selecciona la cola a la que quieres que vaya directamente el usuario final.

  6. Ve a la sección Access Point y, luego, haz clic en Create direct access point.

  7. Proporciona la siguiente información:

    1. Establece el tipo de punto de acceso en general.

    2. Proporciona el Nombre del punto de acceso. Este es el nombre que aparece en la lista de puntos de acceso.

    3. Proporciona la etiqueta del punto de acceso general. Este es el valor que usarás para configurar el SDK web.

  8. Haz clic en Crear.

Puedes pasar el nombre de un punto de acceso directo con el método ujet.start(options). Consulta el siguiente ejemplo:

var launcher = document.getElementById('launcher');
launcher.addEventListener('click', function() {
  if (ujet.status === 'open') {
    ujet.close();
  } else {
    ujet.start({ menuKey: '__MENU_KEY__' });
  }
});

Cierra la IU web de forma programática

Este paso es opcional. Sin este paso, la IU web se completará y minimizará por sí sola.

Este paso te permite llamar a la función de devolución de llamada cuando el consumidor quiere cerrar el SDK web.

ujet.on('close', function() {
  // do something here
});

Cómo iniciar la IU web de forma programática

Este paso es opcional. Sin este paso, el usuario final puede iniciar la IU web haciendo clic en el ícono de inicio de la IU web.

Este paso te permite abrir la IU web de forma programática con el método ujet.start(options). Es posible que quieras que el usuario final haga clic en un botón adicional para abrir la IU web de la siguiente manera:

<button id="launcher">Haz clic para abrir</button>

var ujet = new UJET({
  companyId: "YOUR_COMPANY_ID",
  host: "HOST_URL",
  launcher: false
});

var launcher = document.getElementById('launcher');
launcher.addEventListener('click', function() {
  if (ujet.status === 'open') {
    ujet.close();
  } else {
    ujet.start();
  }
});

ujet.on('ready', function() {
  launcher.textContent = 'ready to talk';
});

ujet.registerHook('loading', function() {
  launcher.textContent = 'loading';
});

ujet.registerHook('open', function() {
  launcher.textContent = 'Click to close';
});

ujet.registerHook('close', function() {
  launcher.textContent = 'Click to open';
});

ujet.on('created', function() {
  ujet.authenticate(getAuthToken);
});

También puedes cerrar el widget con el método ujet.close() y quitarlo con el método ujet.destroy().

Activador proactivo

Con los activadores proactivos, puedes activar el SDK web para que envíe un mensaje de forma proactiva al usuario final.

Para configurar un activador proactivo, sigue estos pasos:

  1. En el portal de la Plataforma de CCAI, ve a Configuración > Chat.

  2. Ve al panel Web Proactive Chat Triggers y, luego, haz clic en View triggers. Aparecerá el panel Activadores.

  3. Haz clic en Add Trigger. Aparecerá el panel Elegir nombre.

  4. En el campo Nombre del activador, ingresa un nombre y, luego, haz clic en Siguiente. Aparecerá el panel Establecer condiciones.

  5. Para establecer condiciones, haz lo siguiente:

    1. Junto a El usuario final, selecciona una condición.

    2. En el campo Ingresa una palabra clave, ingresa una palabra clave a la que quieras que haga referencia la condición y, luego, presiona la tecla Intro.

    3. Repite el paso anterior para cada palabra clave que quieras ingresar.

    4. Para agregar otra condición, haz clic en Agregar otra condición y, luego, en el tipo de condición que desees.

    5. Establece la opción de configuración para la condición.

    6. Para agregar otra condición, repite los dos pasos anteriores.

    7. Haz clic en Siguiente. Aparecerá el panel Define Actions.

  6. Para definir acciones, haz lo siguiente:

    1. En Queue Assignment, ingresa el nombre del nodo de la fila de chat al que deseas asignar el usuario final. Si existe una fila de chat con este nombre, el nombre aparecerá en negrita debajo del campo.

    2. Haz clic en el nombre de la fila de chat en negrita. Aparecerá un diálogo de confirmación.

    3. Haga clic en Aceptar para continuar.

    4. En Mensaje de chat, ingresa el mensaje que quieres mostrar en el chat activado.

    5. Haz clic en Finalizar.

    6. Para activar el activador nuevo, haz clic en Publicar.

IDs de tickets existentes

Si tienes un ticket existente para un usuario final, puedes recuperar el ID del ticket de tu CRM y pasarlo al SDK web llamando a ujet.start().

Por ejemplo:

yourFunctionToRetrieveTicket()
  .then((existingTicket) => {
    ujet.start({ ticketId: existingTicket });
  });

Puedes consultar el ejemplo en la carpeta ticket-id como referencia.