Guida introduttiva

Integra le funzionalità di Contact Center AI Platform (CCAI Platform) nella tua applicazione web utilizzando l'SDK web. L'SDK web si basa sull'SDK web headless, rendendo disponibili tutti i metodi client headless nel widget dell'SDK web. Questa pagina mostra come montare, inizializzare e autenticare l'SDK web. Spiega inoltre come nascondere pulsanti e comandi per avviare nuove conversazioni e scaricare le trascrizioni.

Per assistenza con l'installazione dell'SDK web, consulta gli esempi di implementazione su GitHub.

Esempio di base

L'esempio di base richiede solo tre opzioni:

  1. companyId
  2. host
  3. Authenticate

Segui la documentazione del widget per ottenere l'ID e l'host della tua azienda.

HTML completo

<!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>

Esempio di dati personalizzati

L'esempio di dati personalizzati è simile all'esempio di base. Devi configurare i dati personalizzati con .config({ customData }).

HTML completo

<!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>

preparazione

Per configurare e avviare l'SDK web di Contact Center AI Platform:

  1. Includi lo script del widget dell'SDK web.

  2. Prepara un elemento di montaggio.

  3. Inizializza l'SDK web con il tuo COMPANY_KEY

  4. Inizializza l'autenticazione con COMPANY_SECRET utilizzando il codice 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>

Recupera la chiave dell'azienda

  1. Accedi al portale Contact Center AI Platform utilizzando un account con autorizzazioni amministrative.

  2. Vai a Impostazioni > Impostazioni sviluppatore.

  3. Copia la chiave dell'azienda come COMPANY_KEY.

Puoi anche ottenere il segreto dell'azienda qui. Il secret viene utilizzato nel server di backend per creare un endpoint del token di autenticazione. Per saperne di più, consulta la sezione Autenticazione.

Inizializzazione

Puoi quindi inizializzare l'SDK web di CCAI Platform con il nuovo metodo UJET(options). Se il tuo portale è https://{your_ccaas_host}, l'host è

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

Le opzioni sono le stesse della guida all'SDK web headless.

Autenticazione

getAuthToken è una funzione che richiama un meccanismo di firma JWT dal 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 }
}

Per saperne di più, consulta la sezione Autenticazione.

Configura l'SDK

Configura l'SDK web utilizzando ccaas.config({...}).

Il seguente codice elenca le proprietà per la configurazione dell'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
}

Per ulteriori informazioni, vedi Funzionalità supportate e Personalizzazioni dei temi.

Nascondere il pulsante per avviare una nuova conversazione alla fine di una sessione

Puoi configurare l'SDK web in modo da nascondere il pulsante Avvia una nuova conversazione nella finestra di chat di un utente finale al termine di una sessione. Per farlo, includi la proprietà hideNewConversation con il metodo ccaas.config. Per saperne di più, consulta Configurare l'SDK.

Nascondere il comando per scaricare una trascrizione durante una sessione

Puoi configurare l'SDK web in modo da nascondere il comando Scarica trascrizione dal menu delle opzioni della chat nella finestra di chat dell'utente finale durante una sessione. Per farlo, includi la proprietà hideDownloadTranscriptOptions con il metodo ccaas.config. Per saperne di più, consulta Configura l'SDK.

Nascondere il pulsante per scaricare una trascrizione al termine di una sessione

Puoi configurare l'SDK web in modo da nascondere il pulsante Scarica trascrizione nella finestra di chat dell'utente finale al termine di una sessione. Per farlo, includi la proprietà hideDownloadTranscriptPostChat con il metodo ccaas.config. Per maggiori informazioni, consulta Configura l'SDK.

Montare il widget

È necessario preparare un elemento vuoto all'inizio:

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

Poi possiamo montare il widget in questo elemento:

ccaas.mount('#ccaas-widget')

Utilizza la guida all'SDK web headless per creare i tuoi widget di chat e chiamate.

Installa

Puoi installare il pacchetto con npm:

npm install @ujet/websdk-headless --save

In alternativa, puoi utilizzare lo script ospitato nell'istanza della piattaforma CCAI:

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

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

Integrare l'SDK

  1. Accedi al portale Contact Center AI Platform utilizzando un account con autorizzazioni amministrative.

  2. Vai a Impostazioni > Impostazioni sviluppatore.

  3. Copia la chiave dell'azienda come COMPANY_KEY.

Se il tuo portale è https://{your_ccaas_host}, ecco un esempio per ottenere le informazioni sull'azienda:

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()