Referência da API do SDK da Web

Esta página contém os métodos de API do SDK da Web.

Inicializar o SDK da Web

Use o código a seguir para inicializar o SDK da Web:

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

Observação: só é possível inicializar uma instância do SDK da Web por página da Web.

Opções

Esta seção contém as opções que podem ser transmitidas ao inicializar o SDK da Web.

companyId

Obrigatório

Para recuperar companyId no portal da plataforma de CCAI, siga estas etapas:

1. Faça login no portal da plataforma CCAI com uma conta de administrador.

2. Acesse Configurações > Configurações do desenvolvedor.

3. Copie a chave da empresa.

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

tenant

Recomendado

O locatário é o subdomínio da sua instância da Contact Center AI Platform (CCAI Platform), também conhecido como seu ambiente. Por exemplo, se o portal da plataforma CCAI for https://acme.ccaiplatform.com/, acme será o locatário. Confira o exemplo a seguir:

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

host

Opcional

host é o endpoint de API usado pelo SDK da Web. Se você definiu tenant, não é necessário definir host.

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

Se você tiver definido tenant e não host, o SDK da Web vai configurar o valor host de acordo com tenant. Veja o exemplo a seguir:

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

authenticate

Opcional

authenticate é uma função que retorna um token JWT com uma promessa. Veja o exemplo a seguir:

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

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

A autenticação é obrigatória no SDK da Web, mas a opção authenticate é opcional. Você pode chamar ujet.authenticate no evento created:

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

lang

Opcional

O idioma padrão do usuário final. Veja o exemplo a seguir:

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

user

Opcional

Veja o exemplo a seguir:

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

launcher

Opcional

A opção launcher pode ser false ou um objeto. Confira as seguintes opções de launcher:

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

Para desativar o iniciador padrão do CCAI Platform, defina essa opção como false. Veja o exemplo a seguir:

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

Como alternativa, você pode personalizar nosso iniciador integrado. Confira o exemplo a seguir:

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

Recomendado

O URL do logotipo da sua empresa. Veja o exemplo a seguir:

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

style

Opcional

Use a opção style para personalizar o widget do SDK da Web. Confira o exemplo a seguir:

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

customData

Opcional

Dados personalizados podem ser enviados com um chat quando ele é iniciado. Veja o exemplo a seguir:

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

disableAttachment

Opcional

Se disableAttachment estiver definido como true, o SDK da Web não vai permitir que o usuário final faça upload de fotos, vídeos ou outros anexos em chats. Confira o exemplo a seguir:

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

right

Opcional

Posicione à direita do widget, não do iniciador. Ajuste esse valor de acordo com launcher.right. Veja o exemplo a seguir:

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

bottom

Opcional

Posição abaixo do widget, não do acesso rápido. Ajuste esse valor de acordo com launcher.bottom. Veja o exemplo a seguir:

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

translation

Opcional

Use o recurso de tradução do SDK da Web. Confira o exemplo a seguir:

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

Métodos

Esta seção contém os métodos do objeto UJET:

.on(event, callback)

Execute o callback quando receber o event especificado:

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

Encontre todos os eventos na documentação de eventos.

.off(event, callback)

Remove o callback especificado dos listeners de eventos.

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

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

.authenticate(authData)

Envie o valor token para o widget. Esse método geralmente é chamado no evento created:

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

.authenticate(authFunction)

Também é possível transmitir uma função para o método .authenticate. Essa função precisa retornar um promise do token:

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

.start({ menuKey, ticketId })

O widget é iniciado quando o usuário final clica no iniciador, mas também pode ser iniciado com o seguinte código:

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

Se .start tiver um menuKey, o widget vai direto para essa fila.

.open()

.open é semelhante a .start, mas não aceita parâmetros.

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

.close()

Minimizar o widget de forma programática:

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

.destroy()

Destrua o SDK da Web. Ou seja, remova-o da página da Web atual.

.registerHook(event, fn)

O event em .registerHook é diferente do event em .on. Essa função é usada geralmente quando você quer usar seu próprio iniciador:

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

Tradução

Confira uma lista de chaves disponíveis para personalizar a tradução:

• ujet_start_title

• ujet_greeting