Configurar a interface do Guide

O Guide usa a marca padrão e os botões de canais definidos por você para determinar a aparência do widget Guide no seu site.

Melhores Práticas

• Trabalhe com seu departamento de marketing para selecionar imagens de botões de canais e cores da marca que complementem seu site.

• Use botões de canais e marcas consistentes em um site.

• Se você tiver vários sites, determine se precisa definir uma marca exclusiva para cada site.

• Para usar a cor da marca padrão, não defina a Theme color ao definir botões ou modelos.

• Para substituir a cor da marca padrão, você pode definir cores diferentes em um botão ou modelo específico. Note o seguinte:

  • Se você definir uma Theme color para um modelo, essa cor substitui a configuração da cor da marca.

  • Se você definir uma Theme color para um modelo e uma Theme color para um botão, a cor do botão substituirá as configurações de cor do modelo e da marca.

• Para uma estilização personalizada avançada, você pode usar as GuideAPIs do ou trabalhe com o seu Representante de contas para criar uma aparência personalizada.

Criar marca

A identidade de marca define as cores a serem usadas por padrão nos modelos, nos botões e nas ofertas proativas. O Guide proporciona a Default identidade de marca que pode ser personalizada conforme necessário. Se necessário, você pode criar várias marcas. Por exemplo, se você planeja oferecer modelos do Guide em sites diferentes, pode usar marcas exclusivas para cada site. Ao definir a regra para exibir um modelo ou uma oferta proativa, use a ação Set Guide Branding para determinar a identidade de marca a ser usada.

1. Clique no seletor de aplicativo e selecioneGuide.

2. Clique em Branding.

3. Clique em New Branding.

4. Digite um nome de marca exclusivo correspondente a Branding Title.

5. Configure a cor primária a ser utilizada em Theme Color para o widget Guide. Configure a cor digitando um valor hexadecimal ou clicando no conta-gotas de cores, para selecionar uma cor.

   O Theme Color é usado para:

   • A cor de fundo do cabeçalho.

   • O botão Minimizar.
   • O fundo do botão Canal.

   Ele será utilizado exceto se:

   • O botão Canal estabelecer a cor do tema que se sobreponha à cor da identidade da marca.

   • Um modelo configurar a cor do tema que se sobreponha à cor da identidade da marca.

   • É possível ajustar outras preferências de identidade de marca, além das configurações primárias. Por exemplo: no ajuste da cor de um botão de ofertas proativas.

6. Configure a cor a ser utilizada em texto do Font Color que for exibido no widget Guide. A cor é utilizada em texto do cabeçalho e na seta que é exibida nos botões Minimizar e Voltar.

   Para auxiliar os deficientes visuais, mantenha o contraste na proporção de 4,5:1 entre o Theme Color e o Font Color. Há ferramentas on-line disponíveis para verificar o contraste.

7. Opcionalmente, refine ainda mais a identidade de marca, utilizando as guias General, Guide Template, Knowledge Base e Proactive Offer.

   Saiba mais sobre oGeneralguia

   campo	Detalhes
   Width (EM)	A largura do widget Guide em ems. A largura padrão é 23.125 ems.
   Height (EM)	A altura do widget Guide em ems. A altura padrão é 40 ems.
   Close Button Icon Color	A cor a ser utilizada no ícone de fechamento do widget.
   Close Button Background Color	A cor de fundo a ser utilizada no ícone de fechamento do widget.

   Saiba mais sobre oGuide Templateguia

   campo	Detalhes
   Background Color	A cor de fundo a ser utilizada nos modelos de portal do cliente.
   Font and Icon Color	As cores da fonte e do ícone a serem utilizadas nos modelos de portal do cliente.
   Heading Font Size (EM)	O tamanho do título, em ems, a ser usado para modelos de portal do cliente. Para obter resultados ideais, selecione um modelo de portal do cliente a ser visualizado e, em seguida, ajuste o tamanho da fonte do cabeçalho, se necessário.
   Subheading Font Size (EM)	O tamanho da fonte do subtítulo, em ems, a ser usado para modelos de portal do cliente. Para obter resultados ideais, selecione um modelo de portal do cliente a ser visualizado e, em seguida, ajuste o tamanho da fonte do subcabeçalho, se necessário.

   Saiba mais sobre oKnowledge Baseguia

   campo	Detalhes
   Background Color	A cor de fundo a ser utilizada ao se exibir artigos da base de conhecimento.
   Font and Icon Color	As cores da fonte e do ícone a serem utilizadas ao se exibir artigos da base de conhecimento.

   Saiba mais sobre oProactive Offerguia

   campo	Detalhes
   Heading Font Size (EM)	O tamanho da fonte, em ems, a ser usado para um título de oferta proativa. Para obter resultados ideais, examine a imagem de visualização da oferta proativa e, em seguida, ajuste o tamanho da fonte do cabeçalho, se necessário.
   Body Text Font Size (EM)	O tamanho da fonte, em ems, a ser usado para o corpo do texto em uma oferta proativa. Para obter resultados ideais, examine a imagem de visualização da oferta proativa e, em seguida, ajuste o tamanho da fonte do corpo, se necessário.
   Header Color	A cor a ser utilizada na área do cabeçalho da oferta proativa.
   Background Color	A cor a ser utilizada no fundo da oferta proativa.
   Font Color	A cor da fonte a ser utilizada na oferta proativa. Ela inclui o texto do cabeçalho e do corpo.
   Primary Button Background and Font Color	As cores de fundo e da fonte correspondentes ao botão primário de chamada de ação nas ofertas proativas.
   Secondary Button Background and Font Color	As cores de fundo e da fonte correspondentes aos botões secundários de ofertas proativas.
   Position on Mobile	Se a oferta proativa deverá ser exibida no Top ou Bottom da tela de um dispositivo móvel.

8. Visualize as configurações de identidade de marca, selecionando um modelo na lista suspensa situada no lado direito da página. Como alternativa, para visualizar a identidade de marca das ofertas proativas, clique na guia Proactive Offer. Caso você personalize estas configurações, será exibida uma visualização à direita.

9. Clique em Default para tornar esta a identidade de marca padrão. Quando você define uma marca como padrão, ela é aplicada a todos os modelos novos e existentes.

10. Clique em Save.

Trabalhando com Ems

Guide usa o EMS para especificar o tamanho dos elementos da interface. Os Ems permitem o dimensionamento responsivo de elementos de interface em diferentes dispositivos. O tamanho padrão de um em no Guide é 13 pixels. Você pode alterar isso usando o API setFontSize.

Criar botões de canais

Crie um botão para cada canal Uma maneira de os contatos interagirem com agentes ou bots. Um canal pode ser voz, e-mail, chat, mídia social e assim por diante. que você planeja oferecer no Guide. Depois que os botões forem criados, associe-os aos pontos de entrada. Você pode substituir o botão ao definir um modelo configurando um botão diferente para o ponto de entrada.

1. Clique no seletor de aplicativo e selecioneGuide.

2. Clique em Buttons. A página Botões é exibida e lista todos os botões criados anteriormente.

   Ver imagem

   

3. Clique em New Button.

4. Insira um Title para o botão.

5. Clique em Upload para carregar o Icon do botão.

   As imagens dos ícones devem ter menos de 50 KB, e recomendam-se arquivos SVG.

6. Defina uma preferência Background para o botão.

   • Selecione Solid para usar uma cor de plano de fundo para o botão de canal. Deixe o campo Theme color em branco para usar a cor de fundo padrão do botão de canal definida para a marca. Ou use o seletor de cores para selecionar uma cor diferente a ser usada como cor de plano de fundo para o botão. Configure a cor digitando um valor hexadecimal ou clicando no conta-gotas de cores, para selecionar uma cor.

   • Selecione Transparent para usar um plano de fundo transparente para o botão.

7. Clique em Save.

Adicionar variantes de idioma para tradução

Você pode criar variantes de idioma personalizadas para usar com o Guide. Além disso, você pode editar os rótulos para os elementos da interface de usuário do Guide.

Adicionar um idioma personalizado

1. Clique no seletor de aplicativo e selecioneGuide.

2. Clique em Localization.

3. Clique em New Language para adicionar um novo idioma.

   Saiba mais sobre os campos nesta etapa

   campo	Detalhes
   Name	Digite um nome para identificar o idioma.
   Language	Selecione o Language na lista suspensa.
   Country	Selecione o Country na lista suspensa.
   Fallback	Selecione um Fallback idioma a ser usado se não houver uma tradução para um rótulo específico.

4. Clique em Save. Os rótulos padrão fornecidos com o Guide aparecerão.
5. Para cada Translation Key, insira um Translation Value. Essa é a string que é mostrada aos visitantes no widget Guide. Você não pode alterar a Translation Key dos rótulos padrão fornecidos com o Guide.
6. Se necessário, crie novas chaves de tradução clicando em Adicionar na parte inferior da página. Defina o Translation Key e o Translation Value. Você pode alterar a Translation Key para novos rótulos que criar. Se você adicionar novas chaves de tradução, forneça valores traduzidos em todos os idiomas oferecidos aos seus visitantes.

7. Clique em Save.

Editar os rótulos para um idioma

1. Clique no seletor de aplicativo e selecioneGuide.

2. Clique em Localization.

3. Clique em Edit ao lado do idioma a ser editado.

4. Vá até o rótulo a ser editado e atualize o Translation Value. Por exemplo, você pode alterar o rótulo do botão para iniciar um chat em Begin Chat para Start Chat.

5. Clique em Save.

Interagir com um widget Guide

Os visitantes podem interagir com um widget Guide usando o mouse ou teclado para mover entre os botões. Note que a navegação pelo teclado é limitada a visitantes que usam Mac com o navegador Safari ou Firefox, a menos que habilitada no navegador. As chaves funcionam conforme esperado por padrão ao usar o navegador Chrome.