Vamos começar

Integre os recursos da plataforma Contact Center AI (CCAI) ao seu aplicativo da Web usando o SDK da Web. O SDK da Web é criado com base no SDK da Web sem interface, disponibilizando todos os métodos de cliente sem interface no widget do SDK da Web. Nesta página, mostramos como montar, inicializar e autenticar o SDK da Web. Ela também explica como ocultar botões e comandos para iniciar novas conversas e baixar transcrições.

Para receber ajuda com a instalação do SDK da Web, consulte os exemplos de implementação no GitHub.

Exemplo básico

O exemplo básico exige apenas três opções:

companyId
host
Authenticate

Siga a documentação do widget para receber o ID e o host da sua empresa.

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>

Exemplo de dados personalizados

O exemplo de dados personalizados é semelhante ao exemplo básico. É necessário configurar os dados personalizados com .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>

Preparação

Para colocar o SDK da Web da Contact Center AI Platform em funcionamento, faça o seguinte:

Inclua o script do widget do SDK da Web.
Prepare um elemento de montagem.
Inicialize o SDK da Web com seu COMPANY_KEY.

Inicialize a autenticação com seu COMPANY_SECRET usando o código de back-end

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

Receber chave da empresa

Faça login no portal da Contact Center AI Platform usando uma conta com permissões de administrador.
Acesse Configurações > Configurações do desenvolvedor.
Copie a chave da empresa como COMPANY_KEY.

Você também pode acessar o segredo da empresa aqui. O secret é usado no servidor de back-end para criar um endpoint de token de autenticação. Para mais informações, consulte a seção Autenticar.

Inicializando

Em seguida, inicialize o SDK da Web da plataforma de CCAI com o novo método UJET(options). Se o portal for https://{your_ccaas_host}, o host será

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

As opções são as mesmas do guia do SDK da Web sem interface gráfica.

Autenticação

O getAuthToken é uma função que chama um mecanismo de assinatura JWT do seu back-end:

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

Para mais informações, consulte a seção Autenticar.

Configurar o SDK

Configure o SDK da Web usando ccaas.config({...}).

O código a seguir lista as propriedades para configurar o SDK da 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
}

Para mais informações, consulte Recursos compatíveis e Personalizações de tema.

Ocultar o botão para iniciar uma nova conversa no final de uma sessão

É possível configurar o SDK da Web para ocultar o botão Iniciar uma nova conversa na janela de chat de um usuário final ao final de uma sessão. Para fazer isso, inclua a propriedade hideNewConversation com o método ccaas.config. Para mais informações, consulte Configurar o SDK.

Ocultar o comando para baixar uma transcrição durante uma sessão

Você pode configurar o SDK para Web para ocultar o comando Baixar transcrição do menu de opções de chat na janela de chat do usuário final durante uma sessão. Para fazer isso, inclua a propriedade hideDownloadTranscriptOptions com o método ccaas.config. Para mais informações, consulte Configurar o SDK.

Ocultar o botão para baixar uma transcrição no final de uma sessão

É possível configurar o SDK da Web para ocultar o botão Baixar transcrição na janela de chat do usuário final ao final de uma sessão. Para fazer isso, inclua a propriedade hideDownloadTranscriptPostChat com o método ccaas.config. Para mais informações, consulte Configurar o SDK.

Montar o widget

É necessário preparar um elemento vazio no início:

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

Em seguida, podemos ativar o widget nesse elemento:

ccaas.mount('#ccaas-widget')

Use o guia do SDK da Web sem interface gráfica para criar seus próprios widgets de chat e chamada.

Instalar

Você pode instalar o pacote com npm:

npm install @ujet/websdk-headless --save

Ou use o script hospedado na sua instância da plataforma CCAI:

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

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

Integre o SDK

Faça login no portal da Contact Center AI Platform usando uma conta com permissões de administrador.
Acesse Configurações > Configurações do desenvolvedor.
Copie a chave da empresa como COMPANY_KEY.

Se o portal for https://{your_ccaas_host}, confira um exemplo para receber as informações da empresa:

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

Vamos começar Mantenha tudo organizado com as coleções Salve e categorize o conteúdo com base nas suas preferências.

Exemplo básico

HTML completo

Exemplo de dados personalizados

HTML completo

Preparação

Receber chave da empresa

Inicializando

Autenticação

Configurar o SDK

Ocultar o botão para iniciar uma nova conversa no final de uma sessão

Ocultar o comando para baixar uma transcrição durante uma sessão

Ocultar o botão para baixar uma transcrição no final de uma sessão

Montar o widget

Instalar

Integre o SDK

Vamos começar