Para usar o Guia em seu site, você pode simplesmente incorporar Guia em cada página do seu site onde você deseja oferecer engajamento.
No entanto, se você estiver familiarizado com desenvolvimento da Web e quiser personalizar a aparência e o comportamento do widget Guia, poderá fazer isso usando chamadas de API
APIs permitem automatizar certas funcionalidades conectando seu CXone sistema com outro software que sua organização usa. para o código JavaScript. Estes são os tipos de alterações que você pode fazer:
-
Aparência e comportamento dos widgets do Guide: Personalize a aparência e o comportamento do widget do Guide. Isso inclui alterar o tamanho do widget, alterar o tamanho dos botões, exibir o widget no modo de tela cheia e assim por diante.
-
Preferências de chat quando oferecido no widget do Guide: Personalize a aparência e o comportamento do chat quando oferecido no widget do Guide. Isso inclui alterar as informações na janela de chat, alterar a aparência da janela de chat, definir CSS personalizado e assim por diante.
-
Preferências de relatórios: Personalize como o Guide monitora engajamentos e conversões. Você pode usar essas APIs ao definir eventos personalizados, armazenar variáveis de visitantes, armazenar dados de conversão, atribuir e remover tags da web e assim por diante.
Entenda como o Guia funciona
O widget do Guia é um módulo da web que o CXone Loader carrega em seu site. O módulo web contém um aplicativo JavaScript criado usando a estrutura Svelte. O aplicativo usa armazenamentos de estado básicos que controlam a configuração do Guia, o modelo ativo, o status do chat ativo, o estado da IU e assim por diante. Os valores desses repositórios de estado orientam o que é exibido ao visitante.
Quando você incorpora o Guia em uma página do seu site e um visitante visualiza a página, o Guia busca a configuração específica do seu locatário. Esta solicitação retorna um resultado JSON com regras, botões, pontos de entrada, traduções, artigos referenciados e sinalizadores de recursos. Em seguida, ele usa o mecanismo de regras agrupadas para processar as regras e condições que podem ou não resultar na exibição de um modelo ou oferta proativa na página.
Para gerenciar os dados dos visitantes entre recarregamentos de página, o Guia usa armazenamento local e de sessão. Isso permite que o Guia forneça suporte entre domínios em navegadores compatíveis. Isso também significa que o Guia não usa cookies do navegador.
Configure as personalizações do Guide em um ambiente de teste antes de lançá-las em seu ambiente de produção. Isso ajudará a minimizar as interrupções para os visitantes do seu site. Isso também ajudará a garantir que suas personalizações funcionem conforme o esperado.
Adicionar chamadas de JavaScript
- Clique no seletor de aplicativo
e selecioneACD. -
Vá para Digital >Pontos de Contato Digital.
- Em Seus canais, clique em Script do site.
- Copie o código JavaScript da página e cole-o em seu código ou em um programa de edição de texto. Você não precisa incluir as tags <script> de abertura e fechamento.
-
Logo acima da tag </script> de fechamento do código colado, adicione as chamadas JavaScript a serem usadas. Na imagem de exemplo a seguir, o comentário indica onde adicionar chamadas.
As chamadas Guide JavaScript que você pode usar são descritas abaixo nesta página, bem como as APIs relacionadas a chat do Guide e as APIs relacionadas a relatórios do Guia.
-
Copie e cole todo o script, incluindo as tags <script> de abertura e fechamento, no cabeçalho de uma página do seu site.
-
Visite a página modificada e certifique-se de que as personalizações do Guide funcionem conforme o esperado.
-
Quando estiver totalmente testado e funcionando conforme o esperado, copie o script final no cabeçalho de cada página que deve ter essa personalização do Guide.
Personalizar o widget do Guide
Esta chamada permite ajustar a aparência e o comportamento do widget do Guide.
Ajustar o CSS
Altera os elementos CSS do widget do Guide. Por exemplo:
cxone('guide', 'setCustomCss', '[data-selector="GUIDE_ELEMENT"] {background: red !important;}');Para usar este snippet, substitua GUIDE_ELEMENT por um valor da tabela a seguir e substitua o CSS de exemplo entre colchetes { } pelo seu CSS personalizado:
|
Interface Guide |
Valores de GUIDE_ELEMENT |
|---|---|
| Widget e botões do Guide |
|
| Portais |
|
| Artigos |
|
|
Chats e e-mails |
|
|
Ofertas proativas |
|
Ajustar o tamanho do botão do canal
Define o tamanho a ser usado para botões de canal. Digite um valor em ems ou pixels. O tamanho padrão do botão é 3em.
cxone('guide', 'setButtonSize', '80px');Ajustar o deslocamento do botão do canal
Define o valor de deslocamento a ser usado para botões de canal. Digite um valor em ems ou pixels.
cxone('guide', 'setOffsetX', '48px');cxone('guide', 'setOffsetY', '3em');Abrir o menu Guide
Mostra o menu de botões do Guide.
cxone('guide', 'openMenu');Fechar o menu Guide
Fecha o menu de botões do Guide.
cxone('guide', 'closeMenu');Alterar tamanho da fonte
Define o tamanho da fonte padrão usado no widget Guide. Insira um valor em pixels. O tamanho da fonte padrão é 13 pixels. O valor definido aqui determina o tamanho em usado em todo o Guide.
cxone('guide','setFontSize',12);Alterar altura do widget Guide
Define a altura do widget Guide. Digite um valor em ems ou pixels. A altura padrão é 40em. A altura máxima é 40 rem.
cxone('guide','setDesiredGuideHeight','30em');Alterar largura do widget Guide
Define a largura do widget Guide. Digite um valor em ems ou pixels. A largura padrão é 23.125em.
cxone('guide','setDesiredGuideWidth','608px');Exibir o Guide no modo de tela cheia
Você pode exibir o Guide no modo de tela cheia. O conteúdo do Guide aparece em uma janela em vez do widget Guide.
cxone('guide','setFullDisplay');Uma prática recomendada no modo de tela cheia é ocultar o botão minimizar. Para fazer isso, use os seguintes comandos:
cxone('guide','setFullDisplay');cxone('guide', 'setCustomCss', '[data-selector="GUIDE_CHANNEL_CLOSE_BUTTON"] {display: none !important;}');Omitir a pesquisa pré-contato de chat na web
Use esta API para instruir o Guide para iniciar um chat sem exibir a pesquisa pré-contato na web.
cxone('guide','hidePreSurvey');Use as APIs de chat para predefinir os valores da pesquisa pré-contato na web. Alternativamente, você pode especificá-los como parâmetros para a API hidePreSurvey. Por exemplo:
cxone('guide','hidePreSurvey', 'Dre', 'dre@classics.com');Exibir um ponto de entrada diretamente
Use esta API para exibir manualmente um ponto de entrada em uma janela. O botão padrão para o ponto de entrada é usado.
Esta API é fornecida para casos específicos em que alguém pode precisar mostrar manualmente um ponto de entrada em uma janela. Geralmente não é recomendado e não deve ser usado em combinação com regras de engajamento do Guide.
Para usar esta API, você deve passar o ID do ponto de entrada a ser exibido. Você pode obter o ID do ponto de entrada clicando em Editar ao lado do ponto de entrada e copiando a última parte do URL da página.
cxone('guide','openEntrypoint','e1348160-2016-4d91-958e-fd063c669fe6');