Configurar Interface de Chat do Cliente

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 interface de chat do cliente. Decida se deseja usar um perfil de chat V1 ou V2 e siga a tarefa de correlação abaixo.

Criar perfil de chat V1

Permissões necessárias: Criar perfis de chat

1. Clique no seletor de aplicativo e selecioneACD.
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.
   Saiba mais sobre os esquemas de cores

   Campo	Detalhes
   Esquema de cores	O esquema de cores do sistema em uso. Você pode usar um dos seguintes modelos como está ou modificá-lo para atender às necessidades da sua empresa. Padrão - cinza com azul e branco. Esquema de cores 1 - Azul com branco. Esquema de cores 2 - Laranja com amarelo e branco. Esquema de cores 3 - Vermelho com cinza e branco.

8. Defina as configurações de estilo para a janela de bate-papo, usando o Pré-visualização área para visualizar suas atualizações.
   Saiba mais sobre a imagem do logotipo

   Campo	Detalhes
   Imagem do logotipo	Você não pode adicionar um logotipo a um perfil de bate-papo existente. Se você criar um perfil de chat sem um logotipo e mais tarde decidir incluir um logotipo na interface de chat do cliente, deverá criar um novo perfil de chat e atribuí-lo ao ponto de contato apropriado.

9. Defina as configurações para as caixas de diálogo de bate-papo, usando o Pré-visualização área 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 bate-papo, usando o Pré-visualização área para visualizar suas atualizações.
11. Clique em Feito.

Crie um perfil de bate-papo V2

Permissões necessárias: Criar perfis de chat

1. Clique no seletor de aplicativo e selecioneACD.
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.
   Ver imagem

   
7. Se desejar, habilite e configure um formulário pré-chat.
   Exibir imagem

   
   1. Marque a caixa de seleção Habilitar formulário de pré-bate-papo.
   2. Modifique a mensagem de boas-vindas, conforme necessário.
   3. Configure os campos conforme necessário, selecionando Adicionar campo.

   O conteúdo enviado usando este formulário é passado para a ação Begin do seu script de roteamento como parâmetros a partir da entrada P0.

8. Se desejar, ative e configure a janela Fila em espera.
   Exibir imagem

   
   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 CXoneCaso contrário, a imagem do logotipo ou herói será esticada para caber no tamanho máximo especificado. Este arquivo deve estar no formato SVG ou PNG.

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

Adicionar pontos de contato a um perfil de chat

Permissões necessárias: Editar perfis de chat

1. Clique no seletor de aplicativo e selecioneACD.
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 aplicativo e selecioneACD.
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 do <body> seção da sua página da web.

6. Se você deseja substituir o ícone de bate-papo ao vivo padrão que aparece no seu site, adicione o seguinte ao script que você colou no seu site:

   Exibir o ícone padrão de bate-papo ao vivo

   

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

      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 o .badge2 classifique no CSS do seu site e estilize os efeitos do selo no botão de bate-papo ao vivo personalizado, como você desejar.

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

      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 Studio script em tempo de execução. Ele pode enviar no máximo 10 parâmetros de consulta personalizados, incluindo campos de formulário pré-bate-papo.

   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>Live Chat</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 bate-papo ao vivo no seu site quando um contato a abrir, faça o seguinte no script que você colou no seu site:

   Exibir o tamanho padrão da janela de bate-papo ao vivo

   

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

      var dimensions = {top:20,left:200,height:50,width: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 bate-papo 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 </script> tag.

      icPatronChat.setDimension(dimensions);

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

Adicione um janela pop-out Interface de chat do cliente para uma página da web

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

1. Clique no seletor de aplicativo e selecioneACD.
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 popupPatronChat = function() { var url = "https://home-c4.incontact.com/inContact/ChatClient/ChatClient.aspx?poc=815f0de7-f189-4f6a-b272-4ffbcf80c0b&&bu=50&P1=First Name&P2=Last Name&P3=first.last@company.com&P4=555-555-5555; window.open(url, 'icPatronChatWin', 'location=no,height=630,menubar=no,status-no,width=410', true); }; </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.