Guida all'installazione dell'SDK web

Questa pagina spiega come installare e utilizzare l'SDK web Contact Center AI Platform (CCAI Platform). Per aiutarti a iniziare, Google consiglia di scaricare e utilizzare i nostri file di esempio della versione 2 dell'SDK web.

Prima di iniziare

  1. Includi il caricatore dell'SDK web della piattaforma CCAI nel tuo client web.

    <script src="https://websdk.ujet.co/v2/loader.js"></script>

  2. Inizializza l'SDK web della piattaforma CCAI con la tua COMPANY_KEY.

  3. Inizializza l'autenticazione con COMPANY_SECRET utilizzando il codice di backend.

Flusso di lavoro di installazione

Flusso di lavoro di installazione

Inizia

Le sezioni seguenti forniscono informazioni per iniziare a utilizzare l'SDK web di CCAI Platform.

Inizializza l'SDK web

Puoi inizializzare l'SDK web utilizzando la chiave della tua azienda.

Ottenere la chiave dell'azienda

Per ottenere la chiave aziendale:

  1. Accedi al portale CCAI Platform utilizzando le credenziali di amministratore.

  2. Fai clic su Menu, poi su Impostazioni > Impostazioni sviluppatore.

  3. Vai al riquadro Chiave e codice segreto dell'azienda e salva il codice nel campo Chiave dell'azienda.

Puoi quindi inizializzare l'SDK web con il metodo UJET(config) e l'evento ujet.on('created', function). Fornisci l'host dell'istanza della piattaforma CCAI, ad esempio myccaip.uc1.ccaiplatform.com.

// INITIALIZE WEB SDK
var ujet = new UJET({
  companyId: "YOUR_COMPANY_ID",
  host: "https://myccaip.uc1.ccaiplatform.com",
});

ujet.on('created', function () {
  ujet.authenticate(getAuthToken);
});

In alternativa, puoi utilizzare l'opzione di autenticazione senza un evento creato:

var ujet = new UJET({
  companyId: "YOUR_COMPANY_ID",
  authenticate: getAuthToken,
  host: "https://myccaip.uc1.ccaiplatform.com",
});

dove getAuthToken() è una funzione che richiama un meccanismo di firma JWT dal backend:

function getAuthToken() {
  // YOU SHOULD HAVE THIS KIND OF API ON YOUR SERVER
  return fetch('/auth/token')
    .then(function(resp) {
      // { token: '....' }
      return resp.json();
    });
}

dove fetch() richiama un meccanismo di firma JWT dal backend. Per saperne di più, consulta l'API Fetch di Mozilla.

Configurare l'SDK web per la navigazione condivisa

La navigazione condivisa è una funzionalità facoltativa che consente a un agente di vedere lo schermo di un utente finale e, facoltativamente, di prenderne il controllo. Per utilizzare la navigazione condivisa, devi fornire il dominio di navigazione condivisa ecodice licenzaa dell'istanza di CCAI Platform durante l'inizializzazione dell'SDK.

Per configurare l'SDK web per la navigazione condivisa:

  1. Per ottenere il dominio di co-browsing e codice licenza dell'istanza di CCAI Platform:

    1. Accedi al portale CCAI Platform utilizzando le credenziali di amministratore.

    2. Fai clic su Menu, poi su Impostazioni > Impostazioni sviluppatore.

    3. Vai al riquadro Co-browsing e fai clic sul pulsante di attivazione/disattivazione in modo che sia impostato su On.

    4. Salva i valori nei campi Dominio di co-browsing e Chiave di licenza.

  2. Per fornire il dominio di co-browsing e codice licenza durante l'inizializzazione dell'SDK, includi il seguente codice quando inizializzi l'SDK web:

    var ujet = new UJET({
  // other options
  cobrowseOptions: {
    license: "LICENSE_KEY",
    trustedOrigins: ["CO-BROWSE_DOMAIN"],
    api: "CO-BROWSE_DOMAIN"
  },
  // other options
})

    Sostituisci quanto segue:

    • LICENSE_KEY: il codice licenza che hai salvato nel passaggio precedente

    • CO-BROWSE_DOMAIN: il dominio di co-browsing salvato nel passaggio precedente

Per saperne di più, vedi Configurare la navigazione condivisa.

Inizializza l'autenticazione con il segreto della tua azienda

La funzione getAuthToken() deve chiamare la tua API e codificare il payload con il tuo COMPANY_SECRET.

Ecco un esempio di firma JWT utilizzando ExpressJS:

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 = {}
  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(`Listing at http://localhost:${port}`)
})

Puoi utilizzare qualsiasi servizio di backend.

Policy di sicurezza dei contenuti

Se il server di produzione ha una policy di sicurezza del contenuto, aggiungi https://websdk.ujet.co/ a script-src e frame-src.

Supporto per Internet Explorer 11

Per supportare Internet Explorer, nel nostro codice viene utilizzato babel-polyfill. Se anche il tuo sito web utilizza babel-polyfill, non importarlo nell'SDK web, in quanto l'utilizzo della stessa libreria a livello globale e nell'SDK web potrebbe causare un'eccezione. Prima di importare il pacchetto, ti consigliamo di aggiungere codice per verificare questa condizione e contribuire a prevenirla.

Monitorare gli utenti

L'esempio precedente non tiene traccia degli utenti. Se vuoi identificare gli utenti abituali nel tuo CRM e utilizzare risposte predefinite con le informazioni degli utenti, devi aggiungere identificatori agli utenti.

Per farlo, devi aggiungere gli identificatori nei seguenti punti:

  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: 'test@user.com',
        phone: '1800UJETSDK'
      }
    })
  }).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(`Listing 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: 'test@user.com', //optional,
          phone: '000000000' //optional
        }
      };
    });
  },
})

Trasferimento di chatbot esterni

Quando trasferisci una chat dall'agente virtuale all'agente, puoi ignorare il messaggio di saluto e passare le trascrizioni all'agente inserendo il campo external_chat_transfer nei dati personalizzati. L'override del saluto supporta la formattazione Markdown.

{
  "external_chat_transfer": {
    "greeting_override": "Please hold while we connect you with a human agent.",
    "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": "txt",
            "text": "Ceck Order Status"
          }
        ]
      },
      {
        "sender": "aget",
        "timestamp": "021-03-15 12:00:16Z",
        "content": [
          {
            "type": "txt",
            "text": "Ican help you with that, what's your order number?"
          }
        ]
      },
      {
        "sender": "enduser",
        "timestamp": "021-03-15 12:00:20Z",
        "content": [
          {
            "type": "mdia",
            "media": {
              "type": image",
              "url": "https://ujet.s3.amazonaws.com/default-virtual-agent-avatar-1.png"
            }
          }
        ]
      }
    ]
  }
}

Chat unsigned custom data

Quando viene avviata una chat, puoi trasmettere dati personalizzati con l'oggetto chat. I dati personalizzati possono essere il sistema operativo, il numero di versione, la posizione o qualsiasi altro dato che potrebbe essere pertinente alla chat. Questi dati non sono criptati e pertanto non devono contenere informazioni che consentono l'identificazione personale (PII).

Puoi anche passare questi dati personalizzati a un agente virtuale. Per saperne di più, vedi Agenti virtuali.

var ujet = new UJET({
  // other parameters
  customData: {
    version: {
      label: 'Version',
      value: '1.1.0'
    },
    platform: {
      label: 'Platform',
      value: navigator.platform
    }
  },
});

Il formato dei dati personalizzato è simile a JSON. Ogni campo di dati contiene una chiave, un'etichetta e un valore. Ecco un esempio:

{
  "k1": {
    "label": "Version",
    "value": "1.2.3"
  },
  "k2": {
    "label": "Dashboard",
    "value": "http://example.com"
  }
}

In questo esempio, k1 e k2 sono chiavi. label è un'etichetta su una pagina CRM e value è il valore dell'etichetta.

Impedire la visualizzazione di dati personalizzati

Puoi utilizzare la proprietà invisible_to_agent con un oggetto customData per impedire la visualizzazione di dati personalizzati firmati o non firmati nell'adattatore dell'agente. Nell'esempio seguente, la versione viene mostrata nell'adattatore dell'agente, ma la piattaforma non viene visualizzata.

var ujet = new UJET({
  // Other parameters
});

ujet.config({
  customData: {
    version: {
      label: 'Version',
      value: '1.1.0'
      invisible_to_agent: true
    },
    platform: {
      label: 'Platform',
      value: navigator.platform
      invisible_to_agent: false
    }
  }
});

Quando includi la proprietà "invisible_to_agent" : true con un oggetto dati personalizzato, puoi aspettarti il seguente comportamento:

Per saperne di più, consulta Visualizzare i dati delle sessioni nell'adattatore dell'agente.

Proprietà dei dati riservate

Puoi inviare proprietà dei dati riservate a Contact Center AI Platform (CCAI Platform) come dati personalizzati firmati all'inizio di una sessione. Per saperne di più, consulta Inviare proprietà dei dati riservati.

Di seguito è riportato un esempio di proprietà dei dati riservate nei dati personalizzati:

  {
    "custom_data": {
      "reserved_verified_customer": {
        "label": "Verified Customer",
        "value": "VERIFIED_CUSTOMER_BOOLEAN": ,
        "type": "boolean"
      },
      "reserved_bad_actor": {
        "label": "Bad Actor",
        "value": "VERIFIED_BAD_ACTOR_BOOLEAN": ,
        "type": "boolean"
      },
      "reserved_repeat_customer": {
        "label": "Repeat Customer",
        "value": "REPEAT_CUSTOMER_BOOLEAN": ,
        "type": "boolean"
      }
    }
  }

Sostituisci quanto segue:

  • VERIFIED_CUSTOMER_BOOLEAN: True se consideri questo utente finale un cliente legittimo.
  • VERIFIED_BAD_ACTOR_BOOLEAN: True se ritieni che questo utente finale possa essere un malintenzionato.
  • REPEAT_CUSTOMER_BOOLEAN: True se hai stabilito che questo utente finale ha contattato il tuo contact center in precedenza.

Disattivare gli allegati

Puoi impedire ai consumatori di caricare allegati con l'opzione disableAttachment:

new UJET({
// ...
  disableAttachment: true
});

Con disableAttachment: true, non ci sarà alcuna icona di allegato nell'area di input della chat e i consumatori non potranno trascinare i file nell'area del messaggio.

Deviazione della chat

Quando gli agenti non sono disponibili, puoi specificare le opzioni per gestire automaticamente questa condizione per le chat web e mobile.

Le opzioni per la deviazione della chat sono disponibili nel portale CCAI Platform, in Impostazioni>Chat>Deviazione web e mobile.

Deviazione dopo la chiusura

Il reindirizzamento dopo la chiusura è specifico per il contact center o la coda che si trova al di fuori dell'orario di apertura. Per attivare il trasferimento al di fuori dell'orario di apertura:

  1. Nel portale della piattaforma CCAI, in Impostazioni > Chat > Deflezione web e mobile.

  2. Se l'opzione Deviazione fuori orario è disattivata, può essere attivata selezionando l'opzione Deviazione fuori orario.

  3. Modifica l'opzione Consenti trasferimenti per consentire i trasferimenti alle code al di fuori dell'orario di apertura per il seguente comportamento:

    • Gli agenti potranno visualizzare le seguenti code come opzioni di trasferimento nell'adattatore agente:

      • Tutte le code durante l'orario di apertura

      • Tutte le code al di fuori dell'orario di apertura senza deviazione abilitata e agenti connessi attivi

      • Tutte le code che sono fuori orario con un agente virtuale assegnato in modalità di disponibilità 24 ore

    • Gli agenti non potranno visualizzare i seguenti tipi di code:

      • Tutte le code che sono fuori orario con la deviazione fuori orario attivata

      • Tutte le code al di fuori dell'orario di servizio con un agente virtuale assegnato limitato all'orario di servizio della coda

Deviazione per capacità in eccesso

L'indirizzamento in caso di superamento della capacità è specifico per la capacità attuale dell'agente e per il tempo di attesa attuale per la coda a cui è assegnata la sessione. Per abilitare questa opzione:

  1. Nel portale della piattaforma Contact Center AI, in Impostazioni > Chat > Web e dispositivi mobili Deflezione.

  2. Se l'opzione Deviazione per sovra capacità è disattivata, seleziona il pulsante di attivazione/disattivazione Deviazione per sovra capacità per attivarla.

  3. Imposta il tempo di attesa in minuti che cambierebbe lo stato della coda in sovra capacità.

    Questa impostazione della soglia di tempo viene utilizzata anche per impostare la frequenza con cui l'utente finale visualizzerà il messaggio di sovraccarico.

Opzioni di deviazione

È possibile specificare le opzioni disponibili per l'utente finale quando si verifica la deviazione.

Email

Se abilitata, l'opzione email consente all'utente finale di essere reindirizzato all'email. Quando l'utente finale avvia una sessione di chat web o mobile al di fuori dell'orario di lavoro, gli viene chiesto se vuole scrivere un'email.

Il comportamento specifico è il seguente:

  • Dispositivo mobile:se il reindirizzamento delle email è attivato e la soglia del tempo di attesa stimato è stata raggiunta, quando l'utente finale tocca l'opzione Chat, viene indirizzato all'app email predefinita. La versione dell'app e la versione di iOS/Android vengono inserite automaticamente nel corpo dell'email e l'oggetto è Assistenza per [percorso del menu selezionato]. In alternativa, il modulo email potrebbe essere attivato. Per maggiori informazioni, vedi Modulo email integrato per SDK per dispositivi mobili e web.

  • Web:presenta un'opzione Email agli utenti finali. Quando viene selezionato, viene visualizzato un modulo email. Per ulteriori informazioni, consulta Modulo email integrato per SDK web e mobile.

  • Continua ad attendere (solo web): consente all'utente finale di fare clic su un'opzione per continuare ad attendere.

Le finestre di dialogo per il consenso alla navigazione condivisa consentono a un utente finale di acconsentire a una richiesta iniziale di sessione di navigazione condivisa, nonché a una successiva richiesta di controllo remoto o di accesso completo al dispositivo. Quando configuri l'SDK web per la navigazione condivisa, l'SDK web fornisce finestre di dialogo per il consenso e pulsanti di fine sessione predefiniti. Tuttavia, puoi aggiungere campi facoltativi all'oggetto cobrowseOptions che ti consentono di personalizzare le finestre di dialogo per il consenso e il pulsante di fine sessione. In questo modo, non solo puoi controllare l'aspetto di questi elementi, ma puoi anche personalizzare le dichiarazioni di consenso nelle finestre di dialogo per soddisfare i tuoi requisiti.

In una finestra di dialogo per il consenso viene visualizzata una dichiarazione di consenso. La dichiarazione di consenso indica all'utente finale il comportamento che può aspettarsi dall'esperienza di navigazione condivisa e a cosa sta dando il consenso. Se intendi registrare una sessione di navigazione condivisa, devi specificarlo nella dichiarazione di consenso. Consulta Esempio di codice per finestre di dialogo per il consenso personalizzate per esempi di finestre di dialogo per il consenso personalizzate che contengono dichiarazioni di consenso.

Procedura

Per configurare l'SDK web per la navigazione condivisa e personalizzare le finestre di dialogo del consenso, segui questi passaggi:

  1. Per ottenere il dominio di co-browsing e codice licenza dell'istanza di CCAI Platform:

    1. Accedi al portale CCAI Platform utilizzando le credenziali di amministratore.

    2. Fai clic su Menu, poi su Impostazioni > Impostazioni sviluppatore.

    3. Vai al riquadro Co-browsing e poi fai clic sul pulsante di attivazione/disattivazione per attivare la funzionalità.

    4. Salva i valori nei campi Dominio di co-browsing e Chiave di licenza.

  2. Per inizializzare l'SDK web e includere i campi di personalizzazione della navigazione condivisa, esegui il seguente codice:

    var ujet = new UJET({
  // other options
  cobrowseOptions: {
    license: "LICENSE_KEY",
    trustedOrigins: ["CO-BROWSE_DOMAIN"],
    api: "CO-BROWSE_DOMAIN"
    cobrowseRequestHtml: "COBROWSE_REQUEST_HTML",
    remoteControlHtml: "REMOTE_CONTROL_HTML",
    fullDeviceHtml: "FULL_DEVICE_HTML",
    styles: "STYLES",
    sessionControlsHtml: "SESSION_CONTROLS_HTML"
  },
  // other options
})

    Sostituisci quanto segue:

Classi di pulsanti

Le finestre di dialogo per il consenso contengono pulsanti che consentono all'utente di accettare o rifiutare la richiesta di co-browsing oppure di chiudere la finestra di dialogo per il consenso. Affinché questi pulsanti comunichino con l'SDK web, devi associare le seguenti classi di pulsanti ai tipi di pulsanti corrispondenti. L'SDK web cerca queste classi nel codice e aggiunge un listener di eventi per ciascuna. Ecco le classi dei pulsanti:

  • cobrowse-allow: un pulsante per l'utente finale per consentire la richiesta

  • cobrowse-deny: un pulsante che consente all'utente finale di rifiutare la richiesta

  • cobrowse-close: un pulsante per l'utente finale per chiudere la finestra di dialogo per il consenso

Il seguente esempio di codice contiene finestre di dialogo per il consenso personalizzate, un pulsante di fine sessione e informazioni sullo stile di questi elementi. Ogni finestra di dialogo per il consenso nell'esempio contiene una dichiarazione di consenso. Di seguito sono riportate le proprietà delle finestre di dialogo per il consenso per ciascuna delle tre modalità di navigazione condivisa:

"cobrowseOptions": {
    "license": "example_license",
    "trustedOrigins": "[https://example.com]",
    "cobrowseRequestHtml": "<div class=\"custom-backdrop\">\n <div class=\"cobrowse-confirm-dialog\">\n <div class=\"title\">\n <div></div>\n <span>Co-browse</span>\n <div class=\"cobrowse-close cobrowse-deny\">\n <svg width=\"14\" height=\"14842 13.1765 11.5294L8.64706 7L13.1765 2.47059C13.6313 2.01577 13.6313 1.27835 13.1765 0.823529C12.7216 0.368707 11.9842 0.368706 11.5294 0.823529L7 5.35294Z\" fill=\"#919191\"/>\n </svg>\n </div>\n </div>\n <div class=\"body\">\n <h2>Get step-by-step live and secure guidance with a Care Expert</h2>\n \n <ul>\n <li>Stop screen sharing at any time</li>\n <li>Personal info automatically hidden</li>\n  <li>Only your_company_name screens are shared</li>\n </ul>\n </div>\n <div class=\"description\">\n <svg id=\"loader\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><line x1=\"12\" y1=\"2\" x2=\"12\" y2=\"6\"></line><line x1=\"12\" y1=\"18\" x2=\"12\" y2=\"22\"></line><line x1=\"4.93\" y1=\"4.93\" x2=\"7.76\" y2=\"7.76\"></line><line x1=\"16.24\" y1=\"16.24\" x2=\"19.07\" y2=\"19.07\"></line><line x1=\"2\" y1=\"12\" x2=\"6\" y2=\"12\"></line><line x1=\"18\" y1=\"12\" x2=\"22\" y2=\"12\"></line><line x1=\"4.93\" y1=\"19.07\" x2=\"7.76\" y2=\"16.24\"></line><line x1=\"16.24\" y1=\"7.76\" x2=\"19.07\" y2=\"4.93\"></line></svg>\n <span>\n Co-browse lets us view your active session in a limited way to give you live, on-screen assistance. We won't be able to view any other applications on your device.\n </span>\n </div>\n <div class=\"footer\">\n <span>\n By tapping accept & continue, you are consenting to allow the your_company_name Expert to view your screen to initiate assisted navigation. <a href=\"https://www.example.com\">View the your_company_name Privacy Policy</a>\n </span>\n <button class=\"cobrowse-allow\">Accept & continue</button>\n </div>\n </div>\n </div>\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M7 5.35294L2.47059 0.823529C2.01577 0.368707 1.27835 0.368707 0.823529 0.823529C0.368707 1.27835 0.368706 2.01576 0.823529 2.47059L5.35294 7L0.823529 11.5294C0.368707 11.9842 0.368707 12.7216 0.823529 13.1765C1.27835 13.6313 2.01576 13.6313 2.47059 13.1765L7 8.64706L11.5294 13.1765C11.9842 13.6313 12.7216 13.6313 13.1765 13.1765C13.6313 12.7216 13.6313 11.9",
    "remoteControlHtml": "<div class=\"custom-backdrop\">\n <div class=\"cobrowse-confirm-dialog\">\n <div class=\"title\">\n <div></div>\n <span>Co-browse</span>\n <div class=\"cobrowse-close cobrowse-deny\">\n  <svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M7 5.35294L2.47059 0.823529C2.01577 0.368707 1.27835 0.368707 0.823529 0.823529C0.368707 1.27835 0.368706 2.01576 0.823529 2.47059L5.35294 7L0.823529 11.5294C0.368707 11.9842 0.368707 12.7216 0.823529 13.1765C1.27835 13.6313 2.01576 13.6313 2.47059 13.1765L7 8.64706L11.5294 13.1765C11.9842 13.6313 12.7216 13.6313 13.1765 13.1765C13.6313 12.7216 13.6313 11.9842 13.1765 11.5294L8.64706 7L13.1765 2.47059C13.6313 2.01577 13.6313 1.27835 13.1765 0.823529C12.7216 0.368707 11.9842 0.368706 11.5294 0.823529L7 5.35294Z\" fill=\"#919191\"/>\n  </svg>\n </div>\n </div>\n <div class=\"body\">\n <h2>Get step-by-step live and secure guidance with a Care Expert</h2>\n \n <ul>\n  <li>Stop screen sharing at any time</li>\n  <li>Personal info automatically hidden</li>\n <li>Only your_company_name screens are shared</li>\n</ul>\n</div>\n<div class=\"description\">\n<svg id=\"loader\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><line x1=\"12\" y1=\"2\" x2=\"12\" y2=\"6\"></line><line x1=\"12\" y1=\"18\" x2=\"12\" y2=\"22\"></line><line x1=\"4.93\" y1=\"4.93\" x2=\"7.76\" y2=\"7.76\"></line><line x1=\"16.24\" y1=\"16.24\" x2=\"19.07\" y2=\"19.07\"></line><line x1=\"2\" y1=\"12\" x2=\"6\" y2=\"12\"></line><line x1=\"18\" y1=\"12\" x2=\"22\" y2=\"12\"></line><line x1=\"4.93\" y1=\"19.07\" x2=\"7.76\" y2=\"16.24\"></line><line x1=\"16.24\" y1=\"7.76\" x2=\"19.07\" y2=\"4.93\"></line></svg>\n<span>\n Co-browse lets us view your active session in a limited way to give you live, on-screen assistance. We won't be able to view any other applications on your device.\n</span>\n</div>\n<div class=\"footer\">\n<span>\n By tapping accept & continue, you are consenting to allow the your_company_name Expert to view your screen to initiate assisted navigation. <a href=\"https://www.example.com\">View the your_company_name Privacy Policy</a>\n </span>\n <button class=\"cobrowse-allow\">Accept & continue</button>\n </div>\n </div>\n </div>",
    "fullDeviceHtml": "<div class=\"custom-backdrop\">\n <div class=\"cobrowse-confirm-dialog\">\n <div class=\"title\">\n <div></div>\n <span>Co-browse</span>\n <div class=\"cobrowse-close cobrowse-deny\">\n  <svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M7 5.35294L2.47059 0.823529C2.01577 0.368707 1.27835 0.368707 0.823529 0.823529C0.368707 1.27835 0.368706 2.01576 0.823529 2.47059L5.35294 7L0.823529 11.5294C0.368707 11.9842 0.368707 12.7216 0.823529 13.1765C1.27835 13.6313 2.01576 13.6313 2.47059 13.1765L7 8.64706L11.5294 13.1765C11.9842 13.6313 12.7216 13.6313 13.1765 13.1765C13.6313 12.7216 13.6313 11.9842 13.1765 11.5294L8.64706 7L13.1765 2.47059C13.6313 2.01577 13.6313 1.27835 13.1765 0.823529C12.7216 0.368707 11.9842 0.368706 11.5294 0.823529L7 5.35294Z\" fill=\"#919191\"/>\n </svg>\n </div>\n </div>\n <div class=\"body\">\n <h2>Get step-by-step live and secure guidance with a Care Expert</h2>\n \n <ul>\n <li>Stop screen sharing at any time</li>\n <li>Personal info automatically hidden</li>\n <li>Only your_company_name screens are shared</li>\n </ul>\n </div>\n <div class=\"description\">\n <svg id=\"loader\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><line x1=\"12\" y1=\"2\" x2=\"12\" y2=\"6\"></line><line x1=\"12\" y1=\"18\" x2=\"12\" y2=\"22\"></line><line x1=\"4.93\" y1=\"4.93\" x2=\"7.76\" y2=\"7.76\"></line><line x1=\"16.24\" y1=\"16.24\" x2=\"19.07\" y2=\"19.07\"></line><line x1=\"2\" y1=\"12\" x2=\"6\" y2=\"12\"></line><line x1=\"18\" y1=\"12\" x2=\"22\" y2=\"12\"></line><line x1=\"4.93\" y1=\"19.07\" x2=\"7.76\" y2=\"16.24\"></line><line x1=\"16.24\" y1=\"7.76\" x2=\"19.07\" y2=\"4.93\"></line></svg>\n <span>\n Co-browse lets us view your active session in a limited way to give you live, on-screen assistance. We won't be able to view any other applications on your device.\n </span>\n </div>\n <div class=\"footer\">\n <span>\n By tapping accept & continue, you are consenting to allow the your_company_name Expert to view your screen to initiate assisted navigation. <a href=\"https://www.example.com\">View the your_company_name Privacy Policy</a>\n </span>\n  <button class=\"cobrowse-allow\">Accept & continue</button>\n </div>\n </div>\n </div>",
    "styles": ".some-end-button {\n border-radius: 20px;\n background-color: blue;\n color: white;\n display: marquee;\n width: 20rem;\n font-size:200%;\n height: 20rem;\n }\n .custom-backdrop {\n background: rgba(0, 0, 0, 0.1);\n position: fixed;\n z-index: 2147483647;\n bottom: 0;\n top: 0;\n left: 0;\n right: 0;\n }\n .cobrowse-confirm-dialog {\n color: #232424;\n font-family:sans-serif;\n line-height:140%;\n position:fixed;\n background:white;\n border-radius:5px;\n z-index:2147483647;\n top:50px;\n left:50%;\n width:75%;\n max-width:450px;\n transform:translateX(-50%);\n box-shadow:2px 2px 30px rgb(0,0,0,0.08);\n padding: 1.5rem;\n }\n .title {\n text-align:center;\n display: flex;\n align-items: center;\n justify-content: space-between;\n font-size: 125%;\n line-height: 25px;\n padding: 20px;\n border-radius: 5px 5px 0 0;\n }\n \n .description {\n height: 8rem;\n display: flex;\n flex-direction:column;\n justify-content: center;\n align-items: center;\n background-color: #F3F3F3;\n }\n \n #loader {\n height:4rem;\n }\n \n .footer {\n margin-top: 1rem;\n margin-bottom: 1rem;\n display: flex;\n flex-direction: column;\n justify-content: flex-start\n }\n .cobrowse-allow {\n background-color: pink;\n color: white;\n flex-grow: 2;\n height: 3rem;\n }\n #cobrowse-end-button {\n cursor: pointer;\n position: fixed;\n z-index: 2147483647;\n top: 50%;\n left: 25%;\n transform: translateX(-50%);\n display: flex;\n justify-content: center;\n align-items: center;\n }\n #cobrowse-end-button:hover {\n background-color: #92162D;\n }",
    "sessionControlsHtml": " <div class=\"some-end-button\">\n End Session\n </div>"
  }

Per saperne di più, vedi Configurare la navigazione condivisa.

Personalizzazione di più lingue e messaggi visivi

Il nuovo metodo della piattaforma CCAI (opzione) ha due campi per supportare più lingue e la personalizzazione dei messaggi visivi:

  • lang: indica la lingua predefinita quando l'utente finale non ha scelto una lingua preferita. Questo codice è conforme allo standard ISO 639-1 e, se omesso, è impostato su en per impostazione predefinita.

  • translation: l'SDK web supporta più lingue per i testi visualizzati. Con l'oggetto di traduzione, puoi personalizzare i testi per la lingua esistente o persino aggiungere testi per nuove lingue. Ad esempio: de, es, fr, ja.

Di seguito è riportato un esempio di oggetto di traduzione che personalizza il testo in inglese. Come puoi vedere, le chiavi di primo livello dell'oggetto di traduzione devono essere il codice della lingua.

// ES6
let translation = `{
  "en": {
    "ujet_start_title": "Hi!"
  },
  "es": {
    "ujet_start_title": "¡Hola!"
  },
  "fr": {
    "ujet_start_title": "Salut!"
  },
  "de": {
    "ujet_start_title": "Hallo!"
  },
  "it": {
    "ujet_start_title": "Ciao!"
  },
  "ja": {
    "ujet_start_title": "こんにちは！"
  },
  "ko": {
    "ujet_start_title": "안녕하세요!"
  },
  "pt": {
    "ujet_start_title": "Olá!"
  },
  "pt-BR": {
    "ujet_start_title": "Olá!"
  },
  "sv": {
    "ujet_start_title": "Hej!"
  }
}`;

// initialize when dom ready
var ujet = new UJET({
  // other fields
  lang: 'en',
  translation: translation
});

I messaggi di personalizzazione sono:

"ujet_ask_phone_number_button_title": "Call Me"
"ujet_ask_phone_number_description": "Provide your phone number below"
"ujet_ask_phone_number_title_instant": "We'll Call You"
"ujet_ask_phone_number_title_scheduled": "Let's Schedule a Call"
"ujet_ask_phone_number_warning": "Your call may be monitored or recorded for training and quality assurance purposes."
"ujet_call_confirm_content": "Your phone should be ringing right about - {0}"
"ujet_call_confirm_start_new_conversation": "Start A New Conversation"
"ujet_call_record_permission_subtitle": "Do you give permission for {0} to record your call for training and quality?"
"ujet_call_record_permission_title": "Permission to Record"
"ujet_channel_chat": "Let's connect you to one of our chat support specialists",
"ujet_channel_instant_call": "Let one of our support specialists give you a call now",
"ujet_channel_menu_chat": "Chat now"
"ujet_channel_menu_email": "Email"
"ujet_channel_menu_instant_call": "Call now"
"ujet_channel_menu_keep_waiting": "Keep Waiting"
"ujet_channel_menu_scheduled_call": "Schedule call"
"ujet_channel_scheduled_call": "Let's schedule a time for a support specialist to call and help you",
"ujet_channel_email": "Please send us an email so we can help",
"ujet_chat_end": "End chat"
"ujet_chat_ended": "This chat has ended"
"ujet_chat_input_placeholder": "Type your message here"
"ujet_chat_leave": "Leave chat"
"ujet_chat_timed_out": "This chat has timed out"
"ujet_chat_title_with_multiple_agent": "Multiple Agents"
"ujet_chat_title_with_one_agent": "Chatting with {0}"
"ujet_chat_title_with_two_agent": "Chatting with {0} & {1}"
"ujet_chat_transfer_failed": "Transfer has failed"
"ujet_chat_transfer_joined": "<b>{0}<\/b> just joined the conversation"
"ujet_chat_transfer_left": "<b>{0}<\/b> just left the conversation"
"ujet_chat_transfer_started_menu": "<b>{0}<\/b> is transferring this chat to another agent..."
"ujet_chat_transfer_started_user": "<b>{0}<\/b> is adding another agent to this conversation..."
"ujet_common_back": "Back"
"ujet_common_cancel": "Cancel"
"ujet_common_end": "End"
"ujet_common_no": "No"
"ujet_common_save": "Save"
"ujet_common_submit": "Submit"
"ujet_common_support": "Support"
"ujet_common_yes": "Yes"
"ujet_deflection_menu_title": "Select from the options below"
"ujet_error_no_available_language": "No Available Language"
"ujet_error_phone_number_invalid": "Please input a valid phone number."
"ujet_file_upload_button": "Choose a file to upload"
"ujet_file_upload_failure_size": "Looks like we couldn't upload. <br> Please try uploading a file <br> that is less than {0}."
"ujet_file_upload_failure_type": "Looks like we couldn't upload. <br> We only accept <br> .JPG, .PNG, or .MP4."
"ujet_file_upload_failure_unknown": "Looks like we couldn't upload. <br> Please try again!"
"ujet_file_upload_subtitle": "Drop files here to upload"
"ujet_file_upload_title": "Upload Files"
"ujet_greeting": "Hi there, how can we help?"
"ujet_instant_call_confirm_content": "Your phone should be ringing shortly"
"ujet_language_chinese": "中文"
"ujet_language_english": "English"
"ujet_language_french": "Français"
"ujet_language_german": "Deutsch"
"ujet_language_italian": "Italiano"
"ujet_language_japanese": "日本語"
"ujet_language_korean": "한국어"
"ujet_language_portuguese": "Português (Portugal)"
"ujet_language_portuguese_brazil": "Português (Brazil)"
"ujet_language_spanish": "Español"
"ujet_language_swedish": "Svenska"
"ujet_menu_title": "Select an option"
"ujet_message_back_in_menu": "Looks like you changed your mind! How else can we help?"
"ujet_message_channel": "How would you like to communicate?"
"ujet_message_chat_deflection_afterhour": "We are currently closed. We look forward to helping you during our normal business hours."
"ujet_message_chat_deflection_default": "We are currently experiencing a high volume of requests with a current wait time of <b>{0}<\/b>. How would you like to reach out?"
"ujet_message_chat_deflection_email": "Please contact us via email: <b><a href="mailto:{0}">{0}<\/a><\/b>."
"ujet_message_chat_deflection_keepwaiting": "Thank you for continuing to wait. The remaining wait time is <b>{0}<\/b>."
"ujet_message_chat_deflection_outage": "We are currently experiencing a high volume of request, how would you like to reach out?"
"ujet_message_chat_deflection_recurring": "Thanks for your patience! The remaining wait time is <b>{0}<\/b>."
"ujet_message_chat_restart": "Connecting to your ongoing chat, one moment please..."
"ujet_message_chat_start": "One moment please..."
"ujet_message_queue": "Let's help you with<br /><strong>{0}<\/strong>"
"ujet_rating_feedback_placeholder": "Let us know how we can improve."
"ujet_rating_result_subtitle": "We appreciate your feedback"
"ujet_rating_result_title": "Thank you!"
"ujet_rating_title": "Rate Your Experience"
"ujet_redirect_action_title": "Open this page in a new tab"
"ujet_redirect_url_title": "Visit the page below"
"ujet_schedule_time_description": "Pick a time that works best for you"
"ujet_schedule_time_title": "Let's Schedule a Call"
"ujet_scheduled_call_cancel_cancel": "Cancel"
"ujet_scheduled_call_cancel_content": "You scheduled a support call for<br><b>{0}<\/b> at <b>{1}<\/b>."
"ujet_scheduled_call_cancel_keep": "Keep It"
"ujet_scheduled_call_cancel_title": "Cancel the existing call?"
"ujet_screenshot_init_cancel": "No Thanks"
"ujet_screenshot_init_okay": "Accept"
"ujet_screenshot_init_title": "Screenshot Request"
"ujet_screenshot_install_cancel": "Cancel"
"ujet_screenshot_install_okay": "Install"
"ujet_screenshot_install_title": "Install Chrome Extension"
"ujet_screenshot_take_action": "Take Screenshot"
"ujet_screenshot_take_title": "Click the button below to send a screenshot to the agent"
"ujet_screenshot_verify_cancel": "No"
"ujet_screenshot_verify_okay": "Yes"
"ujet_screenshot_verify_title": "Successfully Installed Chrome Extension"
"ujet_start_title": "Need any help?"
"ujet_tap_to_minimize": "Tap to minimize"
"ujet_time_hour": "hour | hours"
"ujet_time_minute": "minute | minutes"

Personalizzazione di logo e icona

Il metodo new UJET(option) dispone di campi per supportare la personalizzazione del logo e dell'icona.

  • logo: l'URL dell'immagine del logo

  • La posizione del widget (si applica solo al computer)

    • right: imposta la posizione del bordo destro in pixel (il valore predefinito è 50)

    • bottom: imposta la posizione del bordo inferiore in pixel (il valore predefinito è 50)

  • La posizione dell'icona (si applica solo al computer)

    • right: imposta la posizione del bordo destro in pixel (il valore predefinito è 50)

    • bottom: imposta la posizione del bordo inferiore in pixel (il valore predefinito è 50)

Esempio di personalizzazione di logo e icona

new UJET({
  logo: 'https://example.com/logo.svg',
  // widget position
  right: '50px',
  bottom: '150px',

  // launcher position
  launcher: {
    right: '50px',
    bottom: '50px',
  }
})

Personalizzazione di logo e icona

Personalizzazione di logo e icona

Personalizzazione di logo e icona

Personalizzazione di logo e icona

Personalizzazione del tema

Il metodo new UJET(option) ha un campo per supportare la personalizzazione del tema.

  • style:l'oggetto tema supporta quattro valori per il widget.

    • links: un elenco di link ai fogli di stile per i caratteri web

    • --primary-font: un valore per lo stile CSS della famiglia di caratteri applicato all'intera UI web, ad es. Merriweather

    • --primary-color: un valore di codice esadecimale utilizzato come colore principale dell'interfaccia utente web, ad esempio #51C3C3

    • --link-color: un valore di codice esadecimale utilizzato come colore del link dell'interfaccia utente web, ad esempio #51C3C3

  • launcher:l'oggetto launcher supporta quattro valori per launcher.

    • cssText: una sintassi CSS utilizzata come stile CSS per l'avvio app

    • chatIcon: un URL dell'icona SVG utilizzato per l'icona di chat normale

    • closeIcon: un URL dell'icona SVG utilizzato per l'icona di chiusura

    • style: questo oggetto tema separato supporta due valori per il launcher.

      • --background-color: un valore di codice esadecimale utilizzato come colore di sfondo del launcher, ad es. #E85230 --icon-color: un valore di codice esadecimale utilizzato come colore dell'icona del launcher, ad es. #FFF
var ujet = new UJET({
  // ...
  style: {
    links: [
      'https://fonts.example.com/css?family=Droid+Serif:400,700&display=swap',
    ],
    '--primary-font': 'Droid Serif, Georgia, serif',
    '--primary-color': '#F1684A',
    '--link-color': '#F1684A',
  },
  launcher: {
    cssText: '.wrap button {background: #E85230}',
    chatIcon: 'https://example.com/logo.svg',
    closeIcon: 'https://example.com/close.svg',
    style: {
      '--background-color': '#F1684A',
      '--icon-color': '#fff',
    }
  }
});

Stile di Avvio app

Monitoraggio della selezione del canale e dell'invio di email

Per consentire il monitoraggio della selezione del canale e dell'invio di email, l'SDK web utilizza la funzione postMessage che trasmette un messaggio con i seguenti dati:

  • application: il tipo di dispositivo.

  • sdk_version: la versione dell'SDK web.

  • user_agent::la versione del browser.

  • company:il nome del tenant.

  • menu_name::il nome della coda o del menu selezionato dall'utente finale.

  • menu_path: il percorso della coda o del menu selezionato dall'utente finale.

  • menu_id: l'ID menu della coda o del menu selezionato dall'utente finale.

  • url:l'URL della pagina web su cui si trovava l'utente finale quando ha effettuato una selezione del canale o ha inviato un'email.

  • timestamp: l'ora in cui l'utente finale ha effettuato la selezione.

  • has_attachments: indica se un'email aveva allegati al momento dell'invio (questo campo viene visualizzato solo durante l'invio dell'email, non durante la selezione del canale).

I dati dei messaggi vengono memorizzati in un oggetto ujet con due attributi: uno chiamato azione, che sarà una stringa contenente il nome dell'azione completata, e uno chiamato dati, che includerà i dati descritti in precedenza.

Per recuperare i dati dal messaggio, puoi creare un listener di eventi che ascolti "message". Un esempio che stampa l'azione e i dati nella console è descritto nella sezione successiva. Un esempio funzionante è disponibile nella cartella tracking-channel-selection.

window.addEventListener('message', (e) => {
  if (e.data && e.data.ujet) {
    console.log(`Action: ${e.data.ujet.action}`);
    console.log(`Message Data: ${e.data.ujet.data}`);
  }
});

Nascondere il bordo del logo dell'agente

Per nascondere il bordo del logo dell'agente, aggiungi "--logo-shadow": "none" nell'attributo di stile e impostalo su true nella nuova UJET(opzione):

new UJET({
  // ...
  style: {
    '--logo-shadow': 'none',
  }
});

Nascondere l'icona di avvio

Per motivi estetici, è possibile nascondere l'icona di avvio della UI web, scegliendo invece di utilizzare un trigger di chat proattivo o di avviare la chat in modo programmatico. Per rimuovere l'icona di avvio, aggiungi l'attributo launcher e impostalo su true nella nuova opzione UJET:

new UJET({
  // ...
  launcher: false,
});

Per avviare l'interfaccia utente web in modo programmatico, vedi Avvio programmatico dell'interfaccia utente web. Per avviare l'interfaccia utente web con un attivatore di chat proattivo, consulta Attivatore proattivo.

Utilizzo di un punto di accesso diretto

Puoi utilizzare un accesso diretto per inviare un utente finale direttamente a una coda specifica.

Per utilizzare un punto di accesso diretto:

  1. Accedi al portale della piattaforma CCAI.

  2. Vai a Impostazioni > Coda.

  3. Assicurati che il canale web sia attivato attivando l'opzione Usa.

  4. Vai a Modifica > Visualizza per il canale web. Viene visualizzata la struttura del sito web.

  5. Seleziona la coda a cui vuoi che l'utente finale acceda direttamente.

  6. Vai alla sezione Access Point e poi fai clic su Crea punto di accesso diretto.

  7. Fornisci le seguenti informazioni:

    1. Imposta il tipo di punto di accesso su generale.

    2. Fornisci il nome punto di accesso. Questo è il nome visualizzato nell'elenco Access Point.

    3. Fornisci l'etichetta del punto di accesso generale. Questo è il valore che utilizzerai per configurare l'SDK web.

  8. Fai clic su Crea.

Puoi passare il nome di un punto di accesso diretto utilizzando il metodo ujet.start(options). Vedi il seguente esempio:

var launcher = document.getElementById('launcher');
launcher.addEventListener('click', function() {
  if (ujet.status === 'open') {
    ujet.close();
  } else {
    ujet.start({ menuKey: '__MENU_KEY__' });
  }
});

Chiudere l'interfaccia utente web in modo programmatico

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

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

ujet.on('close', function() {
  // do something here
});

Avviare l'interfaccia utente web in modo programmatico

Questo passaggio è facoltativo. Senza questo passaggio, l'utente finale può 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 ujet.start(options). Potresti voler fare in modo che l'utente finale faccia clic su un pulsante aggiuntivo per aprire la UI web, ad esempio:

<button id="launcher">Fai clic per aprire</button>

var ujet = new UJET({
  companyId: "YOUR_COMPANY_ID",
  host: "HOST_URL",
  launcher: false
});

var launcher = document.getElementById('launcher');
launcher.addEventListener('click', function() {
  if (ujet.status === 'open') {
    ujet.close();
  } else {
    ujet.start();
  }
});

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

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';
});

ujet.on('created', function() {
  ujet.authenticate(getAuthToken);
});

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

Trigger proattivo

Con i trigger proattivi, puoi attivare l'SDK web per inviare in modo proattivo un messaggio all'utente finale.

Per configurare un trigger proattivo:

  1. Nel portale della piattaforma CCAI, vai a Impostazioni > Chat.

  2. Vai al riquadro Trigger di chat proattiva web, quindi fai clic su Visualizza trigger. Viene visualizzato il riquadro Trigger.

  3. Fai clic su Aggiungi trigger. Viene visualizzato il riquadro Scegli nome.

  4. Nel campo Nome trigger, inserisci un nome e poi fai clic su Avanti. Viene visualizzato il riquadro Imposta condizioni.

  5. Per impostare le condizioni:

    1. Accanto a L'utente finale, seleziona una condizione.

    2. Nel campo Inserisci una parola chiave, inserisci una parola chiave a cui vuoi che si riferisca la condizione e poi premi il tasto Invio.

    3. Ripeti il passaggio precedente per ogni parola chiave che vuoi inserire.

    4. Per aggiungere un'altra condizione, fai clic su Aggiungi un'altra condizione, quindi fai clic sul tipo di condizione che preferisci.

    5. Imposta l'opzione di configurazione per la condizione.

    6. Per aggiungere un'altra condizione, ripeti i due passaggi precedenti.

    7. Fai clic su Avanti. Viene visualizzato il riquadro Definisci azioni.

  6. Per definire le azioni:

    1. Nella sezione Assegnazione coda, inserisci il nome del nodo della coda di chat a cui vuoi assegnare l'utente finale. Se esiste una coda di chat con questo nome, il nome viene visualizzato in grassetto sotto il campo.

    2. Fai clic sul nome della coda di chat in grassetto. Viene visualizzata una finestra di dialogo di conferma.

    3. Fai clic su Ok per continuare.

    4. In Messaggio di chat, inserisci il messaggio che vuoi visualizzare nella chat attivata.

    5. Fai clic su Fine.

    6. Per attivare il nuovo trigger, fai clic su Avvia.

ID ticket esistenti

Se hai un ticket esistente per un utente finale, puoi recuperare l'ID ticket dal tuo CRM e passarlo all'SDK web chiamando ujet.start().

Ad esempio:

yourFunctionToRetrieveTicket()
  .then((existingTicket) => {
    ujet.start({ ticketId: existingTicket });
  });

Per riferimento, puoi consultare l'esempio nella cartella ticket-id.