En esta página, se explica cómo actualizar de la versión 2 a la versión 3 del SDK web. Si es la primera vez que instalas el SDK web, consulta la Guía del SDK web v3.
Actualiza al SDK web v3
Primero, ubica este código en tu código fuente:
<script type="module" src="https://websdk.ujet.co/v2/loader.js"></script>
Luego, reemplázalo por lo siguiente:
<script type="module" src="https://{your_ccaas_host}/web-sdk/v3/widget.js"></script>
Diferencias destacadas
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 inicializas el SDK web, especificas opciones. En esta sección, se describen las diferencias entre las versiones 2 y 3 del SDK web.
v2
No aplica para la versión 2.
v3
En la versión 3, las opciones de inicialización son las mismas que las del SDK sin encabezado.
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 versión 2, hay algunos métodos adicionales en el cargador, como los siguientes:
ccaas.createCobrowseCode()
ccaas.fetchWaitTimes({id: 123})
En la versión 3, la IU del widget usa un cliente sin interfaz gráfica, por lo que puedes llamar a todos los métodos que admite el SDK sin interfaz gráfica.
const client = ccaas.client
client.getCompany()
client.loadOngoingChat()
Consulta la guía del SDK web sin interfaz gráfica para obtener más información.
Eventos
En la versión 2, puedes escuchar eventos con lo siguiente:
ccaas.on('chat:update', (chat) => {
console.log(chat)
})
En la versión 3, puedes escuchar eventos con el cliente sin encabezado:
const client = ccaas.client
client.on('chat.updated', (chat) => {
console.log(chat)
})
Consulta la guía del SDK web sin encabezado para obtener información sobre más eventos.
Personalización de temas
El SDK web v3 tiene un enfoque actualizado para la personalización de temas. Para obtener más información, consulta Personalización de temas.