Vamos começar

Integre os recursos da Contact Center AI Platform (CCAI Platform) ao seu aplicativo da Web usando o SDK da Web. O SDK da Web é criado com base no SDK da Web sem interface gráfica, disponibilizando todos os métodos de cliente sem interface gráfica no widget do SDK da Web. Esta página mostra 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 na instalação do SDK da Web, consulte os exemplos de implementação no GitHub (link em inglês).

Exemplo básico

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

  1. companyId
  2. host
  3. Authenticate

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

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 ativar o SDK da Web da Contact Center AI Platform, faça o seguinte:

  1. Inclua o script do widget do SDK da Web.

  2. Prepare um elemento de montagem.

  3. Inicialize o SDK da Web com sua COMPANY_KEY.

  4. 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 a chave da empresa

  1. Faça login no portal da Contact Center AI Platform usando uma conta com permissões de administrador.

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

  3. Copie a chave da empresa como COMPANY_KEY.

Você também pode receber o secret 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, você pode inicializar o SDK da Web da CCAI Platform 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

A getAuthToken é uma função que chama um mecanismo de assinatura JWT do 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 Autenticar seção.

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

Você pode configurar o SDK da Web para ocultar o botão Iniciar uma nova conversa na janela de chat do usuário final no 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 da Web para ocultar o comando Baixar transcrição no menu "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

Você pode configurar o SDK da Web para ocultar o botão Baixar transcrição na janela de chat do usuário final no 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 montar 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

É possível instalar o pacote com o npm:

npm install @ujet/websdk-headless --save

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

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

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

Integre o SDK

  1. Faça login no portal da Contact Center AI Platform usando uma conta com permissões de administrador.

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

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