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 do CXone 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 Guia Guiaem sites diferentes, poderá usar identidades de marcas exclusivas em cada site. Ao definir a regra para exibir um modelo ou uma oferta proativa, use a ação Guide Set 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.

   Informar-se melhor sobre os campos emGeneralguia

   campo	Detalhes
   Width (EM)	A largura do widget Guide, em "ems". O tamanho padrão "em" se baseia nas configurações CSS ou do navegador. Para obter resultados ideais, selecione um modelo de portal do cliente a ser visualizado e, em seguida, ajuste a largura do widget Guide, se necessário.
   Height (EM)	A altura do widget Guide, em "ems". O tamanho padrão "em" se baseia nas configurações CSS ou do navegador. Para obter resultados ideais, selecione um modelo de portal do cliente a ser visualizado e, em seguida, ajuste a altura do widget Guide, se necessário.
   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.

   Informar-se melhor sobre os campos emGuide 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 cabeçalho, em "ems", a ser utilizado nos modelos de portal do cliente. O tamanho padrão "em" se baseia nas configurações CSS ou do navegador. 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 subcabeçalho, em "ems", a ser utilizado nos modelos de portal do cliente. O tamanho padrão "em" se baseia nas configurações CSS ou do navegador. 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.

   Informar-se melhor sobre os campos emKnowledge 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.

   Informar-se melhor sobre os campos emProactive Offerguia

   campo	Detalhes
   Heading Font Size (EM)	O tamanho da fonte, em "ems", a ser utilizada no cabeçalho de uma oferta proativa. O tamanho padrão "em" se baseia nas configurações CSS ou do navegador. 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 utilizada no texto do corpo de uma oferta proativa. O tamanho padrão "em" se baseia nas configurações CSS ou do navegador. 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.

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.

View a short video on creating channel buttons.

1. Clique no seletor de aplicativo e selecioneACD.

2. Acesse Digital > Points of Contact Digital.

3. Em General channel features, clique em Guide.

4. Role para baixo até a seção Buttons e clique em Add button.

   Ver imagem

   

5. Insira um Name para o botão.

6. Clique em Choose File para carregar o Icon do botão.

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

7. Se necessário, defina uma cor de fundo para o botão do canal no campo Theme color .

   Deixe esse campo em branco para usar a cor de fundo padrão do botão de canal definida para a marca.

   Para usar um fundo transparente para o botão, selecione Transparent background.

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

2. Acesse Digital > Points of Contact Digital.

3. Em General channel features, clique em Guide.

4. Clique em Translations.

5. Clique em Add 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	Escolha um idioma de Fallback a ser usado caso não haja uma tradução para um rótulo específico.

6. Clique em Save. Os rótulos padrão fornecidos com o Guide aparecerão.
7. 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.
8. 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.

9. Clique em Salvar.

Editar os rótulos para um idioma

1. Clique no seletor de aplicativo e selecioneACD.

2. Acesse > Points of Contact Digital.

3. Em General channel features, clique em Guide.

4. Clique em Translations.

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

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

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