Nesse artigo, vamos mostrar como se cria um botão flutuante WhatsApp.
No atual cenário do nosso país, muitas empresas estão cortando custo altos com sistemas de atendimento caríssimos.
Portanto, muitos lojistas estão optando por adicionar um meio de contato alternativo barato em seu site, é ai que entra o botão flutuante WhastApp.
É um recurso de baixo custo e muito eficiente, já que alguns chats custam muito caro, para quem tem um site pequeno e não deseja fazer alto investimento. Além disso, é uma opção a mais para contato que você terá em seu site.
Algumas agências chegam a cobrar valores bem altos para inserir um botão semelhante em seu site.
Entretanto, existem duas formas de adicionar o botão, inserindo via Tag Manager, que é uma ferramenta do Google muito usada para criar tags e inserir códigos em sites, lojas e blog, totalmente gratuita.
Para usar não precisa de conhecimento nenhum de HTML, seu site ou loja foi configurado com o Tag Manager, basta criar uma tag e adicionar. Neste artigo ensinamos a criar uma tag.
A outra forma, é adicionar diretamente pelo código do site, para isso precisa de um pouco de conhecimento em CSS e HTML.
Portanto, se esse for seu caso adicione a parte do HTML logo acima da tag </body> e a parte do CSS entre de uma tag <style></style> ou dentro do arquivo CSS do seu site.
Estou disponibilizando o código desse botão flutuante do WhatsApp para uso gratuito, basta copiar o código e inserir em seu site ou loja.
Abaixo temos o código completo do botão flutuante do WhatsApp, basta copiar e colar em seu site.
See the Pen WhatsApp button fixed by Cupcom Codes (@cupcomcodes) on CodePen.
Também temos um gerador, onde você adiciona um texto e seu numero de telefone e o código é gerado automaticamente, basta copiar e colar em seu site.
Clique aqui para ver o gerador
Em outro artigo mais recente, também ensinamos a adicionar o botão do Facebook Messenger, que também serve de alternativa ao WhatsApp.
Basta ter uma página criada no Facebook para adicionar o botão, caso queira conferir o artigo clique aqui.
O Figma é uma ferramenta de design colaborativa, online e gratuita, que não requer nenhum…
Os testes A/B são uma das formas mais eficientes e conhecidas para otimizar os resultados…
Neste artigo vamos listar 6 Sites para baixar texturas grátis para compor projetos de design,…
O Design Thinking, que se refere ao "pensamento do design" ou "pensar como um designer",…
A internet oferece um mundo de oportunidades para ganhar uma renda extra. Neste artigo, apresentamos…
Neste artigo, apresentaremos uma lista dos melhores plugins de SEO para WordPress, que podem ajudar…
View Comments
Eu uso o WIX. Com eu faço para o botão ficar fixo na tela enquanto o cliente navega ?
Não tenho muito conhecimento em Wix, você tem que procurar alguma opção que de para fazer inserção de HTML