Idioma:

Como Incorporar o Botão Flutuante do WhatsApp no Site

Procurando uma forma de criar um botão flutuante de WhatsApp para o seu site? Oferecemos fazer isso com a ajuda de um plugin prático! Neste artigo, vamos mostrar como criar seu próprio botão de chat flutuante e adicioná-lo ao seu site em apenas alguns passos.
Veja o que o ChatGPT pensa Abra o editor de widgets ao vivo
How to Embed Floating WhatsApp Button to Website

Sobre o Plugin do Botão Flutuante do WhatsApp

Você quer ampliar a funcionalidade do seu site adicionando um botão flutuante do WhatsApp, mas não sabe como fazê-lo? Aqui, algumas soluções prontas podem ajudar, por exemplo, um plugin que pode ser incorporado ao código HTML de qualquer site – desde WordPress e Squarespace até Shopify e Wix. E podemos compartilhar essa solução com você. Estamos falando do plugin botão flutuante do WhatsApp da Elfsight. Com a ajuda do plugin, você criará facilmente uma janela de chat para qualquer finalidade no seu site.

  1. Comece escolhendo o modelo ideal para o chat.
  2. Conecte seu perfil e personalize a caixa de chat.
  3. Obtenha o código do seu widget de Chat do WhatsApp.
  4. Incorpore o código no seu site.

Crie o botão flutuante do WhatsApp aqui mesmo em apenas alguns cliques!

Adicionar Botão Flutuante do WhatsApp ao HTML do site

Você pode criar facilmente um botão WhatsApp flutuante em poucos cliques para adicionar ao código HTML do seu site. O HTML está aqui para ajudar você a criar um site para qualquer objetivo. E se a criação do site não for tão complexa, adicionar alguns elementos extras como um botão flutuante pode exigir a ajuda de soluções de terceiros. Isso pode ser feito facilmente via nosso configurador fácil de usar. Vamos ver como você pode fazer isso.

  1. Crie uma conta no Elfsight Apps e faça login no painel de administração.
  2. Escolha o modelo Flutuante no configurador e personalize-o.
  3. Salve seu botão de chat flutuante.
  4. Copie o código de instalação que você verá no pop-up.
  5. Integre o código do plugin no local desejado do seu site.

Isso foi bem fácil, não foi? Agora, se você quiser um guia visual mais representativo de como adicionar o botão flutuante do WhatsApp ao código HTML do seu site, confira o vídeo abaixo:

Como adicionar o botão flutuante do WhatsApp ao WordPress e outras plataformas

WordPress é um dos criadores de sites mais populares do mundo, então não é surpresa que muitos usuários precisem de instruções sobre como adicionar um botão de chat flutuante a um site. É muito simples adicionar um Chat do WhatsApp para WordPress aos websites. Abaixo, descrevemos como você pode fazer isso usando o editor nativo do WordPress. Você pode ver como é simples adicionar o WhatsApp ao WordPress.

Depois de criar e personalizar seu botão de chat flutuante no painel de administração do Elfsight, insira o código de instalação no campo HTML da área de administração do WordPress. É bem simples de fazer! Normalmente, adicione o código de instalação em uma seção de HTML. Veja como fazer:

  1. Crie seu plugin de botão flutuante do WhatsApp no painel de administração, escolhendo o modelo adequado.
  2. Salve os resultados e copie o código de instalação que aparece na janela pop-up especial.
  3. Faça login no painel de administração do WordPress.
  4. Vá até a seção “Páginas” e selecione a página onde você precisa incorporar o botão.
  5. Para a seção necessária do site, adicione um bloco HTML personalizado.
  6. Neste bloco HTML, insira o código do botão flutuante que você obteve no gerador de código.
  7. Clique em “Atualizar” para salvar todas as alterações.

Você pode fazer quantos ajustes quiser no painel da Elfsight, e eles aparecerão no seu botão de chat flutuante. Não é necessário alterar o código HTML do seu site WordPress.

Learn more about adicionar o WhatsApp ao WordPress and its useful features.

Nosso chat do WhatsApp também está disponível em outras plataformas, por exemplo, Wix. Aqui estão tutoriais diretos para adicionar seu app de chat a uma página específica do Wix:

  1. Acesse o construtor Wix fazendo login na sua conta Wix e selecionando o site em que espera ver nosso plugin. Em seguida, clique em ‘Editar Site’
  2. Adicione um bloco HTML clicando no ícone de +, vá para a seção Incorporar e escolha “Incorporar um Widget” na aba Inserções Personalizadas.
  3. Insira o código de instalação. Em seguida, clique em “Inserir código”, cole o trecho de instalação e prossiga com “Atualizar”.
  4. Personalize o tamanho e a posição do plugin. Arraste o plugin para o local desejado e ajuste suas dimensões até ficar perfeito, sem precisar de barras de rolagem.
  5. Otimize o plugin para dispositivos móveis e publique-o. Clique no ícone Móvel para trabalhar no editor móvel, ajuste o tamanho do plugin se necessário e clique em “Publicar”.

Pronto! Você adicionou seu app Elfsight a uma página específica do seu site Wix.

Que tal adicionar um Chat do WhatsApp ao Shopify? Simples. Veja como fazer isso em apenas alguns passos:

  1. Faça login no painel de administração do Shopify e vá para Canais de Vendas → Loja Online.
  2. Clique no botão Personalizar para acessar o editor visual.
  3. Para alterar a página, use a lista suspensa no topo.
  4. Clique em Adicionar Seção e, em seguida, selecione Custom Liquid.
  5. Cole o código do Shopify WhatsApp Chat no campo Custom Liquid, ajuste as cores e os paddings se necessário, e salve.

Dessa forma, você pode facilmente adicionar um Chat do WhatsApp personalizado às páginas do seu site Shopify.

Botão flutuante do WhatsApp: casos de uso incríveis

Então, ao criar e personalizar seu botão flutuante de chat do WhatsApp para WordPress ou qualquer outro site, você pode ter encontrado apenas um problema: dificuldades de personalização, especialmente se estiver criando uma introdução, pois pode não saber como estilizar da melhor forma o código HTML do site. Para ajudar, reunimos para você exemplos de designs de botões que podem te inspirar.

Exemplo 1: incorporar botão de chat

WhatsApp floating chat button example

Este é um exemplo de botão flutuante para WordPress ou qualquer outro site, em um design clássico com o qual os usuários estão familiarizados. Para abrir uma caixa de diálogo personalizada, basta clicar no botão. A janela de chat vem acompanhada de uma mensagem de tempo de resposta personalizada, o que aumentará a confiança do seu público, pois verão que você se importa e está pronto para responder às suas perguntas a qualquer momento.

Exemplo 2: botão de consulta

WhatsApp floating chat button consultation

O ícone flutuante do WhatsApp no WordPress ou em qualquer outro site é uma ótima forma de orientar os usuários em relação a dúvidas que possam ter. Com as opções de personalização extensas do plugin, você pode facilmente recolorir o botão e a janela de chat nas cores desejadas, integrando-as ao conceito de design geral do seu site e ao código HTML.

Exemplo 3: botão de onboarding

WhatsApp floating chat button onboarding

Suporte ao cliente e onboarding são partes cruciais de qualquer site comercial. Disponibilizar esses serviços em uma janela de chat integrada ao código HTML do seu WordPress (ou de qualquer outro site) é uma excelente ideia. Use o botão de chat flutuante em todas as páginas para manter contato constante com seus clientes e elevar a qualidade do seu atendimento.

Exemplo 4: botão de feedback

WhatsApp floating chat button feedback

Quer melhorar a qualidade de seus produtos e serviços recebendo feedback rápido e garantido? Então o botão de chat flutuante adicionado ao código HTML do seu site vai ajudar — qualquer pessoa pode clicar nele a qualquer momento para deixar a opinião. Assim como nos exemplos anteriores, você pode facilmente personalizar a cor do chat no seu site com as cores que desejar, para que ele se integre de forma harmoniosa ao design.

Benefícios do Botão Flutuante do WhatsApp para o seu Negócio

Por que escolher um botão flutuante do WhatsApp para adicionar ao código HTML do seu site? A resposta é simples: pela facilidade de uso. É uma oportunidade para o seu público iniciar um diálogo com a empresa em apenas 2 cliques. Não há necessidade de preencher formulários, digitar um número de telefone ou enviar uma mensagem. Apenas 2 cliques. O primeiro no site, o segundo no aplicativo do WhatsApp. O que poderia ser mais fácil?

Para a maioria das pessoas, é mais conveniente comunicar-se por meio de mensageiros instantâneos, com os quais já estão acostumadas. É mais cômodo do que e-mail, ligação ou chat online. A seguir, discutiremos as razões para considerar adicionar um botão de chat do WhatsApp ao seu site.

Crescimento de Popularidade com o Botão

O WhatsApp é o segundo maior serviço do mundo, ficando atrás apenas do Facebook. O WhatsApp tem mais de 500.000 usuários ativos diários, de acordo com Statista. O WhatsApp é o líder entre mensageiros instantâneos em termos do número de usuários em muitos países.

Forma rápida de comunicação com o Botão

As pessoas veem o Messenger como uma forma rápida de comunicação. O vendedor responderá prontamente à mensagem do cliente em qualquer canal. Mas o usuário responderá mais rápido no WhatsApp. Por quê?

  • O WhatsApp inspira grande confiabilidade entre os usuários. Mesmo que o usuário não goste do aplicativo, ele ainda assim o instalará. É um canal de comunicação com parentes e amigos. Por isso — e não apenas por isso — as pessoas costumam responder rapidamente às mensagens no WhatsApp.
  • O WhatsApp também é um canal não-spam. Na maioria das situações, as mensagens chegam de pessoas que conhecemos. Livre de anúncios intrusivos, notificações push irritantes, feeds de notícias e spam em massa.
  • Um usuário fica distraído por sinais de mensagens não lidas. Mesmo sem vontade de lê-las, ele as abrirá.
  • Nem todos os pontos se aplicam ao e-mail. Se o e-mail não for suficientemente relevante, o destinatário pode não abri-lo de imediato. Quem sabe nunca. E você não saberá se a mensagem foi lida ou não.

O WhatsApp também possui status de mensagens. Você sabe sempre se o cliente leu a mensagem ou não. Mais importante, o usuário também sabe que você vê esses status. Isso aumenta as chances de obter uma resposta. Mesmo um simples “sim” ou “não” ajudará você a planejar.

Ambiente mais descontraído com o Botão do WhatsApp

As pessoas percebem a correspondência pelo WhatsApp como comunicação informal, uma conversa sem amarras. Esse diálogo deixa o usuário mais propenso. Eles não têm medo de errar, fazer uma pergunta para esclarecer ou brincar. O email continua sendo visto como algo oficial, exigindo um texto estruturado e detalhado. “Demora para compilar isso”, o usuário pode pensar e responder a um concorrente no WhatsApp.

Botão de CTA

A importância de uma chamada para ação não pode ser subestimada. O logotipo do WhatsApp por si só não funciona como chamada para ação. Nem todos os visitantes do seu site vão entender qual é a função do plugin de chat. Mesmo assim, sem uma chamada para ação eficaz, o desempenho ainda seria baixo.

A taxa de conversão cai sem CTAs. A chamada para ação, exibida como tooltip, também não é eficaz o suficiente. A melhor opção é uma mensagem que fique visível o tempo todo e já integrada ao próprio plugin.

Personalização do design do botão

Um parâmetro importante que permitirá ao botão de chat encaixar-se de forma orgânica ao design do seu site. Configurações flexíveis permitem que o widget não conflite com o visual de outros elementos da página. É ótimo se o serviço oferecer a possibilidade de alterar a fonte, a cor, o tamanho e a posição.

Conclusão

O plugin do WhatsApp não é uma varinha mágica que garantirá um tsunami de pedidos. Mas, aplicado corretamente, pode realmente melhorar a taxa de conversão do tráfego móvel no seu site.

Artigo de
Gerenciador de Conteúdo
Como Gerente de Conteúdo na Elfsight, foco em criar conteúdos práticos e inspiradores. Adoro simplificar o que é complexo e tornar a leitura prazerosa.