Guia completo para adicionar um botão de WhatsApp ao seu site

Estabelecer uma ligação eficaz com os seus clientes é essencial para o sucesso de qualquer loja online. Neste artigo, vamos explorar como integrar eficazmente um botão de chat de WhatsApp no seu site, uma ferramenta fundamental para melhorar a comunicação com o seu público.

A importância de um botão de WhatsApp

Integrar um botão WhatsApp não se trata apenas de facilitar um canal de comunicação, é uma oportunidade para criar uma ligação mais próxima e direta com quem visita o seu site. E o melhor é que se trata de uma implementação acessível a todas as plataformas, incluindo a Jumpseller.

Integração universal

Este guia é aplicável a qualquer plataforma, não apenas à Jumpseller. Por isso, independentemente de onde o seu site esteja alojado, encontrará aqui informações valiosas.

O código

Na plataforma em que se encontra, deve ter acesso ao editor HTML e decidir onde vai colar o objeto HTML. Por exemplo, na Jumpseller, o modelo Layout aplica-se a todas as páginas do modelo, pelo que sugiro a utilização deste. Abaixo está um código bem explicado para um botão padrão do WhatsApp.

<a href="&amp;text=Olá preciso de mais informações" class="store-whatsapp" title="Envie-nos uma mensagem WhatsApp" target="_blank">
  <i class="fa-brands fa-whatsapp"></i>
</a>

Na Jumpseller, para facilitar a programação, utilizamos etiquetas como que contém um URL do WhatsApp juntamente com o número de telefone que registou na sua loja. Pode substituí-lo por este https://api.whatsapp.com/send?phone=OSEUTELEFONOCOMPLETO.

Por fim, vem a parte do CSS, que nos permite melhorar o aspeto, com cores e posições correctas. Para isso, é necessário localizar um ficheiro CSS que é carregado na sua loja e editá-lo. Normalmente, esse ficheiro na Jumpseller é o ficheiro de cores e posições correctas. Normalmente, esse ficheiro na Jumpseller chama-se theme.css, style.css, styles.css ou app.css. Adicione estes estilos no final.

.store-whatsapp {
position: fixed; /* Mantém o botão numa posição fixa no ecrã */
z-index: 9998; /* Assegura que o botão está acima de outros elementos */
right: 20px; /* Posiciona o botão a 20px do lado direito do ecrã */
bottom: 10px; /* Posiciona o botão a 10px da parte inferior do ecrã */
display: flex; /* Utiliza Flexbox para a disposição interna do botão */
align-items: centre; /* Centra o conteúdo (ícone) verticalmente */
justify-content: center; /* Centra o conteúdo (ícone) horizontalmente */
padding: 35px; /* Espaçamento interno à volta do ícone */
border-radius: 50%; /* Torna o botão circular */
background: #25D366 !important; /* Cor de fundo do botão */
box-shadow: 0 0 20px transparent; /* Sombra suave à volta do botão */
color: #25D366 !important; /* Cor do ícone */
font-size: 40px; /* Tamanho do ícone dentro do botão */
line-height: 47px; /* Altura da linha para o texto/ícone */
text-align: center; /* Alinhamento do texto/ícone */
text-decoration: none; /* Remove qualquer decoração de texto do link */
}

.store-whatsapp:hover {
background: #128C7E !important; /* Cor de fundo ao passar o rato */
box-shadow: 0 0 20px rgb(75 57 75 / 50%); /* Sombra mais proeminente ao passar o rato */
color: #128C7E !important; /* Cor do ícone de passagem do rato */
}

Implementação na Jumpseller

Na Jumpseller, a integração de elementos como o botão de WhatsApp é ainda mais fácil. Cada tema de design vem pronto para incorporar estas funcionalidades de forma intuitiva.

Basta ir ao seu Painel de Administração: Temas > Editor Visual > Editar Configurações > WhatsApp da Loja, onde pode escolher as cores, ativar animações e definir a posição do botão. Se ainda não o fez, no seu painel de administração: Geral > Preferências > Redes sociais, adicione o seu número de telefone, o que será um requisito para ativar o botão naturalmente.

Adicionar um botão de chat de WhatsApp ao seu site é um passo estratégico para melhorar a interação com a sua clientela. Este guia fornece-lhe as ferramentas necessárias para o implementar de forma fácil e eficaz, independentemente da plataforma que utiliza. Se estiver ns Jumpseller, a integração será ainda mais fácil graças às características específicas da plataforma.

Estamos aqui para o ajudar, se tiver alguma dúvida contacte-nos em qualquer altura.