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 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 sem comando, o back-end, também conhecido como parte "sem comando", 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. É possível definir acionadores de automação personalizados com base em mensagens específicas que você 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 rápida 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. Uma lista de eventos disponíveis pode ser encontrada na página de eventos.

Instalar o SDK da Web sem comando

Para instalar o SDK da Web sem interface gráfica, use o snippet de código a seguir no seu projeto:

npm install @ujet/websdk-headless --save

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"
const client = new Client({ ... })

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;
  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, talvez seja necessário coletar mais informações no registro do console. Para ativar o registro em registros do SDK sem interface gráfica, 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

É possível personalizar o modelo da caixa de diálogo "Compartilhar tela" usando a opção template do exemplo de código anterior.

O exemplo a seguir mostra 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 de 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"
}

Configuração de dados personalizada

Com a opção "custom_data", é possível 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 seja interessante manter o histórico e as interações de outros provedores de chat. Para isso, use o custom_data object.