Recursos compatíveis

O SDK da Web foi projetado para funcionar em todos os navegadores modernos para computadores e dispositivos móveis, mas oferecemos suporte oficial à versão mais recente dos seguintes navegadores:

  • Computador:

    • Chrome

    • Safari

    • Edge

  • Android:

    • Chrome

    • Edge

  • iOS:

    • Chrome

    • Safari

    • Edge

Acionadores proativos

Com os gatilhos proativos, é possível iniciar o SDK da Web e enviar uma mensagem aos consumidores de forma proativa. Você pode configurar acionadores de chat proativo na Contact Center AI Platform acessando Configurações > Chat > Acionadores de chat proativo na Web.

Para mais informações, consulte Gatilhos proativos do SDK da Web. O widget de acionadores com opções para adicionar um novo ou usar um existente.

Acompanhar os usuários

Se você quiser identificar usuários recorrentes no seu CRM ou usar respostas predefinidas com as informações dos usuários, adicione identifiers a eles. Para usar respostas automáticas, é necessário ter um CRM.

A autenticação (atualização do identificador) pode ser feita no início ou no meio de uma sessão. Para mais informações sobre a autenticação no meio da sessão, consulte Autenticação no meio da sessão por API.

Identificador

Ao iniciar uma chamada ou um chat, nosso sistema usa um identificador para autenticação do usuário. É possível especificar seu valor preferido para o campo de identificador durante a configuração. Se você já tiver um GUID (identificador globalmente exclusivo) para seus usuários, poderá usá-lo para identificação. No entanto, se o identificador de um usuário for enumerável ou contiver informações de identificação pessoal (PII), gere um hash para aumentar a segurança.

Os identificadores precisam ser adicionados 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: '18008675309'
      }
    })
  }).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(`Listening 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 para o agente preenchendo o campo external_chat_transfer com os dados personalizados. O greeting_override é compatível com a formatação Markdown.

ccaas.config({
  customData: {
    "external_chat_transfer": {
      "greeting_override": "YOUR GREETING MESSAGE."
    }
  }
"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": "text",
            "text": "Check Order Status"
          }
        ]
      },
      {
        "sender": "agent",
        "timestamp": "2021-03-15 12:00:16Z",
        "content": [
          {
            "type": "text",
            "text": "I can help you with that, what's your order number?"
          }
        ]
      },
      {
        "sender": "end_user",
        "timestamp": "2021-03-15 12:00:20Z",
        "content": [
          {
            "type": "media",
            "media": {
              "type": "image",
              "url": "https://ujet.s3.amazonaws.com/default-virtual-agent-avatar-1.png"
            }
          }
        ]
      }
    ]
  }
}

Nome da empresa

Escolha um name personalizado em vez do nome da API da empresa.

ccaas.config({
  name: 'ACME',
})

Redução de chats

Quando os agentes estão indisponíveis, é possível especificar opções para lidar automaticamente com a situação usando desvios.

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

A janela para configurar as deflexões na Web e em dispositivos móveis e especificar quando elas serão usadas.

Pontos de acesso direto (DAP)

Você pode direcionar um usuário diretamente para uma fila específica na estrutura usando pontos de acesso direto.

Para usar um ponto de acesso direto, primeiro crie um no portal.

  1. No portal da plataforma CCAI, clique em Configurações > Fila. Se o menu Configurações não aparecer, clique em Menu.

  2. Ative a opção Usar no menu da Web e acesse EDITAR / VER.

  3. Selecione qualquer fila na estrutura.

    A lista de filas e as opções de níveis de suporte.

  4. Clique em Criar ponto de acesso direto.

  5. Tipo de ponto de acesso = Geral.

    Crie um ponto de acesso direto e especifique o tipo de ponto de acesso a ser criado.

  6. Adicione dados de entrada para o ponto de acesso direto na caixa de diálogo. O campo General Access Point Label corresponde ao MenuKey mencionado na próxima etapa.

  7. Clique em CRIAR.

Depois de configurar usando o portal, você pode direcionar um usuário para uma fila específica usando MenuKey:

ccaas.config({
  menuKey: 'vip'
})

ID do tíquete

Se você tiver um tíquete para um consumidor, recupere o ID dele no CRM e transmita-o para o SDK da Web:

retrieveTicket().then(ticket => {
  ccaas.config({ ticketId: ticket.id })
})

Seleção automática de canais

Com preferredChannel, é possível selecionar automaticamente um canal quando um consumidor seleciona uma fila específica:

ccaas.config({
  preferredChannel: 'chat'
})

Desativar anexos

Por padrão, o SDK da Web permite que os consumidores façam upload de fotos e vídeos durante uma sessão de chat. É possível desativar usando o seguinte script:

ccaas.config({
  disableAttachment: false
})

Como transmitir dados personalizados

Quando um chat é iniciado, dados personalizados podem ser enviados com o objeto de chat. Os dados personalizados podem ser qualquer coisa, como SO, versão, local ou outros dados relevantes para a conversa.

É possível adicionar dados personalizados não assinados usando a configuração customData.

O formato de dados personalizado é semelhante a um objeto JSON e consiste em key, label e value.

ccaas.config({
  customData: {
    k1: {
      label: 'Version',
      value: '1.1.0'
    },
    k2: {
      label: 'Platform',
      value: navigator.platform
    }
  }
})

Key: um identificador exclusivo para dados. No exemplo anterior, k1 e k2 são chaves.

Label: o nome de exibição na página do CRM.

Value: o valor do rótulo.

É possível adicionar dados personalizados assinados usando a configuração signedCustomData:

ccaas.config({
  signedCustomData: "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.n...."
})

O signedCustomData é uma string JWT com o algoritmo HS256.

SIGN_JWT(
  algorithm='HS256',
  secret=YOUR_COMPANY_SECRET,
  payload={
    custom_data: {
      version: {
        label: 'Version',
        value: '1.0.0'
      },
      ...
    },
    iss: 'YOUR TENANT',
    iat: NOW,
    exp: NOW + 3600,
  }
)

Compatibilidade com vários idiomas

O campo lang pode ser usado para controlar o idioma padrão no lançamento e oferecer suporte a vários idiomas. Se omitido, o padrão é inglês (en). O idioma padrão pode ser configurado por página do seu site. Se outros idiomas estiverem disponíveis no seu locatário, o consumidor poderá mudar para outro.

client.getMenus(key?: string, lang?: string)

O método .getMenus aceita um parâmetro lang opcional. Quando esse parâmetro não é transmitido para .getMenus, o método usa a opção de idioma padrão.

Exemplo:

const client = new Client({
  // ...
  lang: 'ja',
})

Essa opção pode ser acessada usando a seguinte propriedade:

console.log(client.lang)

Os seguintes idiomas são aceitos e usam as abreviações indicadas na tabela abaixo:

Idioma Abreviação
Inglês en
Inglês (Canadá) en-CA
Inglês (Reino Unido) en-GB
Inglês (Austrália) en-AU
Inglês (Índia) en-IN
Espanhol (Espanha) es
Espanhol (México) es-MX
Francês (Canadá) fr-CA
Alemão de
Japonês ja
Coreano ko
Italiano para recebê-los.
Chinês (simplificado) zh
Chinês (tradicional) zh-Hant
Sueco sv
Português pt
Português (Brasil) pt-BR
Finlandês fi
Norueguês nb
Dinamarquês da
Holandês nl
Turco tr
Vietnamita vi
Tailandês th
Árabe ar
Tcheco cs
Polonês pl
Húngaro hu
Russo ru
Hindi oi
Romeno ro
Croata h
Ucraniano uk
Tagalo tl

Para mais informações sobre traduções, consulte a seção Personalizar mensagens e traduções.

Como iniciar a UI da Web de forma programática

Essa etapa permite abrir a interface da Web de maneira programática com o método ccaas.start(options).

Em alguns casos, talvez você queira que o consumidor clique em um botão adicional para abrir a interface do SDK da Web.

Exemplo:

<button id="launcher">Click to open</button>

var ccass = new UJET({
  companyId: "YOUR_COMPANY_ID",
  host: "HOST_URL",
  authenticate: getAuthToken,
});

ccass.config({disableLauncher: true})

var launcher = document.getElementById('launcher');
launcher.addEventListener('click', function() {
  if (ccass.visible) {
    ccaas.hide();
    launcher.textContent = 'Click to open';
  } else {
    ccaas.show();
    launcher.textContent = 'Click to close';
  }
});

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

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

Como fechar a UI da Web de maneira programática

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

ccass.on('visible', function(visible) {console.log(visible) })

Receber informações sobre sessões de chat ativas

Você pode receber informações sobre sessões de chat ativas, incluindo o ID do chat.

Veja o exemplo a seguir:

ccass.getOngoingChat()

Se houver uma sessão de chat ativa, isso vai retornar os metadados do chat. Se não houver sessões de chat ativas, isso vai retornar null.

Você pode usar isso para impedir que os consumidores abram várias sessões de chat ocultando condicionalmente o SDK se houver um chat ativo em andamento.

Acompanhar o status de abertura ou fechamento entre várias guias ou janelas

É possível sincronizar o status aberto ou fechado do SDK entre várias guias ou janelas do seu site. Use o snippet de código para rastrear o estado do SDK no armazenamento local:

ccass.on('visible', (isVisible) => {
 localStorage['ujetOpen'] = isVisible ? 'yes' : 'no'
})
if (localStorage['ujetOpen'] == 'yes') {
 ccass.show()
} else {
 ccass.hide()
}

modelo

É possível personalizar o modelo de caixa de diálogo de compartilhamento de tela com essa opção. O padrão template é:

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

Este template é usado para:

  • Caixa de diálogo de confirmação da sessão

  • caixa de diálogo de confirmação do controle remoto

  • confirmar caixa de diálogo de dispositivo completo

Os parâmetros no modelo serão substituídos pelo conteúdo na opção messages.

confirmSessionTemplate

Essa opção é usada para personalizar a caixa de diálogo de confirmação da sessão.

confirmRemoteControlTemplate

Essa opção é usada para personalizar a caixa de diálogo de confirmação do controle remoto.

confirmFullDeviceTemplate

Essa opção é usada para personalizar a caixa de diálogo "Confirmar dispositivo completo".

sessionControlsTemplate

Essa opção é usada para personalizar o botão de controles da sessão. O modelo padrão é:

<button class="cobrowse-end js-cobrowse-end">$end</button>

Mensagens

Os modelos anteriores contêm as seguintes variáveis de mensagem:

  • $title

  • $content

  • $allow

  • $deny

Essas variáveis serão substituídas por:

{
  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
}

Temos mensagens de compartilhamento de tela integradas, por exemplo, as mensagens para a localidade en:

{
  "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"
}