Premiers pas

Intégrez les fonctionnalités de Contact Center AI Platform (CCAI Platform) à votre application Web à l'aide du SDK Web. Le SDK Web s'appuie sur le SDK Web sans interface graphique, ce qui rend toutes les méthodes de client sans interface graphique disponibles dans le widget du SDK Web. Cette page explique comment installer, initialiser et authentifier le SDK Web. Elle explique également comment masquer les boutons et les commandes permettant de démarrer de nouvelles conversations et de télécharger des transcriptions.

Pour obtenir de l'aide concernant l'installation du SDK Web, consultez les exemples d'implémentation sur GitHub.

Exemple de base

L'exemple de base ne nécessite que trois options :

companyId
host
Authenticate

Consultez la documentation du widget pour obtenir l'ID et l'hôte de votre entreprise.

HTML complet

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Basic demo</title>
</head>
<body>
  <!-- An empty element to mount the CCAI Platform web SDK widget. -->
  <div id="ccaas-widget"></div>

  <!-- Include the CCAI Platform web SDK widget -->
  <script src="https://{your_ccaas_host}web-sdk/v3/widget.js"></script>
  <script>
    var ccaas = new UJET({
      companyId: "$COMPANY_ID",
      host: "$HOST",
      authenticate: getAuthToken
    });
    ccaas.mount("#ccaas-widget");

    function getAuthToken() {
      // YOU SHOULD HAVE THIS KIND OF API ON YOUR SERVER
      return fetch('/auth/token').then(function(resp) {
        // { token: 'a JWT contains user identifier, name, and email' }
        return resp.json();
      });
    }
  </script>
</body>
</html>

Exemple de données personnalisées

L'exemple de données personnalisées est semblable à l'exemple de base. Vous devez configurer les données personnalisées avec .config({ customData }).

HTML complet

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Custom Data demo</title>
</head>
<body>
  <!-- An empty element to mount the CCAI Platform web SDK widget. -->
  <div id="ccaas-widget"></div>

  <!-- Include the CCAI Platform web SDK widget -->
  <script src="https://{your_ccaas_host}web-sdk/v3/widget.js"></script>
  <script>
    var ccaas = new UJET({
      companyId: "$COMPANY_ID",
      host: "$HOST",
      authenticate: getAuthToken
    });

    // use `.config` to configure custom data.
    ccaas.config({
      customData: {
        version: {
          label: 'Version',
          value: '1.0.0'
        }
      }
    });
    ccaas.mount("#ccaas-widget");

    function getAuthToken() {
      // YOU SHOULD HAVE THIS KIND OF API ON YOUR SERVER
      return fetch('/auth/token').then(function(resp) {
        // { token: 'a JWT contains user identifier, name, and email' }
        return resp.json();
      });
    }
  </script>
</body>
</html>

Préparation

Pour configurer et exécuter le SDK Web Contact Center AI Platform :

Incluez le script du widget du SDK Web.
Préparez un élément de montage.
Initialisez le SDK Web avec votre COMPANY_KEY.

Initialiser l'authentification avec votre COMPANY_SECRET à l'aide de votre code de backend

<!-- an empty element to mount the web SDK -->
<div id="ccaas-widget"></div>

<script src="https://{your_ccaas_host}web-sdk/v3/widget.js"></script>
<script>
  // const ccaas = new UJET({ ... })
</script>

Obtenir la clé de l'entreprise

Connectez-vous au portail Contact Center AI Platform à l'aide d'un compte disposant des autorisations d'administrateur.
Accédez à Paramètres > Paramètres du développeur.
Copiez la clé de l'entreprise sous la forme COMPANY_KEY.

Vous pouvez également obtenir le secret de l'entreprise ici. Le code secret est utilisé sur votre serveur backend pour créer un point de terminaison de jeton d'authentification. Pour en savoir plus, consultez la section Authentifier.

Initialisation…

Vous pouvez ensuite initialiser le SDK Web CCAI Platform avec la nouvelle méthode UJET(options). Si votre portail est https://{your_ccaas_host}, l'hôte est

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

Les options sont les mêmes que celles du Guide du SDK Web headless.

Authentification

getAuthToken est une fonction qui fait appel à un mécanisme de signature JWT depuis votre backend :

async function getAuthToken() {
  // YOU SHOULD HAVE THIS KIND OF API ON YOUR SERVER
  const resp = await fetch('/auth/token')
  const data = await resp.json()
  return { token: data.token }
}

Pour en savoir plus, consultez la section Authentifier.

Configurer le SDK

Configurez le SDK Web à l'aide de ccaas.config({...}).

Le code suivant liste les propriétés permettant de configurer le SDK Web :

export interface ConfigOptions {
  name?: string
  accent?: 'default' | 'blue' | 'green' | 'purple' | 'orange' | 'yellow' | 'gold' | 'red'
  logo?: string
  menuKey?: string
  ticketId?: string
  preferredChannel?: string
  disableAttachment?: boolean
  customData?: Record<string, any>
  signedCustomData?: string
  messages?: Record<string, unknown>
  disableLauncher?: boolean
  launcherOpenIcon?: string
  launcherCloseIcon?: string
  launcherLoadingIcon?: string
  optionsMenuIcon?: string
  confirmationIcon?: string
  enableMuteChat?: boolean
  tooltipIcon?: string
  hideNewConversation?: boolean
  hideDownloadTranscriptOptions?: boolean
  hideDownloadTranscriptPostChat?: boolean
}

Pour en savoir plus, consultez Fonctionnalités compatibles et Personnalisation des thèmes.

Masquer le bouton permettant de démarrer une nouvelle conversation à la fin d'une session

Vous pouvez configurer le SDK Web pour masquer le bouton Démarrer une nouvelle conversation dans la fenêtre de chat d'un utilisateur final à la fin d'une session. Pour ce faire, incluez la propriété hideNewConversation avec la méthode ccaas.config. Pour en savoir plus, consultez Configurer le SDK.

Masquer la commande permettant de télécharger une transcription pendant une session

Vous pouvez configurer le SDK Web pour masquer la commande Télécharger la transcription dans le menu des options de chat de la fenêtre de chat de l'utilisateur final pendant une session. Pour ce faire, incluez la propriété hideDownloadTranscriptOptions avec la méthode ccaas.config. Pour en savoir plus, consultez Configurer le SDK.

Masquer le bouton permettant de télécharger une transcription à la fin d'une session

Vous pouvez configurer le SDK Web pour masquer le bouton Télécharger la transcription dans la fenêtre de chat de l'utilisateur final à la fin d'une session. Pour ce faire, incluez la propriété hideDownloadTranscriptPostChat avec la méthode ccaas.config. Pour en savoir plus, consultez Configurer le SDK.

Monter le widget

Il est nécessaire de préparer un élément vide au début :

<div id="ccaas-widget"></div>

Nous pouvons ensuite installer le widget dans cet élément :

ccaas.mount('#ccaas-widget')

Utilisez le guide du SDK Web sans interface graphique pour créer vos propres widgets de chat et d'appel.

Installer

Vous pouvez installer le package avec npm :

npm install @ujet/websdk-headless --save

Vous pouvez également utiliser le script hébergé sur votre instance CCAI Platform :

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

<script>
  // const client = new HeadlessClient(...)
</script>

Intégrer le SDK

Connectez-vous au portail Contact Center AI Platform à l'aide d'un compte disposant des autorisations d'administrateur.
Accédez à Paramètres > Paramètres du développeur.
Copiez la clé de l'entreprise sous la forme COMPANY_KEY.

Si votre portail est https://{your_ccaas_host}, voici un exemple pour obtenir les informations sur l'entreprise :

import { Client } from "@ujet/websdk-headless"

async function authenticate() {
  const resp = await fetch("/your-auth-endpoint")
  const data = await resp.json()
  return { token: data.token }
}

const client = new Client({
  companyId: "COMPANY_KEY",
  host: "https://{your_ccaas_host}",
  authenticate: authenticate,
})

const company = await client.getCompany()

Premiers pas Restez organisé à l'aide des collections Enregistrez et classez les contenus selon vos préférences.

Exemple de base

HTML complet

Exemple de données personnalisées

HTML complet

Préparation

Obtenir la clé de l'entreprise

Initialisation…

Authentification

Configurer le SDK

Masquer le bouton permettant de démarrer une nouvelle conversation à la fin d'une session

Masquer la commande permettant de télécharger une transcription pendant une session

Masquer le bouton permettant de télécharger une transcription à la fin d'une session

Monter le widget

Installer

Intégrer le SDK

Premiers pas