Cette page contient les méthodes d'API du SDK Web.
Initialiser le SDK Web
Utilisez le code suivant pour initialiser le SDK Web :
const ujet = new UJET({
companyId: '',
// ...
})
Options
Cette section contient les options que vous pouvez transmettre lorsque vous initialisez le SDK Web.
companyId
Obligatoire
Pour récupérer companyId depuis le portail de la plate-forme CCAI, procédez comme suit :
Connectez-vous au portail de la plate-forme CCAI avec un compte administrateur.
Accédez à Paramètres > Paramètres pour les développeurs.
Copier la clé de l'entreprise
new UJET({ companyId: '{ COMPANY KEY }', })
tenant
Recommandé
Le locataire est le sous-domaine de votre instance Contact Center AI Platform (CCAI Platform), également appelé votre environnement. Par exemple, si le portail CCAI Platform est https://acme.ccaiplatform.com/, acme est le locataire. Consultez l'exemple suivant :
```sh
new UJET({
companyId: '....',
tenant: 'acme',
})
```
host
Optional
host est le point de terminaison de l'API utilisé par le SDK Web. Si vous avez défini tenant, il n'est pas nécessaire de définir host.
new UJET({
companyId: '....',
host: 'https://acme.api.ccaiplatform.com',
})
Si vous avez défini tenant et non host, le SDK Web configurera la valeur host en fonction de tenant. Consultez l'exemple ci-dessous :
https://{tenant}.api.ccaiplatform.com
authenticate
Optional
authenticate est une fonction qui renvoie un jeton JWT avec une promesse. Consultez l'exemple ci-dessous :
new UJET({
// ...
authenticate: getAuthToken,
})
function getAuthToken () {
return fetch('/ujet/token').then(function(resp) {
return resp.json()
})
}
L'authentification est requise dans le SDK Web, mais l'option authenticate est facultative. Vous pouvez appeler ujet.authenticate dans l'événement created :
var ujet = new UJET({ ... })
ujet.on('created', function() {
getAuthToken().then({ token } => {
ujet.authenticate({ token })
})
})
lang
Optional
Langue par défaut de l'utilisateur final. Consultez l'exemple ci-dessous :
new UJET({
// ...
lang: 'ja',
})
user
Optional
Consultez l'exemple ci-dessous :
new UJET({
companyId: '....',
user: {
identifier: '...',
name: '...',
email: '...',
},
})
launcher
Optional
L'option launcher peut être false ou un objet. Consultez les options suivantes :launcher
right: string,
bottom: string,
cssText: string,
chatIcon: url,
closeIcon: url,
style: {
'--background-color': color,
'--icon-color': color,
}
Pour désactiver le lanceur d'applications par défaut de la plate-forme CCAI, vous pouvez définir cette option sur false. Consultez l'exemple ci-dessous :
const ujet = new UJET({
companyId: '...',
launcher: false,
})
// use your own button: `<button id="start-chat">Chat with Me</button>`
document.querySelector('#start-chat').addEventListener('click', function() {
ujet.open()
})
Vous pouvez également personnaliser notre lanceur d'applications intégré. Consultez l'exemple suivant :
new UJET({
companyId: '...',
launcher: {
// cssText: 'body{color:red}',
// chatIcon: 'https://example.com/logo.svg',
// closeIcon: 'https://example.com/static/close.svg',
// right: '50px',
// bottom: '50px',
style: {
'--icon-color': '#FFF',
'--background-color': '#F1684A',
}
},
})
logo
Recommandé
URL du logo de votre entreprise. Consultez l'exemple ci-dessous :
new UJET({
logo: 'https://example.com/logo.svg',
})
style
Optional
Utilisez l'option style pour personnaliser le widget du SDK Web. Consultez l'exemple suivant :
new UJET({
// ...
style: {
// links: ['https://example.com/font.css'],
'--primary-font': '',
'--primary-color': '',
'--link-color': '',
'--logo-shadow': '',
}
})
customData
Optional
Des données personnalisées peuvent être envoyées avec une discussion lorsqu'elle est lancée. Consultez l'exemple ci-dessous :
new UJET({
// ...
customData: {
version: {
label: 'Version',
value: '1.1.0'
},
platform: {
label: 'Platform',
value: navigator.platform
}
}
})
disableAttachment
Optional
Si disableAttachment est défini sur true, le SDK Web n'autorise pas l'utilisateur final à importer des photos, des vidéos ou d'autres pièces jointes dans les discussions. Consultez l'exemple suivant :
new UJET({
companyId: '....',
disableAttachment: true,
})
right
Optional
Position à droite du widget, et non du lanceur d'applications. Ajustez cette valeur en fonction de launcher.right. Consultez l'exemple ci-dessous :
new UJET({
right: '50px',
})
bottom
Optional
Positionnez-le sous le widget, et non sous le lanceur d'applications. Ajustez cette valeur en fonction de launcher.bottom. Consultez l'exemple ci-dessous :
new UJET({
bottom: '150px',
})
translation
Optional
Utilisez la fonctionnalité de traduction du SDK Web. Consultez l'exemple suivant :
new UJET({
translation: {
"en": {
"ujet_start_title": "English!",
"ujet_greeting": "Hi there!"
},
"es": {
"ujet_start_title": "¡Español!",
"ujet_greeting": "¡Hola!"
},
"fr": {
"ujet_start_title": "Français!",
"ujet_greeting": "Salut!"
},
"de": {
"ujet_start_title": "Deutsche!",
"ujet_greeting": "Hallo!"
},
"ja": {
"ujet_start_title": "日本語！",
"ujet_greeting": "こんにちは！"
}
}
})
Méthodes
Cette section contient les méthodes de l'objet UJET :
.on(event, callback)
Exécutez callback lorsque vous recevez le event donné :
ujet.on('ready', function() {
console.log('widget is ready')
})
Retrouvez tous les événements dans la documentation sur les événements.
.off(event, callback)
Supprime le callback donné des écouteurs d'événements.
function ready() {
console.log('widget is ready')
}
ujet.on('ready', ready)
ujet.off('ready', ready)
.authenticate(authData)
Envoyez la valeur token au widget. Cette méthode est généralement appelée dans l'événement created :
ujet.on('created', function() {
fetchToken().then(function(token) {
ujet.authenticate({ token: token })
})
})
.authenticate(authFunction)
Vous pouvez également transmettre une fonction à la méthode .authenticate. Cette fonction doit renvoyer un promise du token :
ujet.on('created', function() {
ujet.authenticate(function(callback) {
return fetchToken().then(function(token) {
return { token: token }
})
})
})
.start({ menuKey, ticketId })
Le widget est lancé lorsque l'utilisateur final clique sur le lanceur, mais il peut également être lancé avec le code suivant :
// if end user stayed in the web page for 10 senconds
setTimeout(function() {
ujet.start({ menuKey: 'help' })
}, 10000)
Si .start est associé à un menuKey, le widget accède directement à cette file d'attente.
.open()
.open est semblable à .start, mais n'accepte aucun paramètre.
setTimeout(function() {
ujet.open()
}, 10000)
.close()
Réduisez le widget de manière programmatique :
ujet.on('chat:status', function(status) {
if (status === 'timeout') {
ujet.close()
})
})
.destroy()
Détruisez le SDK Web. c'est-à-dire de la page Web actuelle.
.registerHook(event, fn)
Le event de .registerHook est différent de celui de .on. Cette fonction est généralement utilisée lorsque vous souhaitez utiliser votre propre lanceur :
// <button id="launcher">Click to open</button>
const ujet = new UJET({
// ...
launcher: false,
})
const launcher = document.getElementById('launcher')
launcher.addEventListener('click', function() {
if (ujet.status === 'open') {
ujet.close()
} else {
ujet.open()
}
});
ujet.registerHook('loading', function () {
launcher.textContent = 'loading'
})
ujet.registerHook('open', function () {
launcher.textContent = 'Click to close'
})
ujet.registerHook('close', function () {
launcher.textContent = 'Click to open'
})
Traduction
Voici la liste des clés disponibles pour personnaliser la traduction :
ujet_start_titleujet_greeting