Guía del SDK web sin interfaz gráfica

El SDK web sin encabezado te brinda la flexibilidad necesaria para extender 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 encabezado, 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 (la "interfaz gráfica") 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 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. Puedes encontrar una lista de los eventos disponibles en la página de eventos.

Instala el SDK web sin encabezado

Para instalar el SDK web sin encabezado, usa el siguiente fragmento de código en tu proyecto:

npm install @ujet/websdk-headless --save

Usa el SDK web sin encabezado

Para usar el SDK web sin encabezado, puedes seguir el código de ejemplo proporcionado:

import { Client } from "@ujet/websdk-headless"
const client = new Client({ ... })

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;
  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 encabezado, 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 encabezado.

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 el 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 del 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 de 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"
}

Configuración de datos personalizada

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.