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 APIFechado Interface de programação de aplicativo. Permite automatizar certas funcionalidades conectando seu sistema CXone Mpower a 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 funciona Guide

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.

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 JavaScript

  1. Clique no seletor de aplicativo ícone do seletor de aplicativos 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.

    Um exemplo de script que mostra onde adicionar chamadas JavaScript

    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.

Defina o idioma a ser usado para 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: 'ja', templateId:'xxxxxxx'});

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

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.

Desativar o cache de formulários pré-chat

Por padrão, o widget Guide armazena em cache os dados inseridos nos formulários de contato pré-chat e pré-e-mail no navegador do usuário. Isso permite que as informações persistam em recarregamentos de página ou sessões subsequentes.

No entanto, em alguns ambientes, especialmente aqueles com requisitos de conformidade, privacidade ou segurança, esse comportamento pode não ser desejável. Você pode desativar esse comportamento usando o sinalizador de configuração disableFormCaching ao inicializar o widget do Guide.

Quando disableFormCaching não está definido ou está definido como false (padrão):

  • Os dados do formulário pré-chat são armazenados em cache no navegador.

  • Os valores inseridos anteriormente podem aparecer automaticamente quando o widget é recarregado ou uma nova sessão começa

cxone('guide', 'init', { locale: 'en-US', disableFormCaching: false});

Quando disableFormCaching é definido como true e se a página é atualizada, o widget é recarregado ou o usuário inicia uma nova sessão:

  • Os campos do formulário pré-chat estão vazios.

  • Os valores inseridos anteriormente não são restaurados.

Como resultado, os usuários devem inserir novamente suas informações pré-chat para cada nova interação.