Cette page explique comment passer de la version 2 du SDK Web à la version 3. Si vous installez le SDK Web pour la première fois, consultez le Guide du SDK Web v3.
Passer au SDK Web v3
Commencez par localiser ce script dans votre code source :
<script type="module" src="https://websdk.ujet.co/v2/loader.js"></script>
Remplacez-le ensuite par ce qui suit :
<script type="module" src="https://{your_ccaas_host}/web-sdk/v3/widget.js"></script>
Différences notables
Cette section décrit les principales différences entre les versions 2 et 3 du SDK Web.
Initialiser
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')
Options
Lorsque vous initialisez le SDK Web, vous spécifiez des options. Cette section décrit les différences entre les versions 2 et 3 du SDK Web.
v2
N/A pour la version 2.
v3
Dans la version 3, les options d'initialisation sont les mêmes que celles du SDK sans interface graphique.
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[];
};
}
Vous pouvez configurer des options supplémentaires avec la méthode ccaas.config() :
ccaas.config({
disableAttachment: true
})
Options de configuration 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éthodes
Dans la version 2, le chargeur comporte quelques méthodes supplémentaires, telles que :
ccaas.createCobrowseCode()
ccaas.fetchWaitTimes({id: 123})
Dans la version 3, l'UI du widget utilise un client headless. Vous pouvez appeler toutes les méthodes compatibles avec le SDK headless.
const client = ccaas.client
client.getCompany()
client.loadOngoingChat()
Pour en savoir plus, consultez le guide du SDK Web headless.
Événements
Dans la v2, vous pouvez écouter les événements avec :
ccaas.on('chat:update', (chat) => {
console.log(chat)
})
Dans la version 3, vous pouvez écouter les événements avec le client headless :
const client = ccaas.client
client.on('chat.updated', (chat) => {
console.log(chat)
})
Pour en savoir plus sur les événements, consultez le guide du SDK Web sans interface graphique.
Personnalisation du thème
Le SDK Web v3 propose une approche mise à jour pour la personnalisation des thèmes. Pour en savoir plus, consultez Personnaliser le thème.