Riferimento API SDK web

Questa pagina contiene i metodi API dell'SDK web.

Inizializza l'SDK web

Utilizza il seguente codice per inizializzare l'SDK web:

    const ujet = new UJET({
      companyId: '',
      // ...
    })

Nota :puoi inizializzare una sola istanza dell'SDK web per pagina web.

Opzioni

Questa sezione contiene le opzioni che puoi trasmettere quando inizializzi l'SDK web.

companyId

Obbligatorio

Per recuperare companyId dal portale CCAI Platform:

1. Accedi al portale della piattaforma CCAI con un account amministratore.

2. Vai a Impostazioni > Impostazioni sviluppatore.

3. Copia chiave dell'azienda

   new UJET({
     companyId: '{​ COMPANY KEY }​',
   })
   

tenant

Consigliato

Il tenant è il sottodominio dell'istanza di Contact Center AI Platform (CCAI Platform), noto anche come ambiente. Ad esempio, se il portale della piattaforma CCAI è https://acme.ccaiplatform.com/, allora acme è il tenant. Vedi il seguente esempio:

```sh
new UJET({
  companyId: '....',
  tenant: 'acme',
})
```

host

Optional

host è l'endpoint API utilizzato dall'SDK web. Se hai impostato tenant, non è necessario impostare host.

new UJET({
  companyId: '....',
  host: 'https://acme.api.ccaiplatform.com',
})

Se hai impostato tenant e non host, l'SDK web configurerà il valore host in base a tenant. Vedi il seguente esempio:

https://{tenant}.api.ccaiplatform.com

authenticate

Optional

authenticate è una funzione che restituisce un token JWT con una promessa. Vedi il seguente esempio:

new UJET({
  // ...
  authenticate: getAuthToken,
})

function getAuthToken () {
  return fetch('/ujet/token').then(function(resp) {
    return resp.json()
  })
}

L'autenticazione è obbligatoria nell'SDK web, ma l'opzione authenticate è facoltativa. Puoi chiamare ujet.authenticate nell'evento created:

var ujet = new UJET({ ... })
ujet.on('created', function() {
  getAuthToken().then({ token } => {
    ujet.authenticate({ token })
  })
})

lang

Optional

La lingua predefinita per l'utente finale. Vedi il seguente esempio:

new UJET({
  // ...
  lang: 'ja',
})

user

Optional

Vedi il seguente esempio:

new UJET({
  companyId: '....',
  user: {
    identifier: '...',
    name: '...',
    email: '...',
  },
})

launcher

Optional

L'opzione launcher può essere false o un oggetto. Vedi le seguenti opzioni launcher:

right: string,
bottom: string,
cssText: string,
chatIcon: url,
closeIcon: url,
style: {
  '--background-color': color,
  '--icon-color': color,
}

Per disattivare l'avvio app predefinito di CCAI Platform, puoi impostare questa opzione su false. Vedi il seguente esempio:

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

In alternativa, puoi personalizzare il nostro launcher integrato. Vedi il seguente esempio:

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

Consigliato

L'URL del logo della tua azienda. Vedi il seguente esempio:

new UJET({
  logo: 'https://example.com/logo.svg',
})

style

Optional

Utilizza l'opzione style per personalizzare il widget dell'SDK web. Vedi il seguente esempio:

    new UJET({
      // ...
      style: {
        // links: ['https://example.com/font.css'],
        '--primary-font': '',
        '--primary-color': '',
        '--link-color': '',
        '--logo-shadow': '',
      }
    })

customData

Optional

I dati personalizzati possono essere inviati con una chat all'avvio. Vedi il seguente esempio:

new UJET({
  // ...
  customData: {
    version: {
      label: 'Version',
      value: '1.1.0'
    },
    platform: {
      label: 'Platform',
      value: navigator.platform
    }
  }
})

disableAttachment

Optional

Se disableAttachment è impostato su true, l'SDK web non consentirà all'utente finale di caricare foto, video o altri allegati nelle chat. Vedi il seguente esempio:

    new UJET({
      companyId: '....',
      disableAttachment: true,
    })

right

Optional

Posizione a destra del widget, non dell'app di avvio. Modifica questo valore in base a launcher.right. Vedi il seguente esempio:

new UJET({
  right: '50px',
})

bottom

Optional

Posiziona il widget sotto, non sotto l'Avvio app. Modifica questo valore in base a launcher.bottom. Vedi il seguente esempio:

new UJET({
  bottom: '150px',
})

translation

Optional

Utilizza la funzionalità di traduzione dell'SDK web. Vedi l'esempio che segue:

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": "こんにちは！"
    }
  }
})

Metodi

Questa sezione contiene i metodi dell'oggetto UJET:

.on(event, callback)

Esegui callback quando ricevi event:

ujet.on('ready', function() {
  console.log('widget is ready')
})

Trova tutti gli eventi nella documentazione sugli eventi.

.off(event, callback)

Rimuovi il callback specificato dai listener di eventi.

function ready() {
  console.log('widget is ready')
}

ujet.on('ready', ready)
ujet.off('ready', ready)

.authenticate(authData)

Invia il valore token al widget. Questo metodo viene in genere chiamato nell'evento created:

ujet.on('created', function() {
  fetchToken().then(function(token) {
    ujet.authenticate({ token: token })
  })
})

.authenticate(authFunction)

Puoi anche passare una funzione al metodo .authenticate. Questa funzione deve restituire un promise di token:

ujet.on('created', function() {
  ujet.authenticate(function(callback) {
    return fetchToken().then(function(token) {
      return { token: token }
    })
  })
})

.start({ menuKey, ticketId })

Il widget viene avviato quando l'utente finale fa clic sul launcher, ma può essere avviato anche con il seguente codice:

// if end user stayed in the web page for 10 senconds
setTimeout(function() {
  ujet.start({ menuKey: 'help' })
}, 10000)

Se .start con un menuKey, il widget va direttamente a quella coda.

.open()

.open è simile a .start, ma non accetta parametri.

setTimeout(function() {
  ujet.open()
}, 10000)

.close()

Riduci a icona il widget in modo programmatico:

ujet.on('chat:status', function(status) {
  if (status === 'timeout') {
    ujet.close()
  })
})

.destroy()

Distruggi l'SDK web. ovvero rimuoverlo dalla pagina web corrente.

.registerHook(event, fn)

Il event in .registerHook è diverso da quello in .on. Questa funzione viene solitamente utilizzata quando vuoi usare il tuo launcher:

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

Traduzione

Di seguito è riportato un elenco delle chiavi disponibili per personalizzare la traduzione:

• ujet_start_title

• ujet_greeting