Botão de chat web: Como personalizá-lo

27 de maio de 2024

É fácil editar como o seu botão de chat web aparece e se comporta. Você pode escolher canais de mensagens, alterar a aparência e até mesmo como ele se comporta. Este guia mostrará como personalizar o seu botão de chat passo a passo, tornando-o envolvente para os visitantes entrarem em contato e se conectarem com você.

Nota: Ainda não tem um botão de chat no seu site? Aprenda como criar um botão para chamar de seu e adicionar ao seu site seguindo o nosso artigo.

Neste artigo, você aprenderá:

Como adicionar canais de comunicação ao seu botão de chat

Você pode personalizar o seu botão de chat antes ou depois de colocá-lo no seu site.

Logo após criar um novo botão, você pode escolher as configurações. Se você quiser alterar um botão existente, basta ir para Leads > Automatizar e selecionar o botão nas fontes de leads do lado esquerdo.

Na guia de Configurações gerais, você pode facilmente adicionar ou remover canais de mensagens clicando nos ícones. Você pode selecionar entre:

  • Messenger
  • Telegram
  • Viber
  • WeChat
  • Skype
  • Instagram
  • WhatsApp
  • Mensagens da Apple
  • Chat ao vivo

Se você escolher um ícone de mensageiro que ainda não esteja configurado na Kommo, uma janela será aberta para ajudá-lo a instalá-lo.

Você pode ver como o seu botão será visualizado em dispositivos móveis e desktop diretamente na prévia à direita, antes de torná-lo ao vivo.

Como editar a aparência do seu botão de chat

Há também muitas maneiras de editar a aparência do botão. Na janela do botão de chat do site, você encontrará as guias de Configurações gerais e Configurações avançadas, cada uma com seu próprio conjunto de recursos de personalização que você pode escolher.

Configurações gerais

Além de definir os canais de mensagens, nesta guia você pode modificar como o seu botão de chat online será exibido. Você pode alterar:

  • Animação: adicione movimento como ondas, tremores, vibrações ou mantenha-o estático.
  • Posição: escolha a posição do lado esquerdo ou direito no seu site.
  • Estilo: ajuste o tamanho e a forma, de circular a quadrada.
  • Cor do tema: selecione uma cor para o seu botão que combine com a sua marca.
  • Adicionar uma mensagem de pop-up de boas-vindas: você também pode adicionar uma mensagem de pop-up de boas-vindas personalizada se quiser iniciar uma conversa com os seus visitantes e chamar a atenção deles.

Nota: Alterar o tamanho e a forma do botão também ajustará o tamanho e a forma dos ícones de mensageiros conectados.

Configurações avançadas

Quando terminar de ajustar as configurações gerais, você pode abrir a guia de Configurações avançadas para uma variedade de possibilidades de personalização! Você pode mudar:

  • Layout do canal: mostrar ou ocultar ícones de mensageiros conectados.
  • Orientação do canal: você pode escolher entre orientação vertical ou horizontal para os ícones de chat, que são exibidos quando o botão de chat é clicado.
  • Margem direita e inferior: ajustando as margens, você pode posicionar o botão perfeitamente no seu site.
  • Manter o botão visível durante a rolagem: para fixação do botão, se o seu site for rolável, deixar essa configuração ligada garantirá que o botão permaneça no lugar durante a rolagem.
  • Aplicar gradiente aos seus botões do Facebook e Instagram: torne esses botões ainda mais atraentes habilitando gradientes neles.

Nota: Algumas pessoas usam telas de baixa resolução, então tenha cuidado ao configurar a margem muito alta. Você poderia acabar posicionando o seu botão de chat online no meio da tela para alguns usuários.

Quer explorar mais como tirar o melhor proveito do seu botão de chat online com o Chat ao vivo? Leia o nosso artigo sobre Chat ao vivo aqui.

Como adicionar gatilhos de ação ao botão de chat

Você pode adicionar gatilhos de ação na seção de Ações Estratégicas, e aqui é onde o potencial do botão de chat online realmente aparece. Aqui, você pode configurar reações com base em condições específicas, dando ao seu botão de chat um pouco mais de inteligência. Dê uma olhada nas condições que você pode usar:

  • Tempo no site: acione uma resposta depois que um visitante estiver por um tempo.
  • Pixels rolados: ative uma ação quando um visitante atinge uma parte específica da página.
  • Páginas visitadas: reaja com base em quantas páginas um visitante verifica.
  • Página visitada: tome uma ação quando um visitante acessar uma página específica.

Depois de escolher uma condição com base no comportamento do visitante, é hora de escolher uma reação. Personalize o seu botão de chat para responder de diferentes maneiras ou automatizar processos:

  • Animação do botão: adicione um movimento sutil (ondas, tremor ou vibração no seu botão) para chamar a atenção.
  • Mensagem de boas-vindas: cumprimente os visitantes com uma mensagem amigável do seu bot.
  • Pop-up de formulário: facilite para os visitantes compartilharem informações.
  • Adicionar tarefa: acompanhe os acompanhamentos importantes criando tarefas no CRM.
  • Enviar webhook: compartilhe links relevantes com os seus visitantes.
  • Editar tags: mantenha as coisas organizadas rotulando leads.
  • Alterar usuário do lead: direcione os chats para o membro da equipe certo para ajuda personalizada.
  • Alterar campo: capture detalhes adicionais para um contexto melhor.

Com essas ações úteis, você pode melhorar a experiência do visitante sem ser insistente demais. Imagine cumprimentá-los com uma mensagem amigável ou ajustar sutilmente o seu botão quando eles estiverem explorando por um tempo. Além disso, você pode direcionar os chats suavemente para o membro da equipe certo para assistência personalizada. Por exemplo, oriente-os para um recurso útil se estiverem olhando para páginas específicas.

Para configurar uma ação estratégica:

  1. Vá para a guia de Configurações avançadas > Ações Estratégicas.
  2. Dê um nome à sua Ação estratégica > clique em Adicionar uma condição.
  3. Escolha a que se adequa ao seu propósito > clique em Salvar.
  4. Clique em Adicionar uma reação e selecione a sua ação.
  5. Então, salve o botão de chat.

Exemplo de como personalizar o botão de chat para combinar com a sua marca

Vamos imaginar um cenário onde o proprietário de uma agência de marketing chamada Bright Ideas Marketing deseja personalizar o botão de chat online para refletir a sua marca e melhorar o engajamento do cliente.

  • Escolha de canais de mensagens: Eles podem começar selecionando os canais de mensagens que desejam integrar ao seu botão de chat. Eles podem escolher Messenger, WhatsApp e Chat ao vivo, já que são plataformas que a sua equipe usa com frequência para se comunicar com os clientes.
  • Ajustando a aparência: Na guia de Configurações gerais, eles adicionam um toque pessoal ao botão de chat. Eles selecionam uma tonalidade vibrante de azul para combinar com o esquema de cores da sua marca. Eles também escolhem uma forma redonda para o botão para torná-lo visualmente atraente.
  • Animação ociosa e posição: Eles decidem adicionar uma animação sutil ao botão, fazendo-o pulsar suavemente. Eles posicionam o botão no canto inferior direito do site, garantindo que seja facilmente acessível, mas não intrusivo.
  • Mensagem de boas-vindas: Para cumprimentar os visitantes e chamar a atenção deles, eles adicionam uma mensagem de boas-vindas personalizada: “Olá! Como podemos iluminar o seu marketing hoje?” Esta mensagem aparece assim que alguém clica no botão de chat.
  • Foto e nome do agente: Eles carregam uma foto profissional deles mesmos como o agente, juntamente com o seu nome. Isso adiciona um toque pessoal, informando aos visitantes com quem estão conversando.
  • Configurações avançadas e Ações estratégicas: Na guia de Configurações avançadas, eles configuram ações-chave para aprimorar a experiência do usuário. Eles programam o botão de chat para exibir uma mensagem de boas-vindas se um visitante passar mais de 30 segundos no site. Eles também atribuem páginas específicas no seu site a diferentes membros da equipe, para que as consultas relacionadas a serviços como SEO ou marketing de conteúdo sejam encaminhadas diretamente para os especialistas nessas áreas.
  • Chatbots: Eles configuram um chatbot chamado “BrightBot” para lidar com perguntas comuns sobre os seus serviços, preços e muito mais. Eles garantem que a mensagem de boas-vindas esteja ativada para ativar o bot.

Agora, os visitantes do site da Bright Ideas Marketing são recebidos com um botão de chat visualmente atraente que combina com as cores e o estilo da marca. A mensagem de boas-vindas personalizada e os detalhes do agente tornam a experiência mais envolvente. Com a assistência do chatbot, os visitantes recebem respostas imediatas às suas perguntas, enquanto os membros da equipe recebem perguntas relevantes com base na sua expertise.

Se você precisar de mais ajuda com a configuração ou solução de problemas, sinta-se à vontade para contatar o nosso chat de suporte ou nos contatar via WhatsApp. Você também pode contratar um parceiro da Kommo para fazer todo o trabalho árduo para você.

Ainda não é usuário? Inscreva-se para o nosso teste gratuito de 14 dias ou agende uma demonstração gratuita ao vivo.

Teste a Kommo grátis

Descubra como a Kommo pode transformar sua gestão de clientes agora