Google uses AI technology to translate content into your preferred language. AI translations can contain errors.

Guía del SDK web sin interfaz gráfica

El SDK web sin interfaz gráfica te brinda la flexibilidad de extender y personalizar la experiencia de asistencia de tu empresa según tus necesidades. Incluye todas las funciones conocidas del SDK web y te permite crear la IU y UX para brindar asistencia.

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 involucres a tu personal calificado.

En el contexto del desarrollo de software, "sin interfaz gráfica" se refiere a una arquitectura separada en la que la capa de presentación del frontend ("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 en función de los mensajes de chat específicos que recibiste. Por ejemplo, si un usuario final escribe "Escalate" 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 inmediata 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 interfaz gráfica. Puedes encontrar una lista de los eventos disponibles en la página de eventos.

Cómo instalar el SDK web sin interfaz gráfica

Para instalar el SDK web sin interfaz gráfica, usa el siguiente fragmento de código en tu proyecto:

npm install @ujet/websdk-headless --save

Cómo usar 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"
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 interfaz gráfica, importa Logger y consoleLoggerHandler. Para ello, agrega 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 la función de 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 de la función de 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:

Iniciar una sesión de la función de compartir pantalla
Iniciar una sesión de la función de compartir pantalla con control remoto
Iniciar una sesión de la función de compartir pantalla de dispositivo completo

Estas son las opciones de plantilla:

confirmSessionTemplate: Para confirmar una sesión de la función de compartir pantalla
confirmRemoteControlTemplate: Para confirmar una sesión de la función de compartir pantalla con control remoto
confirmFullDeviceTemplate: Para confirmar una sesión de la función de compartir pantalla de dispositivo completo
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 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 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

Hay algunos casos en los que es posible que desees mantener el historial y las interacciones de otros proveedores de chat. Para ello, puedes usar el custom_data object.