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 (CCAI). Para ajudar você a começar, o Google recomenda fazer o download e usar os arquivos de exemplos 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

Você pode inicializar o SDK da Web usando a chave da sua empresa.

Receber a chave da empresa

Para receber a chave da sua empresa, siga estas etapas:

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

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

  3. Acesse o painel Chave e senha secreta 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). Forneça 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, use 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 invoca 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() invoca um mecanismo de assinatura JWT do seu back-end. Para mais informações, consulte a API Fetch da Mozilla.

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, forneça o domínio e a chave de licença da instância da plataforma de 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 sua instância da plataforma CCAI, faça o seguinte:

    1. Faça login no portal da plataforma CCAI usando 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 o segredo da sua empresa

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

Confira 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/ ao script-src e ao frame-src.

Suporte ao Internet Explorer 11

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

Acompanhar usuários

O exemplo anterior não rastreia os usuários. Se você quiser identificar usuários recorrentes no seu CRM e usar respostas predefinidas 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 mais 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 ao agente preenchendo o campo external_chat_transfer com os 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"
            }
          }
        ]
      }
    ]
  }
}

Chat unsigned custom data

Quando um chat é iniciado, você pode transmitir dados personalizados com o objeto de chat. Esses dados podem ser o sistema operacional, o número da versão, o local ou qualquer outra informação relevante para a conversa. Esses dados não são criptografados e, portanto, não devem conter informações de identificação pessoal (PII).

Você também pode 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 do CRM, e value é o valor do rótulo.

Impedir a exibição de dados personalizados

Use 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.

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
    }
  }
});

Ao incluir a propriedade "invisible_to_agent" : true com um objeto de dados personalizado, você pode esperar o seguinte comportamento:

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

Propriedades de dados reservadas

É possível enviar propriedades de dados reservados 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 a seguir um exemplo de propriedades de dados reservadas em dados personalizados:

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

Substitua:

  • VERIFIED_CUSTOMER_BOOLEAN: "True" se você considerar que esse usuário final é um cliente legítimo.
  • VERIFIED_BAD_ACTOR_BOOLEAN: verdadeiro se você considerar que esse usuário final pode ser um usuário de má-fé.
  • REPEAT_CUSTOMER_BOOLEAN: verdadeiro se você determinou que esse usuário final já entrou em contato com sua central de atendimento.

Desativar anexos

Você pode impedir que os consumidores façam upload de anexos com a opção disableAttachment:

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

Com o disableAttachment: true, não há um ícone de anexo na área de entrada do chat, e os consumidores não podem arrastar arquivos para a área de mensagens.

Redução de chats

Quando os agentes não estão disponíveis, é possível especificar opções para lidar automaticamente com essa condição em chats na Web e em dispositivos móveis.

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

Redirecionamento após o horário de funcionamento

O desvio fora do horário comercial é específico para o contact center ou a fila fora do horário de funcionamento. Para ativar o desvio fora do horário de expediente, faça o seguinte:

  1. No portal da plataforma CCAI, acesse Configurações > Chat > Redirecionamento da Web e de dispositivos móveis.

  2. Se a Deflexão fora do horário de expediente estiver desativada, selecione a opção Deflexão fora do horário de expediente para ativá-la.

  3. Mude a opção Permitir transferências para permitir transferências para filas fora do horário de funcionamento com 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 conectados

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

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

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

      • Todas as filas 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 excessiva é específico para a capacidade atual do agente e o tempo de espera atual da fila a que a sessão está atribuída. Para ativar essa opção, faça o seguinte:

  1. No portal da plataforma Contact Center AI, acesse Configurações > Chat > Redirecionamento para Web e dispositivos móveis.

  2. Se a Deflexão de excesso de capacidade estiver desativada, selecione o botão Deflexão de excesso de capacidade para ativar.

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

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

Opções de rejeição

É possível especificar as opções disponíveis para o usuário final quando a deflexão 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 inicia uma sessão de chat na Web ou em dispositivos móveis fora do horário de expediente, ele recebe uma solicitação para escrever um e-mail.

O comportamento específico é o seguinte:

  • Dispositivos móveis:com a redução de e-mails ativada e o tempo estimado de espera dentro do limite, quando o usuário final toca na opção "Chat", ele é direcionado para o app de e-mail padrão. A versão do app e 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 ser ativado. Para mais informações, consulte Formulário de e-mail integrado para SDKs para dispositivos móveis e Web.

  • 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 de dispositivos móveis e da Web.

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

As caixas de diálogo de consentimento de navegação conjunta permitem que um usuário final concorde 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. Ao configurar o SDK da Web para navegação conjunta, ele fornece caixas de diálogo de consentimento padrão e um botão de encerramento da sessão. No entanto, é possível adicionar campos opcionais ao objeto cobrowseOptions, que permitem personalizar as caixas de diálogo de consentimento e o botão de encerramento da sessão. Isso não só dá controle sobre a aparência desses elementos, mas também permite personalizar as declarações de consentimento nos diálogos 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 qual comportamento ele pode esperar da experiência de co-navegação e a que ele está consentindo. Se você pretende gravar uma sessão de navegação conjunta, informe 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 sua instância da plataforma CCAI, faça o seguinte:

    1. Faça login no portal da plataforma CCAI usando 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 da 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 têm botões que permitem ao usuário autorizar ou negar a solicitação de navegação conjunta ou fechar a caixa de diálogo. Para que esses botões se comuniquem com o SDK da Web, associe as seguintes classes de botões aos tipos 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 da 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 escolheu um idioma preferencial. Esse código está em conformidade com a ISO 639-1 e, se for omitido, será "en" por padrão.

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

Confira a seguir um exemplo de objeto de tradução que está personalizando uma cópia 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 oferecer suporte à personalização do logotipo e do í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 (aplicável apenas a 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 oferecer suporte à personalização do 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 primária 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 inicialização aceita quatro valores para o launcher.

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

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

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

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

      • --background-color: um valor de código hexadecimal usado como a cor de plano de fundo do iniciador, por exemplo, #E85230 --icon-color: um valor de código hexadecimal usado como a cor do ícone do iniciador, 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 da tela de início

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 selecionado pelo usuário final.

  • 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 selecionada pelo usuário final.

  • url:o URL da página da Web em que o usuário final estava quando fez uma seleção de canal ou enviou um e-mail.

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

  • has_attachments::indica se um e-mail tinha anexos quando foi enviado. Isso só aparece durante o envio de e-mails, não durante a seleção de canais.

Os dados da mensagem são armazenados em um objeto ujet com dois atributos: um chamado "action", que será uma string contendo 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 vai imprimir a ação e os dados no console está descrito na próxima seção. Um exemplo funcional pode ser encontrado 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}`);
  }
});

Como 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 "true" no novo UJET(opção):

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 gatilho de conversa proativa ou iniciar a conversa de forma programática. Para remover o ícone de inicialização, adicione o atributo de inicialização e defina como "true" 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

Você pode usar um acesso direto para enviar um usuário final diretamente a uma fila específica.

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

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

  2. Acesse Configurações > Fila.

  3. Verifique se o canal da Web está ativado alternando a opção usar.

  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.

Você pode 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 sozinha.

Essa etapa permite chamar a função de callback quando o consumidor quiser 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 dela.

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 adicional para abrir a interface da Web, assim:

<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);
});

Você também pode fechar o widget com o método ujet.close() e remover com o método ujet.destroy().

Gatilho proativo

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

Para configurar um gatilho proativo, siga estas etapas:

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

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

  3. Clique em Adicionar gatilho. O painel Escolher nome aparece.

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

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

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

    2. No campo Digite uma palavra-chave, insira uma palavra-chave que você quer que a condição se refira 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 depois no tipo de condição desejado.

    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 a que você quer atribuir o usuário final. Se uma fila de chat com esse nome existir, 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 do chat, digite a mensagem que você quer mostrar no chat acionado.

    5. Clique em Concluir.

    6. Para ativar o novo gatilho, clique em Entrar ao vivo.

IDs de tíquetes atuais

Se você tiver um tíquete de usuário final, recupere o ID do tíquete no CRM e transmita para o SDK da Web chamando ujet.start().

Exemplo:

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

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