O Google usa tecnologia de IA na tradução de conteúdos para seu idioma de preferência. As traduções com IA podem ter erros.

Guia do SDK da Web sem interface gráfica

O SDK da Web sem interface permite estender e personalizar a experiência de suporte da sua empresa de acordo com suas necessidades. Ele contém todos os nossos recursos do SDK da Web e oferece a capacidade de criar a UI e a experiência do usuário para oferecer suporte a eles.

A instalação e o uso do SDK da Web sem interface gráfica exigem o suporte da equipe de desenvolvimento da Web da sua organização. Para realizar uma integração bem-sucedida e alcançar a performance ideal, o Google recomenda envolver seu pessoal qualificado.

No contexto do desenvolvimento de software, "headless" se refere a uma arquitetura desacoplada em que a camada de apresentação do front-end (o "head") é separada da lógica e dos recursos do back-end. Em uma arquitetura headless, o back-end, também conhecido como parte "headless", fornece APIs que permitem usar seus recursos e serviços.

Um exemplo é a automação de fluxo de trabalho personalizada. Quando um usuário final inicia um chat, o evento on("chat.message") é acionado. Você pode definir acionadores de automação personalizados com base em mensagens de chat específicas que recebeu. Por exemplo, se um usuário final digitar "Escalonar" no chat, o manipulador de eventos poderá automaticamente escalonar a sessão de chat para uma equipe de suporte de nível superior, oferecendo atenção imediata a problemas críticos.

Este guia explica o processo de instalação, as funcionalidades de integração e o uso do SDK. Para detalhes sobre o uso da API, consulte a documentação da API do SDK da Web sem interface gráfica. Confira a lista de eventos disponíveis na página de eventos.

Instalar o SDK da Web sem interface gráfica

É possível instalar o pacote com npm:

npm install @ujet/websdk-headless --save

Ou use o script hospedado pela UJET:

<script src="https://websdk.ujet.co/v3/headless.js"></script>

<script>
  // The hosted script exposes the client as the global `UJETClient`.
  // const client = new UJETClient(...)
</script>

Usar o SDK da Web sem interface gráfica

Para usar o SDK da Web sem interface gráfica, siga o exemplo de código fornecido:

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: "YOUR-COMPANY-ID",
  tenant: "YOUR-TENANT-NAME",
  authenticate: authenticate,
})

// const company = await client.getCompany()
// const menus = await client.getMenus()

A classe Client aceita várias opções (personalize de acordo com seus requisitos):

interface ClientOption {
  companyId: string;
  authenticate: () => Promise<TokenResponse>;
  tenant?: string;
  host?: string;
  lang?: string;
  bridge?: string;
  version?: string;
  cobrowse?: {
    enabled?: boolean;
    messages?: CobrowseMessages;
    api?: string;
    license?: string;
    trustedOrigins?: string[];
    capabilities?: string[];
    registration?: boolean;
    redactedViews?: string[];
    unredactedViews?: string[];
  };
}

Ativar a geração de registros

Durante a implementação e o teste, pode ser necessário coletar mais informações no registro do console. Para ativar o registro em registros do SDK headless, importe Logger e consoleLoggerHandler adicionando o seguinte código ao seu aplicativo da Web:

import {Logger, consoleLoggerHandler } from '@ujet/websdk-headless'
Logger.addHandler(consoleLoggerHandler)

É possível ativar e configurar o Compartilhamento de tela usando o SDK da Web sem interface gráfica.

O exemplo de código a seguir mostra como ativar o Compartilhamento de tela:

new Client({
  // ...
  cobrowse: {
    enabled: true,
    license: 'YOUR_SCREEN_SHARE_LICENSE'
  }
})

O exemplo de código a seguir mostra as opções de compartilhamento de tela:

interface CobrowseOption {
  enabled: boolean
  template?: string
  confirmSessionTemplate?: string
  confirmRemoteControlTemplate?: string
  confirmFullDeviceTemplate?: string
  sessionControlsTemplate?: string
  root?: Element
  messages?: {
    confirmSessionTitle: string;
    confirmSessionContent: string;
    confirmRemoteControlTitle: string;
    confirmRemoteControlContent: string;
    confirmFullDeviceTitle: string;
    confirmFullDeviceContent: string;
    allowText: string;
    denyText: string;
    endSessionText: string;
  }
  api?: string
  license?: string
  trustedOrigins?: string[]
  capabilities?: string[]
  registration?: boolean
  redactedViews?: string[]
  unredactedViews?: string[]
}

Modelo personalizado

Você pode personalizar o modelo da caixa de diálogo "Compartilhar tela" usando a opção template do exemplo de código anterior.

Confira abaixo o modelo padrão:

<dialog open class="cobrowse-dialog">
  <h1>$title</h1>
  <div class="cobrowse-dialog_content">$content</div>
  <div class="cobrowse-dialog_footer">
    <button class="cobrowse-dialog_allow js-cobrowse-allow">$allow</button>
    <button class="cobrowse-dialog_deny js-cobrowse-deny">$deny</button>
  </div>
</dialog>

É possível usar esse modelo para configurar uma caixa de diálogo que solicita aprovação do usuário final para o seguinte:

Iniciar uma sessão de compartilhamento de tela
Iniciar uma sessão de compartilhamento de tela com controle remoto
Iniciar uma sessão de compartilhamento de tela completa do dispositivo

Confira as opções de modelo:

confirmSessionTemplate: para confirmar uma sessão de compartilhamento de tela.
confirmRemoteControlTemplate: para confirmar uma sessão de compartilhamento de tela de controle remoto.
confirmFullDeviceTemplate. Para confirmar uma sessão completa de compartilhamento de tela do dispositivo.
sessionControlsTemplate: para o botão de controles de sessão. Este é o modelo padrão: <button class="cobrowse-end js-cobrowse-end">$end</button>

Mensagens

As seguintes variáveis de mensagem são usadas em Modelos personalizados:

$title
$content
$allow
$deny

O exemplo a seguir mostra como essas variáveis são aplicadas:

{
  confirmSessionTitle: string;  // $title
  confirmSessionContent: string;  // $content
  confirmRemoteControlTitle: string;  // $title
  confirmRemoteControlContent: string;  // $content
  confirmFullDeviceTitle: string;  // $title
  confirmFullDeviceContent: string;  // $content
  allowText: string;  // $allow
  denyText: string;  // $deny
  endSessionText: string;  // $end
}

O exemplo a seguir mostra os valores padrão das variáveis em inglês:

{
  "confirmSessionTitle": "Screen Share Session Request",
  "confirmSessionContent": "Do you want to share your current screen with the agent?",
  "endSessionText": "End Screen Share Session",
  "confirmRemoteControlTitle": "Remote Access Request",
  "confirmRemoteControlContent": "The agent would like to have access to your currently shared screen to further assist you. Do you want to allow this?",
  "confirmFullDeviceTitle": "Screen Share Request",
  "confirmFullDeviceContent": "Do you want to share your full screen with the agent? The agent will not be able to control anything on the screen.",
  "allowText": "Allow",
  "denyText": "Deny"
}

Propriedades

Nome	Descrição
`deviceId`	O ID do dispositivo, determinado pelo SDK sem interface gráfica na inicialização.
`lang`	A configuração de idioma do cliente atual. Se "lang" for transmitido na configuração, ele se tornará somente leitura.
`chat`	Só tem um valor quando há um chat em andamento.
`cobrowse`	O cliente CobrowseIO subjacente, disponível após a inicialização do Cobrowse.

Eventos

Nome	Descrição
`destroy`	Destrói o comunicador e todos os listeners de eventos.
`on`	Adiciona um manipulador de eventos para o evento fornecido.
`off`	Remove o manipulador de eventos do evento fornecido.

Use o método .destroy para remover o iframe e todos os listeners de eventos.

client.destroy()

Use o método .on para rastrear os eventos.

client.on('chat.updated', someFunc)

Remova o manipulador de eventos com .off:

client.off('chat.updated', someFunc)

Configuração de dados personalizada

A opção "custom_data" permite transmitir dados arbitrários de par de chave-valor para o SDK da Web.

Uso

Você pode fornecer dados personalizados como um objeto (sem assinatura) ou uma string (com assinatura) ao criar um chat:

interface ChatRequest {
  lang?: string;
  trigger_id?: string;
  ticket_id?: string;
  email?: string;
  greeting?: string;
  cobrowsable?: boolean;
  custom_data?: {
    signed?: string;
    unsigned?: Record<string, any>;
  };
}

Veja o exemplo a seguir:

const custom_data = {
  unsigned: {
    version: {
      label: 'Version',
      value: '1.0.0'
    }
  },
  signed: 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9...' // JWT or other signed payload
}

try {
  const chat: Chat = await client.createChat(123, { custom_data })
} catch (error) {
  // handle error
}

Transferência de chatbot externo

Em alguns casos, talvez você queira manter o histórico e as interações de outros provedores de chat. Para isso, use o custom_data object.