Personalizar Guide usando JavaScript

Para usar o Guide em seu site, você pode simplesmente incorporar Guide 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 Guide, poderá fazer isso usando chamadas de API Interface de programação de aplicativos. Permite automatizar determinadas funcionalidades conectando seu sistema CXone Mpower com outro software. 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 Guide funciona

O widget Guide é um módulo web que CXone Mpower carregador 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 Guide, 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 Guide em uma página do seu site e um visitante visualiza a página, o Guide 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 Guide usa armazenamento local e de sessão. Isso permite que o Guide forneça suporte entre domínios em navegadores compatíveis. Isso também significa que o Guide não usa cookies do navegador.

Adicionar chamadas de JavaScript

1. Clique no seletor de aplicativo e selecioneGuide.

2. Clique em Integrations. Uma página aparece com o código JavaScript específico do seu locatário.

3. Clique em Copy code with Guide para copiar o código.
4. Cole o snippet de código copiado em seu código ou em um programa de edição de texto.

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

   

   Para obter detalhes completos sobre as chamadas que você pode usar, consulte Guide APIs relacionadas a widgets, APIs relacionadas a chat e APIs relacionadas a relatórios.

6. Copie e cole todo o script, incluindo as tags <script> de abertura e fechamento, no cabeçalho de uma página do seu site.

7. Visite a página modificada e certifique-se de que as personalizações do Guide funcionem conforme o esperado.

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

Definir o idioma ser usado para o Guide

Para substituir configurações de idioma do navegador e forçar os visitantes do Guide a ver o conteúdo em um idioma específico, modifique o script incorporado. Adicione o parâmetro locale ao comando cxone('guide','init'); no final do script e especifique o idioma desejado. Por exemplo, você pode definir para Francês da seguinte forma:

cxone('init','####'); 
cxone('guide','init', {locale: 'fr-fr'});

Substitua #### pelo seu ID de locatário de quatro dígitos.

Observe que o conteúdo que você escreve em uma oferta proativa ainda aparece no idioma em que foi escrito. Isso pressupõe que você configurou as strings de tradução do Guide para o francês.