Funzionalità supportate

L'SDK web è progettato per funzionare su tutti i browser desktop e mobile moderni, ma supportiamo ufficialmente la versione più recente dei seguenti browser:

• Computer:

  • Chrome

  • Safari

  • Edge

• Android:

  • Chrome

  • Edge

• iOS:

  • Chrome

  • Safari

  • Edge

Trigger proattivi

Nota:

• Questa funzionalità è facoltativa.
• Non è disponibile alcuna API JavaScript per questa operazione.

I trigger proattivi consentono di avviare l'SDK web e inviare un messaggio ai consumatori in modo proattivo. Puoi configurare i trigger di chat proattivi in Contact Center AI Platform selezionando Impostazioni > Chat > Trigger di chat proattiva web.

Per saperne di più, consulta Trigger proattivi dell'SDK web.

Monitorare gli utenti

Se vuoi identificare gli utenti abituali nel tuo CRM o utilizzare risposte predefinite utilizzando le informazioni degli utenti, devi aggiungere identifiers agli utenti. L'utilizzo di risposte predefinite richiede un CRM.

L'autenticazione (aggiornamento dell'identificatore) può essere eseguita all'inizio di una sessione o a metà sessione. Per saperne di più sull'autenticazione a metà sessione, consulta Autenticazione a metà sessione tramite API.

Identificatore

Attenzione: non utilizzare PII o valori enumerabili.

Quando avvii una chiamata o una chat, il nostro sistema si basa su un identificatore per l'autenticazione dell'utente. Puoi specificare il valore che preferisci per il campo identificatore durante la configurazione. Se disponi già di un GUID (identificatore univoco globale) per i tuoi utenti, puoi utilizzarlo per l'identificazione degli utenti. Tuttavia, se l'identificatore che hai per un utente è enumerabile o contiene informazioni che consentono l'identificazione personale (PII), devi eseguirne l'hashing per una maggiore sicurezza.

Gli identificatori devono essere aggiunti nelle seguenti posizioni:

1. Passa al backend in getAuthToken()

   function getAuthToken() {
     // YOU SHOULD HAVE THIS KIND OF API ON YOUR SERVER
     return fetch('/auth/token', {
       headers: {
         'Content-Type': 'application/json'
       },
       method: "POST",
       body: JSON.stringify({
         payload: {
           identifier: 'c727f2851b64b29761da170d0adee67a9a89c2d9960c8eee0ae53737413cfa4e',
           name: 'Test user',
           email: '[e-mail]',
           phone: '18008675309'
         }
       })
     }).then(function(resp) {
       return resp.json();
     });
   }
   

2. Aggiungi al payload durante la codifica del JWT.

   const express = require('express');
   const jwt = require('jsonwebtoken');
   
   const port = process.env.PORT || 3000;
   const secret = process.env.COMPANY_SECRET || 'secret';
   
   const app = express();
   
   app.use(express.json());
   
   app.post('/auth/token', function (req, res) {
     const payload = req.body.payload;
     payload['iss'] = 'YOUR_COMPANY_NAME';
     const iat = parseInt(Date.now() / 1000, 10);
     payload['iat'] = iat;
     payload['exp'] = iat + 600;
   
     const token = jwt.sign(payload, secret, { algorithm: 'HS256' });
     res.json({ token });
   });
   
   app.listen(port, function () {
     console.log(`Listening at http://localhost:${port}`);
   });
   

3. Aggiungere opzioni aggiuntive in authentication()

   new UJET({`
     // ...
     authenticate: function() {
       return getAuthToken().then({ token } => {
         return {
           token: token,
           user: {
             identifier: YOUR_UNIQUE_USER_ID,
             name: 'Test user', //optional,
             email: '[e-mail]', //optional,
             phone: '000000000' //optional
           }
         };
       });
     },
   })
   

Trasferimento di chatbot esterni

Nota: questa funzionalità è facoltativa.

Quando trasferisci una chat dall'agente virtuale all'agente, puoi ignorare il messaggio di saluto e passare le trascrizioni all'agente compilando il campo external_chat_transfer con i dati personalizzati. greeting_override supporta la formattazione Markdown.

ccaas.config({
  customData: {
    "external_chat_transfer": {
      "greeting_override": "YOUR GREETING MESSAGE."
    }
  }
"agent": {
      "name": "Agent Name",
      "avatar": "https://ujet.s3.amazonaws.com/default-virtual-agent-avatar-1.png"
    },
    "transcript": [
      {
        "sender": "agent",
        "timestamp": "2021-03-15 12:00:00Z",
        "content": [
          {
            "type": "text",
            "text": "Hello! How can I help you today?"
          },
          {
            "type": "buttons",
            "buttons": [
              {
                "label": "Create New Order",
                "selected": false
              },
              {
                "label": "Check Order Status",
                "selected": true
              },
              {
                "label": "Check Account Balance",
                "selected": false
              }
            ]
          }
        ]
      },
      {
        "sender": "end_user",
        "timestamp": "2021-03-15 12:00:15Z",
        "content": [
          {
            "type": "text",
            "text": "Check Order Status"
          }
        ]
      },
      {
        "sender": "agent",
        "timestamp": "2021-03-15 12:00:16Z",
        "content": [
          {
            "type": "text",
            "text": "I can help you with that, what's your order number?"
          }
        ]
      },
      {
        "sender": "end_user",
        "timestamp": "2021-03-15 12:00:20Z",
        "content": [
          {
            "type": "media",
            "media": {
              "type": "image",
              "url": "https://ujet.s3.amazonaws.com/default-virtual-agent-avatar-1.png"
            }
          }
        ]
      }
    ]
  }
}

Nome azienda

Scegli un name personalizzato anziché il nome dell'API dell'azienda.

ccaas.config({
  name: 'ACME',
})

Deviazione della chat

Quando gli agenti non sono disponibili, puoi specificare le opzioni per gestire automaticamente la situazione con le deviazioni.

Le opzioni di deviazione della chat sono disponibili nel portale in Impostazioni > Chat > Deviazioni web e mobile.

Punti di accesso diretto (DAP)

Puoi indirizzare un utente direttamente a una coda specifica nella struttura delle code utilizzando punti di accesso diretto.

Per utilizzare un punto di accesso diretto, devi prima crearne uno nel portale.

1. Nel portale della piattaforma CCAI, fai clic su Impostazioni > Coda. Se non vedi il menu Impostazioni, fai clic su Menu.

2. Attiva Usa per il menu Web e vai a MODIFICA / VISUALIZZA.

3. Seleziona una coda qualsiasi dalla struttura delle code.

   

4. Fai clic su Crea punto di accesso diretto.

5. Tipo del punto di accesso = Generale.

   

6. Aggiungi i dati di input per il punto di accesso diretto nella finestra di dialogo. Tieni presente che il campo General Access Point Label corrisponde a MenuKey menzionato nel passaggio successivo.

7. Fai clic su CREA.

Una volta configurata utilizzando il portale, puoi indirizzare un utente a una coda specifica utilizzando MenuKey:

ccaas.config({
  menuKey: 'vip'
})

ID ticket

Se hai un ticket esistente per un consumatore, puoi recuperare l'ID ticket dal tuo CRM e passarlo all'SDK web:

retrieveTicket().then(ticket => {
  ccaas.config({ ticketId: ticket.id })
})

Selezione automatica del canale

Utilizzando preferredChannel, puoi selezionare automaticamente un canale quando un consumatore seleziona una coda specifica:

ccaas.config({
  preferredChannel: 'chat'
})

Disattivazione degli allegati

Per impostazione predefinita, l'SDK web consente ai consumatori di caricare foto e video durante una sessione di chat. Puoi disattivarla utilizzando il seguente script:

ccaas.config({
  disableAttachment: false
})

Trasmissione di dati personalizzati

Quando viene avviata una chat, è possibile inviare dati personalizzati con l'oggetto chat. I dati personalizzati possono essere qualsiasi cosa, dal sistema operativo alla versione, alla posizione o a qualsiasi altro dato che possa essere pertinente alla rispettiva chat.

Puoi aggiungere dati personalizzati non firmati utilizzando la configurazione customData.

Il formato dei dati personalizzati è simile a un oggetto JSON ed è composto da key, label e value.

ccaas.config({
  customData: {
    k1: {
      label: 'Version',
      value: '1.1.0'
    },
    k2: {
      label: 'Platform',
      value: navigator.platform
    }
  }
})

Key: un identificatore univoco per i dati. Nell'esempio precedente, k1 e k2 sono chiavi.

Label: il nome visualizzato nella pagina CRM.

Value: il valore dell'etichetta

Puoi aggiungere dati personalizzati firmati utilizzando la configurazione signedCustomData:

ccaas.config({
  signedCustomData: "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.n...."
})

signedCustomData è una stringa JWT con algoritmo HS256.

SIGN_JWT(
  algorithm='HS256',
  secret=YOUR_COMPANY_SECRET,
  payload={
    custom_data: {
      version: {
        label: 'Version',
        value: '1.0.0'
      },
      ...
    },
    iss: 'YOUR TENANT',
    iat: NOW,
    exp: NOW + 3600,
  }
)

Supporto di più lingue

Il campo lang può essere utilizzato per controllare la lingua predefinita all'avvio e per supportare più lingue. Se omesso, il valore predefinito è l'inglese (en). La lingua predefinita può essere configurata per ogni pagina del tuo sito web. Se nel tuo tenant sono disponibili altre lingue, al consumatore verrà offerta la possibilità di passare a un'altra lingua.

client.getMenus(key?: string, lang?: string)

Il metodo .getMenus accetta un parametro lang facoltativo. Se non viene passato il parametro lang a .getMenus, questo metodo utilizzerà l'opzione lang predefinita.

Esempio:

const client = new Client({
  // ...
  lang: 'ja',
})

Questa opzione è accessibile utilizzando la seguente proprietà:

console.log(client.lang)

Sono supportate le seguenti lingue, che utilizzano le abbreviazioni indicate nella tabella seguente:

Lingua	Abbreviazione
Inglese	it
Inglese (Canada)	en-CA
Inglese (Regno Unito)	en-GB
Inglese (Australia)	en-AU
Inglese (India)	en-IN
Spagnolo (Spagna)	es
Spagnolo (Messico)	es-MX
Francese (Canada)	fr-CA
Tedesco	de
Giapponese	ja
Coreano	ko
Italiano	che li ricevano.
Cinese (semplificato)	zh
Cinese (tradizionale)	zh-Hant
Svedese	sv
Portoghese	pt
Portoghese (Brasile)	pt-BR
Finlandese	fi
Norvegese	nb
Danese	da
Olandese	nl
Turco	tr
Vietnamita	vi
Tailandese	th
Arabo	ar
Ceco	cs
Polacco	pl
Ungherese	hu
Russo	ru
Hindi	ciao
Romeno	ro
Croato	h
Ucraino	uk
Tagalog	tl

Per saperne di più sulle traduzioni, consulta la sezione Personalizzazione di messaggi e traduzioni.

Avvio programmatico dell'interfaccia utente web

Nota: questo passaggio è facoltativo. Senza questo passaggio, i consumatori possono avviare l'interfaccia utente web facendo clic sull'icona di avvio dell'interfaccia utente web.

Questo passaggio ti consente di aprire l'interfaccia utente web in modo programmatico con il metodo ccaas.start(options).

In alcuni casi, potresti voler che il consumatore faccia clic su un pulsante aggiuntivo per aprire la UI dell'SDK web.

Esempio:

<button id="launcher">Click to open</button>

var ccass = new UJET({
  companyId: "YOUR_COMPANY_ID",
  host: "HOST_URL",
  authenticate: getAuthToken,
});

ccass.config({disableLauncher: true})

var launcher = document.getElementById('launcher');
launcher.addEventListener('click', function() {
  if (ccass.visible) {
    ccaas.hide();
    launcher.textContent = 'Click to open';
  } else {
    ccaas.show();
    launcher.textContent = 'Click to close';
  }
});

ccass.on('ready', function() {
  launcher.textContent = 'ready to talk';
});

Puoi anche chiudere il widget con il metodo ccass.close() e rimuoverlo con il metodo ccass.destroy().

Chiusura programmatica dell'interfaccia utente web

Nota: questo passaggio è facoltativo. Senza questo passaggio, la GUI web verrà completata e ridotta a icona automaticamente.

Questo passaggio consente di chiamare la funzione di callback quando il consumatore vuole chiudere l'SDK web.

ccass.on('visible', function(visible) {console.log(visible) })

Visualizzare informazioni sulle sessioni di chat attive

Puoi ottenere informazioni sulle sessioni di chat attive, incluso l'ID chat.

Vedi il seguente esempio:

ccass.getOngoingChat()

Se è presente una sessione di chat attiva, vengono restituiti i metadati della chat. Se non sono presenti sessioni di chat attive, viene restituito null.

Puoi utilizzare questa opzione per impedire ai consumatori di aprire più sessioni di chat nascondendo in modo condizionale l'SDK se è in corso una chat attiva.

Monitorare lo stato di apertura o chiusura di più schede o finestre

Puoi sincronizzare lo stato di apertura o chiusura dell'SDK tra più schede o finestre del tuo sito web. Utilizza lo snippet di codice per monitorare lo stato dell'SDK nell'archivio locale:

ccass.on('visible', (isVisible) => {
 localStorage['ujetOpen'] = isVisible ? 'yes' : 'no'
})
if (localStorage['ujetOpen'] == 'yes') {
 ccass.show()
} else {
 ccass.hide()
}

Personalizzare le finestre di dialogo di consenso alla condivisione schermo e il pulsante di fine

modello

Con questa opzione puoi personalizzare il modello di finestra di dialogo di condivisione dello schermo. Il valore predefinito template è:

<dialog open class="cobrowse-dialog">
  <h1>$title</h1>
  <div class="cobrowse-dialog_content">$content</div>
  <div class="cobrowse-dialog_footer">
    <button class="cobrowse-dialog_allow js-cobrowse-allow">$allow</button>
    <button class="cobrowse-dialog_deny js-cobrowse-deny">$deny</button>
  </div>
</dialog>

Questo template viene utilizzato per:

• Finestra di dialogo di conferma della consulenza

• Finestra di dialogo di conferma del telecomando

• Finestra di dialogo di conferma del dispositivo completo

I parametri nel modello verranno sostituiti dai contenuti nell'opzione messages.

confirmSessionTemplate

Questa opzione viene utilizzata per personalizzare la finestra di dialogo di conferma della sessione.

confirmRemoteControlTemplate

Questa opzione viene utilizzata per personalizzare la finestra di dialogo di conferma del telecomando.

confirmFullDeviceTemplate

Questa opzione viene utilizzata per personalizzare la finestra di dialogo di conferma del dispositivo completo.

sessionControlsTemplate

Questa opzione viene utilizzata per personalizzare il pulsante dei controlli della sessione. Il modello predefinito è:

<button class="cobrowse-end js-cobrowse-end">$end</button>

Messaggi

I modelli precedenti contengono le seguenti variabili di messaggio:

• $title

• $content

• $allow

• $deny

Queste variabili verranno sostituite da:

{
  confirmSessionTitle: string;  // $title
  confirmSessionContent: string;  // $content
  confirmRemoteControlTitle: string;  // $title
  confirmRemoteControlContent: string;  // $content
  confirmFullDeviceTitle: string;  // $title
  confirmFullDeviceContent: string;  // $content
  allowText: string;  // $allow
  denyText: string;  // $deny
  endSessionText: string;  // $end
}

Abbiamo integrato messaggi di condivisione schermo, ad esempio i messaggi per le impostazioni internazionali en:

{
  "confirmSessionTitle": "Screen Share Session Request",
  "confirmSessionContent": "Do you want to share your current screen with the agent?",
  "endSessionText": "End Screen Share Session",
  "confirmRemoteControlTitle": "Remote Access Request",
  "confirmRemoteControlContent": "The agent would like to have access to your currently shared screen to further assist you. Do you want to allow this?",
  "confirmFullDeviceTitle": "Screen Share Request",
  "confirmFullDeviceContent": "Do you want to share your full screen with the agent? The agent will not be able to control anything on the screen.",
  "allowText": "Allow",
  "denyText": "Deny"
}