Guia de instalação do SDK para Web

Nesta página, explicamos como instalar e usar o SDK da Web da Contact Center AI Platform (plataforma CCAI). Para ajudar você a começar, o Google recomenda fazer o download e usar nossos arquivos de exemplo da versão 2 do SDK da Web.

Antes de começar

  1. Inclua o carregador do SDK da Web da plataforma CCAI no seu cliente da Web.

    <script src="https://websdk.ujet.co/v2/loader.js"></script>

  2. Inicialize o SDK da Web da plataforma CCAI com sua COMPANY_KEY.

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

Fluxo de trabalho de instalação

Fluxo de trabalho de instalação

Primeiros passos

As seções a seguir fornecem informações para começar a usar o SDK da Web da plataforma CCAI.

Inicializar o SDK da Web

É possível inicializar o SDK da Web usando a chave da sua empresa.

Receber a chave da empresa

Para receber a chave da empresa, siga estas etapas:

  1. Faça login no portal da CCAI Platform usando as credenciais de administrador.

  2. Clique em Menu e em Configurações > Configurações do desenvolvedor.

  3. Acesse o painel Chave e código secreto da empresa e salve o código no campo Chave da empresa.

Em seguida, inicialize o SDK da Web com o método UJET(config) e o evento ujet.on('created', function). Informe o host da instância da plataforma CCAI, por exemplo, myccaip.uc1.ccaiplatform.com.

// INITIALIZE WEB SDK
var ujet = new UJET({
  companyId: "YOUR_COMPANY_ID",
  host: "https://myccaip.uc1.ccaiplatform.com",
});

ujet.on('created', function () {
  ujet.authenticate(getAuthToken);
});

Como alternativa, é possível usar a opção de autenticação sem um evento criado:

var ujet = new UJET({
  companyId: "YOUR_COMPANY_ID",
  authenticate: getAuthToken,
  host: "https://myccaip.uc1.ccaiplatform.com",
});

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

function getAuthToken() {
  // YOU SHOULD HAVE THIS KIND OF API ON YOUR SERVER
  return fetch('/auth/token')
    .then(function(resp) {
      // { token: '....' }
      return resp.json();
    });
}

em que fetch() chama um mecanismo de assinatura JWT do seu back-end. Para mais informações, consulte API Mozilla Fetch.

Configurar o SDK da Web para navegação conjunta

A navegação conjunta é um recurso opcional que permite que um agente veja a tela de um usuário final e, opcionalmente, assuma o controle dela. Para usar a navegação conjunta, é necessário fornecer o domínio de navegação conjunta e a chave de licença da instância da plataforma CCAI durante a inicialização do SDK.

Para configurar o SDK da Web para navegação conjunta, siga estas etapas:

  1. Para receber o domínio de navegação conjunta e a chave de licença da instância da plataforma CCAI, faça o seguinte:

    1. Faça login no portal da CCAI Platform usando as credenciais de administrador.

    2. Clique em Menu e em Configurações > Configurações do desenvolvedor.

    3. Acesse o painel Navegação conjunta e clique no botão para ativar.

    4. Salve os valores nos campos Domínio de navegação conjunta e Chave de licença.

  2. Para fornecer o domínio de navegação conjunta e a chave de licença durante a inicialização do SDK, inclua o seguinte código ao inicializar o SDK da Web:

    var ujet = new UJET({
  // other options
  cobrowseOptions: {
    license: "LICENSE_KEY",
    trustedOrigins: ["CO-BROWSE_DOMAIN"],
    api: "CO-BROWSE_DOMAIN"
  },
  // other options
})

    Substitua:

    • LICENSE_KEY: a chave de licença que você salvou na etapa anterior.

    • CO-BROWSE_DOMAIN: o domínio de navegação conjunta que você salvou na etapa anterior.

Para mais informações, consulte Configurar a navegação conjunta.

Inicializar a autenticação com a chave secreta da empresa

A função getAuthToken() precisa chamar sua API e codificar o payload com seu COMPANY_SECRET.

Veja um exemplo de assinatura de JWT usando o ExpressJS:

const express = require('express')
const jwt = require('jsonwebtoken')

const port = process.env.PORT || 3000
const secret = process.env.COMPANY_SECRET || 'secret'

const app = express()

app.use(express.json())

app.post('/auth/token', function (req, res) {
  const payload = {}
  payload['iss'] = 'YOUR_COMPANY_NAME'
  const iat = parseInt(Date.now() / 1000, 10)
  payload['iat'] = iat
  payload['exp'] = iat + 600
  const token = jwt.sign(payload, secret, { algorithm: 'HS256' })
  res.json({ token })
})

app.listen(port, function () {
  console.log(`Listing at http://localhost:${port}`)
})

É possível usar qualquer serviço de back-end.

Política de Segurança de Conteúdo

Se o servidor de produção tiver uma política de segurança de conteúdo, adicione https://websdk.ujet.co/ a script-src e frame-src.

Suporte ao Internet Explorer 11

Para oferecer suporte ao Internet Explorer, o babel-polyfill é usado no nosso código. Se o site também usa o babel-polyfill, não o importe para o SDK da Web, já que usar a mesma biblioteca globalmente e no SDK da Web pode causar uma exceção. Antes de importar o pacote, recomendamos adicionar um código para verificar e evitar isso.

Acompanhar os usuários

O exemplo anterior não rastreia os usuários. Se você quiser identificar usuários recorrentes no CRM e usar respostas automáticas com as informações deles, adicione identificadores aos usuários.

Para isso, adicione identificadores nos seguintes locais:

  1. Transmitir para o back-end em getAuthToken()

    function getAuthToken() {
  // YOU SHOULD HAVE THIS KIND OF API ON YOUR SERVER
  return fetch('/auth/token', {
    headers: {
      'Content-Type': 'application/json'
    },
    method: "POST",
    body: JSON.stringify({
      payload: {
        identifier: 'c727f2851b64b29761da170d0adee67a9a89c2d9960c8eee0ae53737413cfa4e',
        name: 'Test user',
        email: 'test@user.com',
        phone: '1800UJETSDK'
      }
    })
  }).then(function(resp) {
    return resp.json();
  });
}

  2. Adicionar ao payload ao codificar o JWT

    const express = require('express')
const jwt = require('jsonwebtoken')

const port = process.env.PORT || 3000
const secret = process.env.COMPANY_SECRET || 'secret'

const app = express()

app.use(express.json())

app.post('/auth/token', function (req, res) {
  const payload = req.body.payload
  payload['iss'] = 'YOUR_COMPANY_NAME'
  const iat = parseInt(Date.now() / 1000, 10)
  payload['iat'] = iat
  payload['exp'] = iat + 600
  const token = jwt.sign(payload, secret, { algorithm: 'HS256' })
  res.json({ token })
})

app.listen(port, function () {
  console.log(`Listing at http://localhost:${port}`)
})

  3. Adicionar outras opções em authentication()

    new UJET({
  // ...
  authenticate: function() {
    return getAuthToken().then({ token } => {
      return {
        token: token,
        user: {
          identifier: YOUR_UNIQUE_USER_ID,
          name: 'Test user' //optional,
          email: 'test@user.com', //optional,
          phone: '000000000' //optional
        }
      };
    });
  },
})

Transferência de chatbot externo

Ao transferir uma conversa do agente virtual para o agente, é possível substituir a mensagem de saudação e transmitir as transcrições para o agente preenchendo o campo external_chat_transfer nos dados personalizados. O greeting_override é compatível com a formatação Markdown.

{
  "external_chat_transfer": {
    "greeting_override": "Please hold while we connect you with a human agent.",
    "agent": {
      "name": "Agent Name",
      "avatar": "https://ujet.s3.amazonaws.com/default-virtual-agent-avatar-1.png"
    },
    "transcript": [
      {
        "sender": "agent",
        "timestamp": "2021-03-15 12:00:00Z",
        "content": [
          {
            "type": "text",
            "text": "Hello! How can I help you today?"
          },
          {
            "type": "buttons",
            "buttons": [
              {
                "label": "Create New Order",
                "selected": false
              },
              {
                "label": "Check Order Status",
                "selected": true
              },
              {
                "label": "Check Account Balance",
                "selected": false
              }
            ]
          }
        ]
      },
      {
        "sender": "end_user",
        "timestamp": "2021-03-15 12:00:15Z",
        "content": [
          {
            "type": "txt",
            "text": "Ceck Order Status"
          }
        ]
      },
      {
        "sender": "aget",
        "timestamp": "021-03-15 12:00:16Z",
        "content": [
          {
            "type": "txt",
            "text": "Ican help you with that, what's your order number?"
          }
        ]
      },
      {
        "sender": "enduser",
        "timestamp": "021-03-15 12:00:20Z",
        "content": [
          {
            "type": "mdia",
            "media": {
              "type": image",
              "url": "https://ujet.s3.amazonaws.com/default-virtual-agent-avatar-1.png"
            }
          }
        ]
      }
    ]
  }
}

Dados personalizados não assinados do chat

Quando uma conversa é iniciada, é possível transmitir dados personalizados com o objeto de chat. Os dados personalizados podem ser o sistema operacional, o número da versão, o local ou qualquer outro dado que possa ser relevante para o chat. Esses dados não são criptografados e, portanto, não devem conter informações de identificação pessoal (PII).

Também é possível transmitir esses dados personalizados para um agente virtual. Para mais informações, consulte Agentes virtuais.

var ujet = new UJET({
  // other parameters
  customData: {
    version: {
      label: 'Version',
      value: '1.1.0'
    },
    platform: {
      label: 'Platform',
      value: navigator.platform
    }
  },
});

O formato de dados personalizado é semelhante ao JSON. Cada campo de dados contém uma chave, um rótulo e um valor. Veja um exemplo:

{
  "k1": {
    "label": "Version",
    "value": "1.2.3"
  },
  "k2": {
    "label": "Dashboard",
    "value": "http://example.com"
  }
}

Neste exemplo, k1 e k2 são chaves. label é um rótulo em uma página de CRM, e value é o valor do rótulo.

Impedir a exibição de dados personalizados

É possível usar a propriedade invisible_to_agent com um objeto customData para impedir que dados personalizados assinados ou não assinados sejam mostrados no adaptador do agente. No exemplo a seguir, a versão é mostrada no adaptador do agente, mas a plataforma não é mostrada.

var ujet = new UJET({
  // Other parameters
});

ujet.config({
  customData: {
    version: {
      label: 'Version',
      value: '1.1.0'
      invisible_to_agent: true
    },
    platform: {
      label: 'Platform',
      value: navigator.platform
      invisible_to_agent: false
    }
  }
});

Quando você inclui a propriedade "invisible_to_agent" : true com um objeto de dados personalizado, o comportamento esperado é o seguinte:

Para mais informações, consulte Ver dados da sessão no adaptador do agente.

Propriedades de dados reservadas

É possível enviar propriedades de dados do cliente para a Contact Center AI Platform (plataforma CCAI) como dados personalizados assinados quando uma sessão começa. Para mais informações, consulte Enviar propriedades de dados reservadas.

Confira um exemplo de propriedades de dados reservadas em dados personalizados:

  {
    "custom_data": {
      "reserved_verified_customer": {
        "label": "Verified Customer",
        "value": false,
        "type": "boolean"
      },
      "reserved_bad_actor": {
        "label": "Bad Actor",
        "value": false,
        "type": "boolean"
      },
      "reserved_repeat_customer": {
        "label": "Repeat Customer",
        "value": false,
        "type": "boolean"
      }
    }
  }

Defina cada valor como true ou false.

  • reserved_verified_customer: true se você considerar que esse usuário final é um cliente legítimo.
  • reserved_bad_actor: true se você considerar que esse usuário final pode ser um usuário de má-fé.
  • reserved_repeat_customer: true se você determinou que esse usuário final já entrou em contato com seu contact center antes.

Desativar anexos

Para impedir que os consumidores façam upload de anexos, use a opção disableAttachment:

new UJET({
// ...
  disableAttachment: true
});

Com disableAttachment: true, não haverá ícone de anexo na área de entrada do chat, e os consumidores não poderão arrastar arquivos para a área de mensagem.

Desvio de chat

Quando os agentes não estiverem disponíveis, você poderá especificar opções para lidar automaticamente com essa condição em chats na Web e em dispositivos móveis.

As opções de desvio de chat podem ser encontradas no portal da CCAI Platform, em Configurações>Chat>Desvio para Web e dispositivos móveis.

Desvio após o horário de funcionamento

O desvio fora do horário de funcionamento é específico para a central de atendimento ou a fila que está fora do horário de funcionamento. Para ativar o desvio fora do horário de atendimento, faça o seguinte:

  1. No portal da plataforma CCAI, em Configurações > Chat > Desvio para Web e dispositivos móveis.

  2. Se a opção Desvio fora do horário de atendimento estiver desativada, selecione-a para ativar.

  3. Mude a opção Permitir transferências para permitir transferências para filas fora do horário de funcionamento para o seguinte comportamento:

    • Os agentes poderão ver as seguintes filas como opções de transferência no adaptador de agente:

      • Todas as filas dentro do horário de funcionamento

      • Todas as filas fora do horário de funcionamento sem desvio ativado e agentes ativos conectados

      • Todas as filas que estão fora do horário de atendimento com um agente virtual atribuído no modo de disponibilidade 24 horas

    • Os agentes não poderão ver os seguintes tipos de filas:

      • Todas as filas que estão fora do horário de atendimento com o desvio fora do horário de atendimento ativado

      • Todas as filas que estão fora do horário de funcionamento com um agente virtual atribuído limitado ao horário de funcionamento da fila

Desvio de capacidade excedida

O desvio de capacidade excedente é específico para a capacidade atual do agente e o tempo de espera atual da fila à qual a sessão está atribuída. Para ativar essa opção, faça o seguinte:

  1. No portal da Contact Center AI Platform, em Configurações > Chat > Desvio para Web e Dispositivos Móveis.

  2. Se a opção Desvio de sobrecarga estiver desativada, selecione o botão de alternância Desvio de sobrecarga para ativá-la.

  3. Defina o tempo de espera em minutos que mudaria o status da fila para capacidade excedida.

    Essa configuração de limite de tempo também é usada para definir a frequência com que o usuário final verá a mensagem de capacidade excedida.

Opções de desvio

É possível especificar as opções disponíveis para o usuário final quando o desvio ocorre.

E-mail

Quando ativada, a opção de e-mail permite que o usuário final seja redirecionado para o e-mail. Quando o usuário final estabelece uma sessão de chat na Web ou em dispositivos móveis fora do horário de atendimento, ele é perguntado se quer escrever um e-mail.

O comportamento específico é o seguinte:

  • Dispositivos móveis:com o desvio de e-mail ativado e o limite de tempo de espera estimado atingido, quando o usuário final toca na opção de chat, ele é direcionado para o app de e-mails padrão. A versão do app e a versão do iOS/Android são inseridas automaticamente no corpo do e-mail, e o assunto é Suporte para [caminho do menu selecionado]. Como alternativa, o formulário de e-mail pode estar ativado. Para mais informações, consulte Formulário de e-mail integrado para SDKs para Web e dispositivos móveis.

  • Web:apresenta uma opção de e-mail para os usuários finais. Ao clicar, um formulário de e-mail vai aparecer. Para mais informações, consulte Formulário de e-mail integrado para SDKs para Web e para dispositivos móveis.

  • Continuar esperando (somente na Web): permite que o usuário final clique em uma opção para continuar esperando.

As caixas de diálogo de consentimento de navegação conjunta permitem que um usuário final consinta com uma solicitação inicial de sessão de navegação conjunta, bem como uma solicitação subsequente de controle remoto ou de acesso total ao dispositivo. Quando você configura o SDK da Web para co-browse, ele fornece caixas de diálogo de consentimento padrão e um botão de encerramento de sessão. No entanto, é possível adicionar campos opcionais ao objeto cobrowseOptions para personalizar as caixas de diálogo de consentimento e o botão de encerramento da sessão. Isso não apenas dá controle sobre a aparência desses elementos, mas também permite personalizar as declarações de consentimento nas caixas de diálogo de consentimento para atender aos seus requisitos.

Uma declaração de consentimento aparece em uma caixa de diálogo de consentimento. A declaração de consentimento indica ao usuário final o que esperar da experiência de navegação conjunta e com o que ele está concordando. Se você pretende gravar uma sessão de navegação conjunta, mencione isso na declaração de consentimento. Consulte Exemplo de código para caixas de diálogo de consentimento personalizadas para ver exemplos de caixas de diálogo de consentimento personalizadas que contêm declarações de consentimento.

Procedimento

Para configurar o SDK da Web para navegação conjunta e personalizar as caixas de diálogo de consentimento, siga estas etapas:

  1. Para receber o domínio de navegação conjunta e a chave de licença da instância da plataforma CCAI, faça o seguinte:

    1. Faça login no portal da CCAI Platform usando as credenciais de administrador.

    2. Clique em Menu e em Configurações > Configurações do desenvolvedor.

    3. Acesse o painel Navegação conjunta e clique no botão para ativar.

    4. Salve os valores nos campos Domínio de navegação conjunta e Chave de licença.

  2. Para inicializar o SDK da Web e incluir os campos de personalização de navegação conjunta, execute o seguinte código:

    var ujet = new UJET({
  // other options
  cobrowseOptions: {
    license: "LICENSE_KEY",
    trustedOrigins: ["CO-BROWSE_DOMAIN"],
    api: "CO-BROWSE_DOMAIN"
    cobrowseRequestHtml: "COBROWSE_REQUEST_HTML",
    remoteControlHtml: "REMOTE_CONTROL_HTML",
    fullDeviceHtml: "FULL_DEVICE_HTML",
    styles: "STYLES",
    sessionControlsHtml: "SESSION_CONTROLS_HTML"
  },
  // other options
})

    Substitua:

Classes de botões

As caixas de diálogo de consentimento contêm botões que permitem ao usuário permitir ou negar a solicitação de navegação conjunta ou fechar a caixa de diálogo de consentimento. Para que esses botões se comuniquem com o SDK da Web, é necessário associar as seguintes classes de botão aos tipos de botão correspondentes. O SDK da Web pesquisa o código dessas classes e adiciona um listener de eventos para cada uma delas. Confira as classes de botão:

  • cobrowse-allow: um botão para o usuário final permitir a solicitação.

  • cobrowse-deny: um botão para o usuário final negar a solicitação.

  • cobrowse-close: um botão para o usuário final fechar a caixa de diálogo de consentimento.

O exemplo de código a seguir contém caixas de diálogo de consentimento personalizadas, um botão de encerramento de sessão e informações de estilo para esses elementos. Cada caixa de diálogo de consentimento no exemplo contém uma declaração de consentimento. Confira as propriedades das caixas de diálogo de consentimento para cada um dos três modos de navegação conjunta:

"cobrowseOptions": {
    "license": "example_license",
    "trustedOrigins": "[https://example.com]",
    "cobrowseRequestHtml": "<div class=\"custom-backdrop\">\n <div class=\"cobrowse-confirm-dialog\">\n <div class=\"title\">\n <div></div>\n <span>Co-browse</span>\n <div class=\"cobrowse-close cobrowse-deny\">\n <svg width=\"14\" height=\"14842 13.1765 11.5294L8.64706 7L13.1765 2.47059C13.6313 2.01577 13.6313 1.27835 13.1765 0.823529C12.7216 0.368707 11.9842 0.368706 11.5294 0.823529L7 5.35294Z\" fill=\"#919191\"/>\n </svg>\n </div>\n </div>\n <div class=\"body\">\n <h2>Get step-by-step live and secure guidance with a Care Expert</h2>\n \n <ul>\n <li>Stop screen sharing at any time</li>\n <li>Personal info automatically hidden</li>\n  <li>Only your_company_name screens are shared</li>\n </ul>\n </div>\n <div class=\"description\">\n <svg id=\"loader\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><line x1=\"12\" y1=\"2\" x2=\"12\" y2=\"6\"></line><line x1=\"12\" y1=\"18\" x2=\"12\" y2=\"22\"></line><line x1=\"4.93\" y1=\"4.93\" x2=\"7.76\" y2=\"7.76\"></line><line x1=\"16.24\" y1=\"16.24\" x2=\"19.07\" y2=\"19.07\"></line><line x1=\"2\" y1=\"12\" x2=\"6\" y2=\"12\"></line><line x1=\"18\" y1=\"12\" x2=\"22\" y2=\"12\"></line><line x1=\"4.93\" y1=\"19.07\" x2=\"7.76\" y2=\"16.24\"></line><line x1=\"16.24\" y1=\"7.76\" x2=\"19.07\" y2=\"4.93\"></line></svg>\n <span>\n Co-browse lets us view your active session in a limited way to give you live, on-screen assistance. We won't be able to view any other applications on your device.\n </span>\n </div>\n <div class=\"footer\">\n <span>\n By tapping accept & continue, you are consenting to allow the your_company_name Expert to view your screen to initiate assisted navigation. <a href=\"https://www.example.com\">View the your_company_name Privacy Policy</a>\n </span>\n <button class=\"cobrowse-allow\">Accept & continue</button>\n </div>\n </div>\n </div>\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M7 5.35294L2.47059 0.823529C2.01577 0.368707 1.27835 0.368707 0.823529 0.823529C0.368707 1.27835 0.368706 2.01576 0.823529 2.47059L5.35294 7L0.823529 11.5294C0.368707 11.9842 0.368707 12.7216 0.823529 13.1765C1.27835 13.6313 2.01576 13.6313 2.47059 13.1765L7 8.64706L11.5294 13.1765C11.9842 13.6313 12.7216 13.6313 13.1765 13.1765C13.6313 12.7216 13.6313 11.9",
    "remoteControlHtml": "<div class=\"custom-backdrop\">\n <div class=\"cobrowse-confirm-dialog\">\n <div class=\"title\">\n <div></div>\n <span>Co-browse</span>\n <div class=\"cobrowse-close cobrowse-deny\">\n  <svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M7 5.35294L2.47059 0.823529C2.01577 0.368707 1.27835 0.368707 0.823529 0.823529C0.368707 1.27835 0.368706 2.01576 0.823529 2.47059L5.35294 7L0.823529 11.5294C0.368707 11.9842 0.368707 12.7216 0.823529 13.1765C1.27835 13.6313 2.01576 13.6313 2.47059 13.1765L7 8.64706L11.5294 13.1765C11.9842 13.6313 12.7216 13.6313 13.1765 13.1765C13.6313 12.7216 13.6313 11.9842 13.1765 11.5294L8.64706 7L13.1765 2.47059C13.6313 2.01577 13.6313 1.27835 13.1765 0.823529C12.7216 0.368707 11.9842 0.368706 11.5294 0.823529L7 5.35294Z\" fill=\"#919191\"/>\n  </svg>\n </div>\n </div>\n <div class=\"body\">\n <h2>Get step-by-step live and secure guidance with a Care Expert</h2>\n \n <ul>\n  <li>Stop screen sharing at any time</li>\n  <li>Personal info automatically hidden</li>\n <li>Only your_company_name screens are shared</li>\n</ul>\n</div>\n<div class=\"description\">\n<svg id=\"loader\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><line x1=\"12\" y1=\"2\" x2=\"12\" y2=\"6\"></line><line x1=\"12\" y1=\"18\" x2=\"12\" y2=\"22\"></line><line x1=\"4.93\" y1=\"4.93\" x2=\"7.76\" y2=\"7.76\"></line><line x1=\"16.24\" y1=\"16.24\" x2=\"19.07\" y2=\"19.07\"></line><line x1=\"2\" y1=\"12\" x2=\"6\" y2=\"12\"></line><line x1=\"18\" y1=\"12\" x2=\"22\" y2=\"12\"></line><line x1=\"4.93\" y1=\"19.07\" x2=\"7.76\" y2=\"16.24\"></line><line x1=\"16.24\" y1=\"7.76\" x2=\"19.07\" y2=\"4.93\"></line></svg>\n<span>\n Co-browse lets us view your active session in a limited way to give you live, on-screen assistance. We won't be able to view any other applications on your device.\n</span>\n</div>\n<div class=\"footer\">\n<span>\n By tapping accept & continue, you are consenting to allow the your_company_name Expert to view your screen to initiate assisted navigation. <a href=\"https://www.example.com\">View the your_company_name Privacy Policy</a>\n </span>\n <button class=\"cobrowse-allow\">Accept & continue</button>\n </div>\n </div>\n </div>",
    "fullDeviceHtml": "<div class=\"custom-backdrop\">\n <div class=\"cobrowse-confirm-dialog\">\n <div class=\"title\">\n <div></div>\n <span>Co-browse</span>\n <div class=\"cobrowse-close cobrowse-deny\">\n  <svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M7 5.35294L2.47059 0.823529C2.01577 0.368707 1.27835 0.368707 0.823529 0.823529C0.368707 1.27835 0.368706 2.01576 0.823529 2.47059L5.35294 7L0.823529 11.5294C0.368707 11.9842 0.368707 12.7216 0.823529 13.1765C1.27835 13.6313 2.01576 13.6313 2.47059 13.1765L7 8.64706L11.5294 13.1765C11.9842 13.6313 12.7216 13.6313 13.1765 13.1765C13.6313 12.7216 13.6313 11.9842 13.1765 11.5294L8.64706 7L13.1765 2.47059C13.6313 2.01577 13.6313 1.27835 13.1765 0.823529C12.7216 0.368707 11.9842 0.368706 11.5294 0.823529L7 5.35294Z\" fill=\"#919191\"/>\n </svg>\n </div>\n </div>\n <div class=\"body\">\n <h2>Get step-by-step live and secure guidance with a Care Expert</h2>\n \n <ul>\n <li>Stop screen sharing at any time</li>\n <li>Personal info automatically hidden</li>\n <li>Only your_company_name screens are shared</li>\n </ul>\n </div>\n <div class=\"description\">\n <svg id=\"loader\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><line x1=\"12\" y1=\"2\" x2=\"12\" y2=\"6\"></line><line x1=\"12\" y1=\"18\" x2=\"12\" y2=\"22\"></line><line x1=\"4.93\" y1=\"4.93\" x2=\"7.76\" y2=\"7.76\"></line><line x1=\"16.24\" y1=\"16.24\" x2=\"19.07\" y2=\"19.07\"></line><line x1=\"2\" y1=\"12\" x2=\"6\" y2=\"12\"></line><line x1=\"18\" y1=\"12\" x2=\"22\" y2=\"12\"></line><line x1=\"4.93\" y1=\"19.07\" x2=\"7.76\" y2=\"16.24\"></line><line x1=\"16.24\" y1=\"7.76\" x2=\"19.07\" y2=\"4.93\"></line></svg>\n <span>\n Co-browse lets us view your active session in a limited way to give you live, on-screen assistance. We won't be able to view any other applications on your device.\n </span>\n </div>\n <div class=\"footer\">\n <span>\n By tapping accept & continue, you are consenting to allow the your_company_name Expert to view your screen to initiate assisted navigation. <a href=\"https://www.example.com\">View the your_company_name Privacy Policy</a>\n </span>\n  <button class=\"cobrowse-allow\">Accept & continue</button>\n </div>\n </div>\n </div>",
    "styles": ".some-end-button {\n border-radius: 20px;\n background-color: blue;\n color: white;\n display: marquee;\n width: 20rem;\n font-size:200%;\n height: 20rem;\n }\n .custom-backdrop {\n background: rgba(0, 0, 0, 0.1);\n position: fixed;\n z-index: 2147483647;\n bottom: 0;\n top: 0;\n left: 0;\n right: 0;\n }\n .cobrowse-confirm-dialog {\n color: #232424;\n font-family:sans-serif;\n line-height:140%;\n position:fixed;\n background:white;\n border-radius:5px;\n z-index:2147483647;\n top:50px;\n left:50%;\n width:75%;\n max-width:450px;\n transform:translateX(-50%);\n box-shadow:2px 2px 30px rgb(0,0,0,0.08);\n padding: 1.5rem;\n }\n .title {\n text-align:center;\n display: flex;\n align-items: center;\n justify-content: space-between;\n font-size: 125%;\n line-height: 25px;\n padding: 20px;\n border-radius: 5px 5px 0 0;\n }\n \n .description {\n height: 8rem;\n display: flex;\n flex-direction:column;\n justify-content: center;\n align-items: center;\n background-color: #F3F3F3;\n }\n \n #loader {\n height:4rem;\n }\n \n .footer {\n margin-top: 1rem;\n margin-bottom: 1rem;\n display: flex;\n flex-direction: column;\n justify-content: flex-start\n }\n .cobrowse-allow {\n background-color: pink;\n color: white;\n flex-grow: 2;\n height: 3rem;\n }\n #cobrowse-end-button {\n cursor: pointer;\n position: fixed;\n z-index: 2147483647;\n top: 50%;\n left: 25%;\n transform: translateX(-50%);\n display: flex;\n justify-content: center;\n align-items: center;\n }\n #cobrowse-end-button:hover {\n background-color: #92162D;\n }",
    "sessionControlsHtml": " <div class=\"some-end-button\">\n End Session\n </div>"
  }

Para mais informações, consulte Configurar a navegação conjunta.

Personalização de mensagens visuais e em vários idiomas

O novo método da plataforma CCAI (opção) tem dois campos para oferecer suporte a vários idiomas e personalização de mensagens visuais:

  • lang: indica o idioma padrão quando o usuário final não escolhe um idioma preferencial. Esse código está em conformidade com a ISO 639-1 e, se omitido, é en por padrão.

  • translation: o SDK da Web é compatível com vários idiomas para os textos exibidos. Com o objeto de tradução, é possível personalizar textos para idiomas existentes ou até mesmo adicionar textos para novos idiomas. Por exemplo: de, es, fr, ja.

Veja a seguir um exemplo de objeto de tradução que está personalizando o texto em inglês. Como você pode ver, as chaves de nível superior do objeto de tradução precisam ser o código do idioma.

// ES6
let translation = `{
  "en": {
    "ujet_start_title": "Hi!"
  },
  "es": {
    "ujet_start_title": "¡Hola!"
  },
  "fr": {
    "ujet_start_title": "Salut!"
  },
  "de": {
    "ujet_start_title": "Hallo!"
  },
  "it": {
    "ujet_start_title": "Ciao!"
  },
  "ja": {
    "ujet_start_title": "こんにちは！"
  },
  "ko": {
    "ujet_start_title": "안녕하세요!"
  },
  "pt": {
    "ujet_start_title": "Olá!"
  },
  "pt-BR": {
    "ujet_start_title": "Olá!"
  },
  "sv": {
    "ujet_start_title": "Hej!"
  }
}`;

// initialize when dom ready
var ujet = new UJET({
  // other fields
  lang: 'en',
  translation: translation
});

As mensagens de personalização são:

"ujet_ask_phone_number_button_title": "Call Me"
"ujet_ask_phone_number_description": "Provide your phone number below"
"ujet_ask_phone_number_title_instant": "We'll Call You"
"ujet_ask_phone_number_title_scheduled": "Let's Schedule a Call"
"ujet_ask_phone_number_warning": "Your call may be monitored or recorded for training and quality assurance purposes."
"ujet_call_confirm_content": "Your phone should be ringing right about - {0}"
"ujet_call_confirm_start_new_conversation": "Start A New Conversation"
"ujet_call_record_permission_subtitle": "Do you give permission for {0} to record your call for training and quality?"
"ujet_call_record_permission_title": "Permission to Record"
"ujet_channel_chat": "Let's connect you to one of our chat support specialists",
"ujet_channel_instant_call": "Let one of our support specialists give you a call now",
"ujet_channel_menu_chat": "Chat now"
"ujet_channel_menu_email": "Email"
"ujet_channel_menu_instant_call": "Call now"
"ujet_channel_menu_keep_waiting": "Keep Waiting"
"ujet_channel_menu_scheduled_call": "Schedule call"
"ujet_channel_scheduled_call": "Let's schedule a time for a support specialist to call and help you",
"ujet_channel_email": "Please send us an email so we can help",
"ujet_chat_end": "End chat"
"ujet_chat_ended": "This chat has ended"
"ujet_chat_input_placeholder": "Type your message here"
"ujet_chat_leave": "Leave chat"
"ujet_chat_timed_out": "This chat has timed out"
"ujet_chat_title_with_multiple_agent": "Multiple Agents"
"ujet_chat_title_with_one_agent": "Chatting with {0}"
"ujet_chat_title_with_two_agent": "Chatting with {0} & {1}"
"ujet_chat_transfer_failed": "Transfer has failed"
"ujet_chat_transfer_joined": "<b>{0}<\/b> just joined the conversation"
"ujet_chat_transfer_left": "<b>{0}<\/b> just left the conversation"
"ujet_chat_transfer_started_menu": "<b>{0}<\/b> is transferring this chat to another agent..."
"ujet_chat_transfer_started_user": "<b>{0}<\/b> is adding another agent to this conversation..."
"ujet_common_back": "Back"
"ujet_common_cancel": "Cancel"
"ujet_common_end": "End"
"ujet_common_no": "No"
"ujet_common_save": "Save"
"ujet_common_submit": "Submit"
"ujet_common_support": "Support"
"ujet_common_yes": "Yes"
"ujet_deflection_menu_title": "Select from the options below"
"ujet_error_no_available_language": "No Available Language"
"ujet_error_phone_number_invalid": "Please input a valid phone number."
"ujet_file_upload_button": "Choose a file to upload"
"ujet_file_upload_failure_size": "Looks like we couldn't upload. <br> Please try uploading a file <br> that is less than {0}."
"ujet_file_upload_failure_type": "Looks like we couldn't upload. <br> We only accept <br> .JPG, .PNG, or .MP4."
"ujet_file_upload_failure_unknown": "Looks like we couldn't upload. <br> Please try again!"
"ujet_file_upload_subtitle": "Drop files here to upload"
"ujet_file_upload_title": "Upload Files"
"ujet_greeting": "Hi there, how can we help?"
"ujet_instant_call_confirm_content": "Your phone should be ringing shortly"
"ujet_language_chinese": "中文"
"ujet_language_english": "English"
"ujet_language_french": "Français"
"ujet_language_german": "Deutsch"
"ujet_language_italian": "Italiano"
"ujet_language_japanese": "日本語"
"ujet_language_korean": "한국어"
"ujet_language_portuguese": "Português (Portugal)"
"ujet_language_portuguese_brazil": "Português (Brazil)"
"ujet_language_spanish": "Español"
"ujet_language_swedish": "Svenska"
"ujet_menu_title": "Select an option"
"ujet_message_back_in_menu": "Looks like you changed your mind! How else can we help?"
"ujet_message_channel": "How would you like to communicate?"
"ujet_message_chat_deflection_afterhour": "We are currently closed. We look forward to helping you during our normal business hours."
"ujet_message_chat_deflection_default": "We are currently experiencing a high volume of requests with a current wait time of <b>{0}<\/b>. How would you like to reach out?"
"ujet_message_chat_deflection_email": "Please contact us via email: <b><a href="mailto:{0}">{0}<\/a><\/b>."
"ujet_message_chat_deflection_keepwaiting": "Thank you for continuing to wait. The remaining wait time is <b>{0}<\/b>."
"ujet_message_chat_deflection_outage": "We are currently experiencing a high volume of request, how would you like to reach out?"
"ujet_message_chat_deflection_recurring": "Thanks for your patience! The remaining wait time is <b>{0}<\/b>."
"ujet_message_chat_restart": "Connecting to your ongoing chat, one moment please..."
"ujet_message_chat_start": "One moment please..."
"ujet_message_queue": "Let's help you with<br /><strong>{0}<\/strong>"
"ujet_rating_feedback_placeholder": "Let us know how we can improve."
"ujet_rating_result_subtitle": "We appreciate your feedback"
"ujet_rating_result_title": "Thank you!"
"ujet_rating_title": "Rate Your Experience"
"ujet_redirect_action_title": "Open this page in a new tab"
"ujet_redirect_url_title": "Visit the page below"
"ujet_schedule_time_description": "Pick a time that works best for you"
"ujet_schedule_time_title": "Let's Schedule a Call"
"ujet_scheduled_call_cancel_cancel": "Cancel"
"ujet_scheduled_call_cancel_content": "You scheduled a support call for<br><b>{0}<\/b> at <b>{1}<\/b>."
"ujet_scheduled_call_cancel_keep": "Keep It"
"ujet_scheduled_call_cancel_title": "Cancel the existing call?"
"ujet_screenshot_init_cancel": "No Thanks"
"ujet_screenshot_init_okay": "Accept"
"ujet_screenshot_init_title": "Screenshot Request"
"ujet_screenshot_install_cancel": "Cancel"
"ujet_screenshot_install_okay": "Install"
"ujet_screenshot_install_title": "Install Chrome Extension"
"ujet_screenshot_take_action": "Take Screenshot"
"ujet_screenshot_take_title": "Click the button below to send a screenshot to the agent"
"ujet_screenshot_verify_cancel": "No"
"ujet_screenshot_verify_okay": "Yes"
"ujet_screenshot_verify_title": "Successfully Installed Chrome Extension"
"ujet_start_title": "Need any help?"
"ujet_tap_to_minimize": "Tap to minimize"
"ujet_time_hour": "hour | hours"
"ujet_time_minute": "minute | minutes"

Personalização de logotipo e ícone

O método new UJET(option) tem campos para personalizar o logotipo e o ícone.

  • logo:o URL da imagem do logotipo.

  • A posição do widget (válido apenas para computadores)

    • right:define a posição da borda direita em px (o valor padrão é 50).

    • bottom:define a posição da borda inferior em px (o valor padrão é 50).

  • A posição do ícone (apenas para computadores)

    • right:define a posição da borda direita em px (o valor padrão é 50).

    • bottom:define a posição da borda inferior em px (o valor padrão é 50).

Exemplo de personalização de logotipo e ícone

new UJET({
  logo: 'https://example.com/logo.svg',
  // widget position
  right: '50px',
  bottom: '150px',

  // launcher position
  launcher: {
    right: '50px',
    bottom: '50px',
  }
})

Personalização de logotipo e ícone

Personalização de logotipo e ícone

Personalização de logotipo e ícone

Personalização de logotipo e ícone

Personalização de tema

O método new UJET(option) tem um campo para personalização de tema.

  • style:o objeto de tema aceita quatro valores para o widget.

    • links:uma lista de links de folhas de estilo para fontes da Web.

    • --primary-font: um valor para o estilo CSS font-family aplicado a toda a interface da Web, por exemplo, Merriweather

    • --primary-color: um valor de código hexadecimal usado como a cor principal da interface da Web, por exemplo, #51C3C3

    • --link-color: um valor de código hexadecimal usado como a cor do link da UI da Web, por exemplo, #51C3C3.

  • launcher:o objeto de inicializador aceita quatro valores para o inicializador.

    • cssText:uma sintaxe CSS usada como o estilo CSS do inicializador.

    • chatIcon:um URL de ícone SVG usado para o ícone de chat normal.

    • closeIcon:um URL de ícone SVG usado para o ícone "Fechar".

    • style:esse objeto de tema separado aceita dois valores para o inicializador.

      • --background-color: um valor de código hexadecimal usado como a cor de plano de fundo da tela de início, por exemplo, #E85230 --icon-color: um valor de código hexadecimal usado como a cor do ícone na tela de início, por exemplo, #FFF
var ujet = new UJET({
  // ...
  style: {
    links: [
      'https://fonts.example.com/css?family=Droid+Serif:400,700&display=swap',
    ],
    '--primary-font': 'Droid Serif, Georgia, serif',
    '--primary-color': '#F1684A',
    '--link-color': '#F1684A',
  },
  launcher: {
    cssText: '.wrap button {background: #E85230}',
    chatIcon: 'https://example.com/logo.svg',
    closeIcon: 'https://example.com/close.svg',
    style: {
      '--background-color': '#F1684A',
      '--icon-color': '#fff',
    }
  }
});

Estilo do acesso rápido

Rastreamento da seleção de canais e do envio de e-mails

Para permitir o rastreamento da seleção de canais e do envio de e-mails, o SDK da Web usa a função postMessage, que transmite uma mensagem com os seguintes dados:

  • application:o tipo de dispositivo.

  • sdk_version::a versão do SDK da Web.

  • user_agent::a versão do navegador.

  • company:o nome do locatário.

  • menu_name::o nome da fila ou do menu que o usuário final selecionou.

  • menu_path::o caminho para a fila ou o menu que o usuário final selecionou.

  • menu_id::o ID do menu ou da fila que o usuário final selecionou.

  • url:o URL da página da Web em que o usuário final estava quando selecionou um canal ou enviou um e-mail.

  • timestamp:o horário em que o usuário final fez a seleção.

  • has_attachments::se um e-mail tinha anexos quando foi enviado (isso só aparece durante o envio do e-mail, não durante a seleção do canal).

Os dados da mensagem são armazenados em um objeto ujet com dois atributos: um chamado action, que será uma string com o nome da ação concluída, e outro chamado data, que incluirá os dados descritos anteriormente.

Para recuperar dados da mensagem, crie um listener de eventos que detecte "message". Um exemplo que imprime a ação e os dados no console é descrito na próxima seção. Confira um exemplo de funcionamento na pasta tracking-channel-selection.

window.addEventListener('message', (e) => {
  if (e.data && e.data.ujet) {
    console.log(`Action: ${e.data.ujet.action}`);
    console.log(`Message Data: ${e.data.ujet.data}`);
  }
});

Ocultar a borda do logotipo do agente

Para ocultar a borda do logotipo do agente, adicione '--logo-shadow': 'none' no atributo de estilo e defina como verdadeiro em new UJET(option):

new UJET({
  // ...
  style: {
    '--logo-shadow': 'none',
  }
});

Ocultar o ícone de inicialização

Por motivos estéticos, é possível ocultar o ícone de inicialização da interface da Web, optando por usar um acionador de chat proativo ou iniciar o chat de forma programática. Para remover o ícone de inicialização, adicione o atributo launcher e defina-o como verdadeiro no novo UJET(opção):

new UJET({
  // ...
  launcher: false,
});

Para iniciar a interface da Web de maneira programática, consulte Como iniciar a interface da Web de maneira programática. Para iniciar a UI da Web com um gatilho de chat proativo, consulte Gatilho proativo.

Usar um ponto de acesso direto

É possível usar um acesso direto para enviar um usuário final diretamente para uma fila específica.

Para usar um ponto de acesso direto, siga estas etapas:

  1. Faça login no portal da plataforma CCAI.

  2. Acesse Configurações > Fila.

  3. Verifique se o canal da Web está ativado alternando use.

  4. Acesse Editar > Visualizar para o canal da Web. A estrutura da Web é exibida.

  5. Selecione a fila para onde você quer que o usuário final vá diretamente.

  6. Acesse a seção Ponto de acesso e clique em Criar ponto de acesso direto.

  7. Forneça as seguintes informações:

    1. Defina o tipo de ponto de acesso como geral.

    2. Informe o Nome do ponto de acesso. Esse é o nome que aparece na lista Ponto de acesso.

    3. Informe o rótulo do ponto de acesso geral. Esse é o valor que você vai usar para configurar o SDK da Web.

  8. Clique em Criar.

É possível transmitir o nome de um ponto de acesso direto usando o método ujet.start(options). Veja o exemplo a seguir:

var launcher = document.getElementById('launcher');
launcher.addEventListener('click', function() {
  if (ujet.status === 'open') {
    ujet.close();
  } else {
    ujet.start({ menuKey: '__MENU_KEY__' });
  }
});

Fechar a UI da Web de forma programática

Essa é uma etapa opcional. Sem essa etapa, a interface da Web será concluída e minimizada automaticamente.

Essa etapa permite chamar a função de callback quando o consumidor quer fechar o SDK da Web.

ujet.on('close', function() {
  // do something here
});

Iniciar a UI da Web de forma programática

Essa é uma etapa opcional. Sem essa etapa, o usuário final pode iniciar a UI da Web clicando no ícone de inicialização da interface da Web.

Essa etapa permite abrir a interface da Web de maneira programática com o método ujet.start(options). Talvez você queira que o usuário final clique em um botão extra para abrir a interface da Web, como este:

<button id="launcher">Clique para abrir</button>

var ujet = new UJET({
  companyId: "YOUR_COMPANY_ID",
  host: "HOST_URL",
  launcher: false
});

var launcher = document.getElementById('launcher');
launcher.addEventListener('click', function() {
  if (ujet.status === 'open') {
    ujet.close();
  } else {
    ujet.start();
  }
});

ujet.on('ready', function() {
  launcher.textContent = 'ready to talk';
});

ujet.registerHook('loading', function() {
  launcher.textContent = 'loading';
});

ujet.registerHook('open', function() {
  launcher.textContent = 'Click to close';
});

ujet.registerHook('close', function() {
  launcher.textContent = 'Click to open';
});

ujet.on('created', function() {
  ujet.authenticate(getAuthToken);
});

Também é possível fechar o widget com o método ujet.close() e removê-lo com o método ujet.destroy().

Acionador proativo

Com os acionadores proativos, é possível acionar o SDK da Web para enviar uma mensagem ao usuário final.

Para configurar um acionador proativo, siga estas etapas:

  1. No portal da plataforma CCAI, acesse Configurações > Chat.

  2. Acesse o painel Acionadores de chat proativo na Web e clique em Ver acionadores. O painel Acionadores é exibido.

  3. Clique em Adicionar gatilho. O painel Escolher nome será exibido.

  4. No campo Nome do gatilho, insira um nome e clique em Próxima. O painel Definir condições é exibido.

  5. Para definir condições, faça o seguinte:

    1. Ao lado de O usuário final, selecione uma condição.

    2. No campo Insira uma palavra-chave, digite uma palavra-chave que você quer que a condição use como referência e pressione a tecla Enter.

    3. Repita a etapa anterior para cada palavra-chave que você quiser inserir.

    4. Para adicionar outra condição, clique em Adicionar outra condição e, em seguida, clique no tipo de condição que você quer.

    5. Defina a opção de configuração para a condição.

    6. Para adicionar outra condição, repita as duas etapas anteriores.

    7. Clique em Próxima. O painel Definir ações é exibido.

  6. Para definir ações, faça o seguinte:

    1. Em Atribuição de fila, insira o nome do nó da fila de chat ao qual você quer atribuir o usuário final. Se houver uma fila de chat com esse nome, ele vai aparecer em negrito abaixo do campo.

    2. Clique no nome da fila de chat em negrito. Uma caixa de diálogo de confirmação é exibida.

    3. Clique em OK para continuar.

    4. Em Mensagem de chat, digite a mensagem que você quer mostrar no chat acionado.

    5. Clique em Concluir.

    6. Para ativar o novo acionador, clique em Ativar.

IDs de tíquetes atuais

Se você tiver um tíquete para um usuário final, poderá recuperar o ID do tíquete do seu CRM e transmiti-lo ao SDK da Web chamando ujet.start().

Exemplo:

yourFunctionToRetrieveTicket()
  .then((existingTicket) => {
    ujet.start({ ticketId: existingTicket });
  });

Consulte o exemplo na pasta ticket-id para referência.