Google utiliza tecnología de IA para traducir contenido a tu idioma preferido. Las traducciones realizadas con IA pueden contener errores.

Guía del SDK web sin interfaz gráfica

El SDK web sin encabezado te brinda la flexibilidad necesaria para ampliar y personalizar la experiencia de asistencia de tu empresa según tus necesidades. Incluye todas nuestras funciones conocidas del SDK web y proporciona la capacidad de crear la IU y la UX para admitirlas.

Para instalar y usar el SDK web sin interfaz gráfica, se requiere la asistencia del equipo de desarrollo web de tu organización. Para realizar una integración exitosa y lograr un rendimiento óptimo, Google recomienda que involucre a su personal calificado.

En el contexto del desarrollo de software, "sin interfaz gráfica" se refiere a una arquitectura desacoplada en la que la capa de presentación del frontend (el "encabezado") está separada de la lógica y las capacidades del backend. En una arquitectura sin interfaz gráfica, el backend, también conocido como la parte "sin interfaz gráfica", proporciona APIs que te permiten usar sus funciones y servicios.

Un ejemplo es la automatización de flujos de trabajo personalizados. Cuando un usuario final inicia un chat, se activa el evento on("chat.message"). Puedes definir activadores de automatización personalizados basados en mensajes de chat específicos que hayas recibido. Por ejemplo, si un usuario final escribe "Derivar" en el chat, el controlador de eventos puede derivar automáticamente la sesión de chat a un equipo de asistencia al cliente de nivel superior, lo que proporciona atención rápida a los problemas críticos.

En esta guía, se explica el proceso de instalación, las capacidades de integración y el uso del SDK. Para obtener detalles sobre el uso de la API, consulta la documentación de la API del SDK web sin encabezado. En la página de eventos, puedes encontrar una lista de los eventos disponibles.

Instala el SDK web sin encabezado

Puedes instalar el paquete con npm:

npm install @ujet/websdk-headless --save

También puedes usar la secuencia de comandos alojada por UJET:

<script src="https://websdk.ujet.co/v3/headless.js"></script>

<script>
  // The hosted script exposes the client as the global `UJETClient`.
  // const client = new UJETClient(...)
</script>

Usa el SDK web sin interfaz gráfica

Para usar el SDK web sin interfaz gráfica, puedes seguir el código de ejemplo proporcionado:

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: "YOUR-COMPANY-ID",
  tenant: "YOUR-TENANT-NAME",
  authenticate: authenticate,
})

// const company = await client.getCompany()
// const menus = await client.getMenus()

La clase Client acepta varias opciones (puedes personalizarla según tus requisitos):

interface ClientOption {
  companyId: string;
  authenticate: () => Promise<TokenResponse>;
  tenant?: string;
  host?: string;
  lang?: string;
  bridge?: string;
  version?: string;
  cobrowse?: {
    enabled?: boolean;
    messages?: CobrowseMessages;
    api?: string;
    license?: string;
    trustedOrigins?: string[];
    capabilities?: string[];
    registration?: boolean;
    redactedViews?: string[];
    unredactedViews?: string[];
  };
}

Habilitar registro

Durante la implementación y las pruebas, es posible que sea necesario recopilar información adicional en el registro de la consola. Para habilitar el registro del SDK sin interfaz gráfica, importa Logger y consoleLoggerHandler agregando el siguiente código a tu aplicación web:

import {Logger, consoleLoggerHandler } from '@ujet/websdk-headless'
Logger.addHandler(consoleLoggerHandler)

Puedes habilitar y configurar la función de Compartir pantalla con el SDK web sin interfaz gráfica.

En la siguiente muestra de código, se muestra cómo habilitar la función de compartir pantalla:

new Client({
  // ...
  cobrowse: {
    enabled: true,
    license: 'YOUR_SCREEN_SHARE_LICENSE'
  }
})

En la siguiente muestra de código, se muestran las opciones para compartir pantalla:

interface CobrowseOption {
  enabled: boolean
  template?: string
  confirmSessionTemplate?: string
  confirmRemoteControlTemplate?: string
  confirmFullDeviceTemplate?: string
  sessionControlsTemplate?: string
  root?: Element
  messages?: {
    confirmSessionTitle: string;
    confirmSessionContent: string;
    confirmRemoteControlTitle: string;
    confirmRemoteControlContent: string;
    confirmFullDeviceTitle: string;
    confirmFullDeviceContent: string;
    allowText: string;
    denyText: string;
    endSessionText: string;
  }
  api?: string
  license?: string
  trustedOrigins?: string[]
  capabilities?: string[]
  registration?: boolean
  redactedViews?: string[]
  unredactedViews?: string[]
}

Plantilla personalizada

Puedes personalizar la plantilla del diálogo Compartir pantalla con la opción template de la muestra de código anterior.

En el siguiente ejemplo, se muestra la plantilla predeterminada:

<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>

Puedes usar esta plantilla para configurar un diálogo que solicite la aprobación del usuario final para lo siguiente:

Cómo iniciar una sesión de Compartir pantalla
Cómo iniciar una sesión de Compartir pantalla con control remoto
Cómo iniciar una sesión de Compartir pantalla completa del dispositivo

Estas son las opciones de plantillas:

confirmSessionTemplate: Para confirmar una sesión de Screen Share.
confirmRemoteControlTemplate: Para confirmar una sesión de Compartir pantalla con control remoto.
confirmFullDeviceTemplate: Para confirmar una sesión completa de Compartir pantalla del dispositivo.
sessionControlsTemplate: Para el botón de controles de sesión. Esta es la plantilla predeterminada: <button class="cobrowse-end js-cobrowse-end">$end</button>

Mensajes

Las siguientes variables de mensaje se usan en las plantillas personalizadas:

$title
$content
$allow
$deny

En el siguiente ejemplo, se muestra cómo se aplican estas variables:

{
  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
}

En el siguiente ejemplo, se muestran los valores predeterminados de las variables en inglés:

{
  "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"
}

Propiedades

Nombre	Descripción
`deviceId`	Es el ID del dispositivo, determinado por el SDK sin encabezado en la inicialización.
`lang`	Es la configuración de idioma del cliente actual. Si se pasa el parámetro lang en la configuración, se convierte en de solo lectura.
`chat`	Solo tiene un valor cuando hay un chat en curso.
`cobrowse`	Es el cliente subyacente de CobrowseIO, disponible después de que se inicializa la función de exploración conjunta.

Eventos

Nombre	Descripción
`destroy`	Destruye el comunicador y todos los objetos de escucha de eventos.
`on`	Agrega un controlador de eventos para el evento proporcionado.
`off`	Quita el controlador de eventos para el evento proporcionado.

Usa el método .destroy para quitar el iframe y todos los objetos de escucha de eventos

client.destroy()

Usa el método .on para hacer un seguimiento de los eventos.

client.on('chat.updated', someFunc)

Quita el controlador de eventos con .off:

client.off('chat.updated', someFunc)

Configuración de datos personalizados

La opción custom_data te permite pasar datos de pares clave-valor arbitrarios al SDK web.

Uso

Puedes proporcionar datos personalizados como un objeto (sin firma) o una cadena (con firma) cuando creas un chat:

interface ChatRequest {
  lang?: string;
  trigger_id?: string;
  ticket_id?: string;
  email?: string;
  greeting?: string;
  cobrowsable?: boolean;
  custom_data?: {
    signed?: string;
    unsigned?: Record<string, any>;
  };
}

Consulta el siguiente ejemplo:

const custom_data = {
  unsigned: {
    version: {
      label: 'Version',
      value: '1.0.0'
    }
  },
  signed: 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9...' // JWT or other signed payload
}

try {
  const chat: Chat = await client.createChat(123, { custom_data })
} catch (error) {
  // handle error
}

Transferencia de chatbot externo

En algunos casos, es posible que desees mantener el historial y las interacciones de otros proveedores de chat. Puedes hacerlo con custom_data object.