Cómo empezar

Integra las capacidades de Contact Center AI Platform (CCAI Platform) en tu aplicación web con el SDK web. El SDK web se basa en el SDK web sin encabezado, lo que hace que todos los métodos del cliente sin encabezado estén disponibles en el widget del SDK web. En esta página, se muestra cómo montar, inicializar y autenticar el SDK web. También se explica cómo ocultar los botones y comandos para iniciar conversaciones nuevas y descargar transcripciones.

Para obtener ayuda con la instalación del SDK web, consulta los ejemplos de implementación en GitHub.

Ejemplo básico

El ejemplo básico solo requiere 3 opciones:

  1. companyId
  2. host
  3. Authenticate

Sigue la documentación del widget para obtener el ID y el host de tu empresa.

HTML completo

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Basic demo</title>
</head>
<body>
  <!-- An empty element to mount the CCAI Platform web SDK widget. -->
  <div id="ccaas-widget"></div>

  <!-- Include the CCAI Platform web SDK widget -->
  <script src="https://{your_ccaas_host}web-sdk/v3/widget.js"></script>
  <script>
    var ccaas = new UJET({
      companyId: "$COMPANY_ID",
      host: "$HOST",
      authenticate: getAuthToken
    });
    ccaas.mount("#ccaas-widget");

    function getAuthToken() {
      // YOU SHOULD HAVE THIS KIND OF API ON YOUR SERVER
      return fetch('/auth/token').then(function(resp) {
        // { token: 'a JWT contains user identifier, name, and email' }
        return resp.json();
      });
    }
  </script>
</body>
</html>

Ejemplo de datos personalizados

El ejemplo de datos personalizados es similar al ejemplo básico. Debes configurar los datos personalizados con .config({ customData }).

HTML completo

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Custom Data demo</title>
</head>
<body>
  <!-- An empty element to mount the CCAI Platform web SDK widget. -->
  <div id="ccaas-widget"></div>

  <!-- Include the CCAI Platform web SDK widget -->
  <script src="https://{your_ccaas_host}web-sdk/v3/widget.js"></script>
  <script>
    var ccaas = new UJET({
      companyId: "$COMPANY_ID",
      host: "$HOST",
      authenticate: getAuthToken
    });

    // use `.config` to configure custom data.
    ccaas.config({
      customData: {
        version: {
          label: 'Version',
          value: '1.0.0'
        }
      }
    });
    ccaas.mount("#ccaas-widget");

    function getAuthToken() {
      // YOU SHOULD HAVE THIS KIND OF API ON YOUR SERVER
      return fetch('/auth/token').then(function(resp) {
        // { token: 'a JWT contains user identifier, name, and email' }
        return resp.json();
      });
    }
  </script>
</body>
</html>

Preparación

Para que el SDK web de Contact Center AI Platform esté en funcionamiento, haz lo siguiente:

  1. Incluye la secuencia de comandos del widget del SDK web.

  2. Prepara un elemento de activación.

  3. Inicializa el SDK web con tu COMPANY_KEY

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

    <!-- an empty element to mount the web SDK -->
<div id="ccaas-widget"></div>

<script src="https://{your_ccaas_host}web-sdk/v3/widget.js"></script>
<script>
  // const ccaas = new UJET({ ... })
</script>

Obtén la clave de la empresa

  1. Accede al portal de Contact Center AI Platform con una cuenta que tenga permisos de administrador.

  2. Ve a Configuración > Configuración del desarrollador.

  3. Copia la clave de la empresa como COMPANY_KEY.

También puedes obtener el secreto de la empresa aquí. El secreto se usa en tu servidor de backend para crear un extremo de token de autenticación. Para obtener más información, consulta la sección Autenticación.

Inicializando

Luego, puedes inicializar el SDK web de CCAI Platform con el nuevo método UJET(options). Si tu portal es https://{your_ccaas_host}, el host es

https://{your_ccaas_host}:
const ccaas = new UJET({
  companyId: "{COMPANY_KEY}",
  host: "https://{your_ccaas_host}",
  authenticate: getAuthToken,
});

Las opciones son las mismas que las de la Guía del SDK web sin interfaz gráfica.

Autenticación

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

async function getAuthToken() {
  // YOU SHOULD HAVE THIS KIND OF API ON YOUR SERVER
  const resp = await fetch('/auth/token')
  const data = await resp.json()
  return { token: data.token }
}

Para obtener más información, consulta la sección Autenticación.

Configura el SDK

Configura el SDK web con ccaas.config({...}).

En el siguiente código, se enumeran las propiedades para configurar el SDK web:

export interface ConfigOptions {
  name?: string
  accent?: 'default' | 'blue' | 'green' | 'purple' | 'orange' | 'yellow' | 'gold' | 'red'
  logo?: string
  menuKey?: string
  ticketId?: string
  preferredChannel?: string
  disableAttachment?: boolean
  customData?: Record<string, any>
  signedCustomData?: string
  messages?: Record<string, unknown>
  disableLauncher?: boolean
  launcherOpenIcon?: string
  launcherCloseIcon?: string
  launcherLoadingIcon?: string
  optionsMenuIcon?: string
  confirmationIcon?: string
  enableMuteChat?: boolean
  tooltipIcon?: string
  hideNewConversation?: boolean
  hideDownloadTranscriptOptions?: boolean
  hideDownloadTranscriptPostChat?: boolean
}

Para obtener más información, consulta Funciones admitidas y Personalizaciones de temas.

Ocultar el botón para iniciar una conversación nueva al final de una sesión

Puedes configurar el SDK web para ocultar el botón Iniciar una conversación nueva en la ventana de chat de un usuario final al final de una sesión. Para ello, incluye la propiedad hideNewConversation con el método ccaas.config. Para obtener más información, consulta Cómo configurar el SDK.

Ocultar el comando para descargar una transcripción durante una sesión

Puedes configurar el SDK web para ocultar el comando Descargar transcripción del menú de opciones de chat en la ventana de chat del usuario final durante una sesión. Para ello, incluye la propiedad hideDownloadTranscriptOptions con el método ccaas.config. Para obtener más información, consulta Cómo configurar el SDK.

Ocultar el botón para descargar una transcripción al final de una sesión

Puedes configurar el SDK web para ocultar el botón Descargar transcripción en la ventana de chat del usuario final al final de una sesión. Para ello, incluye la propiedad hideDownloadTranscriptPostChat con el método ccaas.config. Para obtener más información, consulta Cómo configurar el SDK.

Cómo colocar el soporte del widget

Es necesario preparar un elemento vacío al principio:

<div id="ccaas-widget"></div>

Luego, podemos montar el widget en este elemento:

ccaas.mount('#ccaas-widget')

Usa la guía del SDK web sin encabezado para crear tus propios widgets de chat y llamadas.

Instalar

Puedes instalar el paquete con npm:

npm install @ujet/websdk-headless --save

También puedes usar la secuencia de comandos alojada en tu instancia de CCAI Platform:

<script src="https://{your_ccaas_host}/web-sdk/v3/headless.js"></script>

<script>
  // const client = new HeadlessClient(...)
</script>

Integra el SDK.

  1. Accede al portal de Contact Center AI Platform con una cuenta que tenga permisos de administrador.

  2. Ve a Configuración > Configuración del desarrollador.

  3. Copia la clave de la empresa como COMPANY_KEY.

Si tu portal es https://{your_ccaas_host}, aquí tienes un ejemplo para obtener la información de la empresa:

import { Client } from "@ujet/websdk-headless"

async function authenticate() {
  const resp = await fetch("/your-auth-endpoint")
  const data = await resp.json()
  return { token: data.token }
}

const client = new Client({
  companyId: "COMPANY_KEY",
  host: "https://{your_ccaas_host}",
  authenticate: authenticate,
})

const company = await client.getCompany()