Acrescentar sua marca ao bate-papo incorporado

Objetivos de aprendizagem

Após concluir esta unidade, você estará apto a:
  • Adicionar a identidade de marca à janela do bate-papo com clientes.
  • Testar a implementação do bate-papo na Web.

Planejar a identidade de marca

Maria está empolgada para demonstrar o bate-papo na Web para Sita e Roberto, mas antes ela quer garantir que a janela do bate-papo com clientes combina perfeitamente com a marca Ursa Major Solar. Então, ela elabora algumas perguntas para fazer a Sita. As respostas ajudam a garantir que tudo fique do jeito certo.

Pergunta Resposta
Quais fontes e cores a Ursa Major Solar usa nos materiais de marketing? De acordo com as nossas diretrizes de marca, a Ursa Major Solar usa Salesforce Sans. As cores da marca são #006937, #565656 e #F5B335.
A Ursa Major Solar tem logotipo? Sim, podemos usar a imagem abaixo.Logotipo da Ursa Major Solar
Podemos adicionar um avatar de agente à janela do bate-papo com clientes? Sim, podemos usar a imagem abaixo.Avatar do agente da Ursa Major Solar

Embeleze usando a identidade de marca

Munida de materiais da marca, Maria acessa a configuração do serviço incorporado para adicionar as cores, fontes e imagens da Ursa Major Solar. Com esses elementos de design, a janela do bate-papo fica perfeita no site da empresa!

Acompanhe Maria enquanto ela inclui materiais personalizados de sua marca na janela de bate-papo

Para começar, vamos adicionar nossas imagens ao Salesforce para criar links que podemos usar na configuração do serviço incorporado. Não é necessário fazer isso caso as suas imagens já estejam hospedadas em algum lugar com um link público. Como estamos usando um site de teste, podemos carregar nossas imagens como recursos estáticos no Salesforce para criar links.

  1. Salve as imagens do logotipo e avatares de agentes em sua área de trabalho.
    • Imagem do logotipo:Logotipo da Ursa Major Solar
    • Imagem do avatar do agente:Avatar do agente da Ursa Major Solar
  2. Em Configuração, insira Static Resources (Recursos estáticos) na caixa Busca rápida e selecione Static Resources (Recursos estáticos).
  3. Clique em Novo.
  4. Insira o nome Logo.
  5. Clique em Choose File (Escolher arquivo) e selecione a imagem do logotipo (a imagem do logotipo da Ursa Major Solar) que você salvou.
  6. Selecione Public (Público) como Controle de cache.
  7. Clique em Salvar.
  8. Na página Detalhes do recurso estático, clique em View file (Exibir arquivo) para abrir a imagem em uma nova guia.
    Link Exibir arquivo na página de detalhes do recurso estático
  9. Copie o URL e cole em algum lugar seguro, ou deixe a guia aberta para copiá-lo mais tarde. Você precisará do URL em breve.
  10. Repita as etapas 3-9 para a imagem do avatar do agente (a imagem do rosto de uma pessoa). Insira o nome AgentAvatar. A seguir, Maria define as cores da janela de bate-papo para que correspondam às da marca Ursa Major Solar.
  11. Em Configuração, insira Serviço incorporado na caixa Busca rápida e selecione Implantações de serviço incorporado.
  12. Clique na seta ao lado da implantação do serviço incorporado e selecione Exibir.
  13. Clique em Edit (Editar) ao lado de Marca.
  14. Selecione as cores e uma fonte Use a visualização ao vivo para ver como as cores são exibidas.
    Opções de marca do serviço incorporado.
    • Digite #006937 para a cor principal da marca e a cor do cabeçalho.
    • Não altere o contraste principal, o texto do cabeçalho e as cores alternativas do cabeçalho.
    • Mantenha Salesforce Sans selecionada como fonte.
  15. Clique em Concluir. Fácil! Agora, precisamos dar alguns toques finais na janela do bate-papo.
  16. Ao lado das configurações do bate-papo, clique em Editar.
  17. Caso o controle deslizante Pré-bate-papo esteja definido como ativo, altere-o para Inactive (Inativo).
  18. Perto da Marca adicional, clique em Edit (Editar).
  19. Cole o URL da imagem do logotipo no campo Logo.
  20. Cole o URL da imagem do avatar do agente no campo Agent Avatar (Avatar do agente).
  21. Clique em Salvar.

Com poucos cliques, a janela do bate-papo com clientes está totalmente de acordo com a marca Ursa Major Solar.

Experimente

Tudo parece perfeito, e Maria está pronta para testar a implementação do bate-papo na Web.

Aqui está o que ela vai fazer para testar o bate-papo na Web.
  • Abrir a página do Visualforce que fez na primeira unidade e ver a janela de bate-papo offline.
  • Abrir o console de serviço pronto para usar e ficar online usando o status Available - Chat (Disponível - Bate-papo) no utilitário do Omni-Channel.
  • Atualizar a página do Visualforce e clicar na janela de bate-papo para começar um bate-papo.
  • Enviar bate-papos como cliente e agente para garantir que tudo está funcionando direito.
  • Encerrar o bate-papo pela janela do cliente ou do agente.

Venha junto para testar a implementação do seu bate-papo na Web.

  1. Em Configuração, insira Visualforce na caixa Busca rápida e selecione Páginas do Visualforce. Caso não veja a opção Páginas do Visualforce, verifique se está em Configuração e não em Configuração do serviço.
  2. Clique em Ícone de pop-out ao lado da página de bate-papo na Web do Visualforce para abri-la em uma nova guia ou janela. Sua janela de bate-papo exibe um botão de bate-papo offline no canto inferior direito.
    Sua janela de bate-papo pode parecer um pouco estranha em sua página do Visualforce porque nossa página não contém estilos nem formatação. Em um site de verdade ou site do Experience, ficará mais ou menos assim:
    Snap-in offline em uma comunidade
  3. No Iniciador de aplicativos, encontre e selecione Console de serviço. Utilize o console de serviço pronto para usar, não um aplicativo de console criado por você. É nele que ativamos tudo durante o fluxo de configuração do bate-papo.
  4. Abra o utilitário do Omni-Channel e altere o status para Available - Chat (Disponível - Bate-papo). Agora você pode entrar em bate-papos como agente!
    Status no utilitário do Omni-Channel no console
  5. Retorne à guia em sua página do Visualforce e atualize-a. Sua janela de bate-papo exibe um botão de bate-papo online.

    Sua janela de bate-papo pode parecer um pouco estranha em sua página do Visualforce porque nossa página não contém estilos nem formatação. Em um site de verdade ou site do Experience, ficará mais ou menos assim:
    Snap-in online em uma comunidade
  6. Clique na janela de bate-papo para solicitar um bate-papo. Depois de solicitar o bate-papo, minimize a janela do bate-papo com clientes para ver a imagem do logotipo na janela de bate-papo.
    Dica: Problemas para começar um bate-papo? Confira a URL em sua página do Visualforce. Se a URL acaba com .visualforce.com em vez de .force.com, você vai precisar permitir https://*.visualforce.com em suas configurações CORS.
  7. No console, aceite a solicitação de bate-papo no utilitário do Omni-Channel. A transcrição do bate-papo é aberta no console.
  8. Converse consigo mesmo por um tempo. Na janela do bate-papo com clientes, repare nas cores e na imagem do avatar do agente da Ursa Major Solar.
  9. Encerre o bate-papo pela janela do agente ou do cliente. Feche o registro de transcrição do bate-papo e os registros relacionados no console.

Legal, isso, não!? Maria acabou de configurar e testar o bate-papo na Web em questão de minutos. Agora, Maria tem um bate-papo na Web operacional para apresentar a Sita e Roberto. Ela está ansiosa para mostrar a eles o quanto a experiência é simples para os dois interlocutores: agente e cliente.

Continue a aprender de graça!
Inscreva-se em uma conta para continuar.
O que você ganha com isso?
  • Receba recomendações personalizadas para suas metas de carreira
  • Pratique suas habilidades com desafios práticos e testes
  • Monitore e compartilhe seu progresso com os empregadores
  • Conecte-se a orientação e oportunidades de carreira