Configurar Interface de Chat do Cliente

Customer chat interface deve ser ativado pelo seu gerente de conta antes de você começar a usá-lo. Este cliente de chat é apenas um elemento do canal de chat. A configuração do chat para o seu centro de contato é um processo com várias etapas.

Essas tarefas são necessárias apenas se você deseja implantar uma experiência de chat personalizada. Escolha se você deseja usar um perfil V1 ou V2. Você não precisa dos dois.

Crie um perfil de chat

Você pode criar vários perfis de chat para uma experiência extra-personalizada, no entanto, você só precisa criar um para configurar o customer chat interface. Decida se deseja usar um perfil de chat V1 ou V2 e siga a tarefa de correlação abaixo.

Criar perfil de chat V1

  1. Clique no seletor de aplicativos e selecione ACD.
  2. Vá para Configurações de contato > Perfis de chat.
  3. Localize o perfil de chat que você deseja modificar e clique nela para abri-lo.
  4. Clique em Editar.
  5. Introduzir o Nome do perfil.
  6. Para Interface, selecione V1 ASPX do menu suspenso. Depois de salvar um perfil, você não poderá mais editar este campo.
  7. Configure o Esquema de cores.
  8. Defina as configurações de estilo para a janela de chat, usando a área Pré-visualização para visualizar suas atualizações.
  9. Defina as configurações para as caixas de diálogo de chat, usando a área Pré-visualização para visualizar suas atualizações. Você pode alterar a cor do plano de fundo e a cor da fonte das caixas de diálogo de agente e contato, mas apenas a cor da fonte das mensagens do sistema. As mensagens do sistema são normalmente impulsionadas por ações Studio como Quemsg e aparecem na interface de chat sem contêiner.
  10. Defina as configurações para os indicadores e mensagens de status do chat, usando o Pré-visualização área para visualizar suas atualizações.
  11. Clique em Feito.

Crie um perfil de chat V2

  1. Clique no seletor de aplicativos e selecione ACD.
  2. Vá para Configurações de contato > Perfis de chat.
  3. Para criar um perfil, clique em Criar Novo.
  4. Inserir um Nome do Perfil.
  5. Para Interface, selecione V2 (HTML5). Depois de salvar um perfil, você não poderá mais editar este campo.
  6. Configure os campos Aparência, conforme necessário, usando a janela Visualizar para visualizar suas atualizações.
  7. Se desejar, habilite e configure um formulário pré-chat.
    1. Marque a caixa de seleção Habilitar formulário de pré-chat.
    2. Modifique a mensagem de boas-vindas, conforme necessário.
    3. Configure os campos conforme necessário, selecionando Adicionar campo.

    Os conteúdos enviados usando este formulário são passados para a ação Begin do seu script de roteamento como parâmetros a partir da entradaP0.

  8. Se desejar, ative e configure a janela Fila em espera.
    1. Selecione a caixa de seleção Habilitar Fila de espera.
    2. Introduzir um Mensagem em espera. Se o Studio associado a esse perfil usa a ação Quemsg para permitir que os clientes saibam seu lugar na fila; essa mensagem alterna com a mensagem que você configura aqui.
    3. Se desejar, altere a cor do plano de fundo e o tom do texto.
    4. Se desejar, adicione um logotipo selecionando o Logotipo marque a caixa de seleção e siga um destes procedimentos:

      • Se você já enviou o logotipo para CXone para outra finalidade, selecione Selecione Existente. Clique em Procurar e localize a imagem na janela Selecionar arquivo. Clique na imagem para selecioná-la. Clique em OK.
      • Se você deseja fazer upload de um novo logotipo, selecione Carregar novo. Clique em Escolher Arquivo e localize a imagem que você deseja carregar. Clique na imagem para selecioná-la. Clique em Abrir.

    5. Se desejar, adicione uma imagem maior selecionando o Imagem do herói marque a caixa de seleção e siga um destes procedimentos:

      • Se você já enviou a imagem para CXone para outra finalidade, selecione Selecione Existente. Clique em Procurar e localize a imagem na janela Selecionar arquivo. Clique na imagem para selecioná-la. Clique em OK.
      • Se você deseja enviar uma nova imagem, selecione Carregar nova. Clique em Escolher Arquivo e localize a imagem que você deseja carregar. Clique na imagem para selecioná-la. Clique em Abrir.

    Você deve dimensionar seu logotipo ou imagem antes de enviá-lo para CXone. Caso contrário, a imagem do logotipo ou herói será esticada para caber no tamanho máximo especificado. Os logotipos e as imagens devem ser do tipo SVG ou PNG.

  9. Se você estiver criando um perfil, clique em Salvar.

Adicionar pontos de contato a um perfil de chat

  1. Clique no seletor de aplicativos e selecione ACD.
  2. Vá para Configurações de contato > Perfis de chat.
  3. Localize o perfil de chat que você deseja atribuir aos pontos de contato e clique nele para abri-lo.
  4. Clique na guia Pontos de Contato.
  5. Na tabela Adicionar pontos de contato, marque as caixas de seleção correspondentes aos pontos de contato aos quais você deseja atribuir o perfil de chat. Se você deseja atribuir esse perfil a todos os pontos de contato, pule esta etapa.
  6. Clique em Adicionar Pontos de Contato. Para atribuir o perfil de chat a todos os pontos de contato ativos, clique em Adicionar tudo.

Incorporar e personalizar o chat ao vivo V2 (HTML5) em uma página da web

  1. Clique no seletor de aplicativos e selecione ACD.
  2. Vá para Configurações de contato > Ponto de contato.
  3. Selecione um ponto de contato existente ou crie um novo.
  4. Copie o código localizado na parte inferior da página.
  5. Cole o texto copiado no final da seção <body> da sua página web.
  6. Se você deseja substituir o ícone de chat ao vivo padrão que aparece no seu site, adicione o seguinte ao script que você colou no seu site:

    1. Adicione o seguinte ao script, logo abaixo da linha <script type ="text/javascript">:

      function showBadge( i) { var divBadge = document.getElementById("divBadge"); if(i>0) { divBadge.innerHTML=i; divBadge.style.display="block"; divBadge.classList.add('badge2'); } else if(i==0 && divBadge) { divBadge.style.display="none";} }

    2. Adicione a classe .badge2 ao CSS do seu site e estilize os efeitos do crachá no botão de bate-papo ao vivo personalizado como você quer.

    3. Adicione o seguinte código realçado ao bloco de código icPatronChat.init:

      icPatronChat.init( { serverHost:'http://home-b2.incontact.com', bus_no:50, poc:'c7744b03-fe43-437f-a464-aec52e56f683', params:['FirstName','Last Name','first.last@company.com',555-555-5555], customChatButton: true }, showBadge); 
      

      params é uma matriz de strings que passam para o script Studio em tempo de execução. Ele pode enviar no máximo 10 parâmetros de consulta personalizados, incluindo campos de formulário pré-chat.

    4. Adicione o botão personalizado com HTML, logo após a tag </script>. O link deve incluir onclick="icPatronChat.setStateWindowToggle()". Veja o seguinte exemplo:

      <a class="button2" onclick="icPatronChat.setStateWindowToggle()"> <span> Chat ao vivo </span> <div id = "divBadge" class = "badge2"> </div> </a>

    5. Salve a página da web e teste-a. Faça as alterações necessárias.
  7. Se você deseja personalizar o tamanho e a posição da janela de chat ao vivo no seu site quando um contato a abrir, faça o seguinte no script que você colou no seu site:

    1. Acima da linha icPatronChat.init, adicione o seguinte bloco de código:

      var Dimensions = {topo: 20, esquerda: 200, altura: 50, largura: 600};

    2. Defina as configurações top e left para o número de pixels do lado superior e esquerdo da janela do navegador que você deseja que o canto superior esquerdo da janela de chat seja posicionado em seu site.
    3. Defina as configurações height e width para o número de pixels de altura e largura que você deseja que a janela tenha quando um contato a abrir.
    4. Adicione a seguinte linha logo acima do tag </script>.

      icPatronChat.setDimension (dimensiones);

    5. Salve a página da web e teste-a. Faça as alterações necessárias.

Adicione um janela pop-out Customer chat interface para uma página da web

Essas instruções funcionam para perfis de chat V1 (ASPX) e V2 (HTML5).

  1. Clique no seletor de aplicativos e selecione ACD.
  2. Vá para Configurações de contato > Perfis de chat.
  3. Selecione um ponto de contato existente ou crie um novo.
  4. Copie o URL do ponto de contato.
  5. Adicione essas linhas de código ao final da seção <body> da sua página da web. Substitua o texto destacado pelo seu URL.

    <script type = "text / javascript"> var pop-upPatronChat = function () {var url = "https://home-c4.incontact.com/inContact/ChatClient/ChatClient.aspx?poc=815f0de7-f189-4f6a-b272-4ffbcf80c0b&& bu = 50 & P1 = Nome & P2 = Sobrenome&P3=first.last@company.com&P4=555-555-5555; window.open (url, 'icPatronChatWin', 'local = não, altura = 630, barra de menu = não, sem status, largura = 410', verdadeiro); }; </script>

    Os parâmetros após o URL são uma matriz de cadeias que passam para o Studio script em tempo de execução. Você pode incluir até 10.