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 as necessidades. Ele contém todos os nossos recursos conhecidos 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 o desempenho ideal, o Google recomenda envolver pessoal qualificado.

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

Um exemplo é a automação personalizada do fluxo de trabalho. Quando um usuário final inicia um chat, o on("chat.message") evento é acionado. É possível definir acionadores de automação personalizados com base em mensagens de chat específicas que você recebeu. Por exemplo, se um usuário final digitar "Escalar" no chat, o gerenciador de eventos poderá escalar automaticamente 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, os recursos 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. Uma lista de eventos disponíveis pode ser encontrada na página de eventos.

Instalar o SDK da Web sem interface

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

npm install @ujet/websdk-headless --save

Usar o SDK da Web sem interface

Para usar o SDK da Web sem interface, 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 do cliente aceita várias opções que podem ser personalizadas 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 os testes, pode ser necessário coletar mais informações no registro do console. Para ativar a geração de registros para o SDK sem interface, importe Logger e consoleLoggerHandler adicionando o código a seguir 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.

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 de caixa de diálogo de compartilhamento de 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:

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 de dispositivo completo

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 de compartilhamento de tela de dispositivo completo.
sessionControlsTemplate: para o botão de controles de sessão. Confira 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 de variáveis padrão 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 personalizados

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

Uso

É possível fornecer dados personalizados como um objeto (não assinado) ou uma string (assinada) 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 externa de chatbot

Há alguns casos em que você pode querer manter o histórico e as interações de outros provedores de chat. Para isso, use o custom_data object.