Actualiza de la versión 2 a la versión 3 del SDK web

En esta página, se explica cómo actualizar del SDK web versión 2 al SDK web versión 3. Si instalas el SDK web por primera vez, consulta la Guía del SDK web v3.

Funciones del SDK web v3

Estas son algunas funciones del SDK web v3 que no existen en el SDK web v2:

  • Formularios personalizados: Los agentes pueden enviar formularios personalizados de recopilación de datos directamente desde la interfaz de chat web. Para obtener más información, consulta Recopilación de datos formularios.

  • Transcripciones descargables: Permite que los usuarios finales descarguen sus transcripciones de chat directamente desde el widget. Para obtener más información, consulta Descarga transcripciones de chat con el SDK web y los SDK para dispositivos móviles.

  • Activadores de chat proactivo avanzados: Usa activadores de chat proactivo avanzados, por ejemplo, especifica el idioma de la cola o usa una lógica compleja AND-OR para las palabras clave de la URL. Para obtener más información, consulta Activadores proactivos del SDK web.

Actualiza al SDK web v3

Primero, ubica esta secuencia de comandos en tu código fuente:

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

Luego, reemplázala por lo siguiente:

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

Diferencias destacadas

El SDK web v3 se compila directamente sobre el cliente sin interfaz de UJET. Debido a que la IU del widget usa esta estructura sin interfaz, puedes acceder a todos los métodos subyacentes y llamarlos, y escuchar los eventos que admite el SDK sin interfaz segmentando ccaas.client.

En esta sección, se describen las diferencias clave entre las versiones 2 y 3 del SDK web.

Inicialización

v2

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

v3

var ccas = new UJET({
  "companyId": "{companyId}",
  "host": "https://{your_ccaas_host}",
  "authenticate": getAuthToken
})

// v3 has a mount point
// ccaas.mount(HTMLElement | string)
ccaas.mount('#ccaas-widget')

Opciones

Cuando inicias el SDK web, especificas opciones. En esta sección, se describen las diferencias entre las versiones 2 y 3 del SDK web.

v2

No disponible para la v2.

v3

En la v3, las opciones de inicialización son las mismas que las del SDK sin interfaz.

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

Se pueden configurar opciones adicionales con el método ccaas.config():

ccaas.config({
  disableAttachment: true
})

Opciones de configuración disponibles:

interface ConfigOptions {
  accent?: AccentColor;
  logo?: string;
  menuKey?: string;
  ticketId?: string;
  preferredChannel?: string;
  disableAttachment?: boolean;
  customData?: string | Record<string, any>;
  messages?: Record<string, unknown>;
  reCaptchaSiteKey?: string;
}

Métodos

En la v2, hay algunos métodos adicionales en el cargador, como los siguientes:

ccaas.createCobrowseCode()
ccaas.fetchWaitTimes({id: 123})

En la v3, la IU del widget usa un cliente sin interfaz, por lo que puedes llamar a todos los métodos que admite el SDK sin interfaz.

const client = ccaas.client
client.getCompany()
client.loadOngoingChat()

Consulta la guía del SDK web sin interfaz para obtener más información.

Eventos

En la v2, puedes escuchar eventos con:

ccaas.on('chat:update', (chat) => {
  console.log(chat)
})

En la v3, puedes escuchar eventos con el cliente sin interfaz:

const client = ccaas.client

client.on('chat.updated', (chat) => {
  console.log(chat)
})

Consulta la guía del SDK web sin interfaz para obtener información sobre más eventos.

Personalización del tema

El SDK web v3 tiene un enfoque actualizado para la personalización del tema. Para obtener más información, consulta Personalización del tema.