Configurar Botão WhatsApp Gratuito
O que é o Botão de WhatsApp Flutuante?
Aumente o contato com seu cliente
Desenvolvemos um botão flutuante gratuito que você pode colocar no seu site. Ele permite que os visitantes do seu site possam entrar em contato com você ou com o seu time de atendimento via WhatsApp, se o visitante estiver usando celular ou tablet o app do WhatsApp abre automaticamente, se estiver usando um desktop o WhatsApp Web é aberto para iniciar a conversa.
Ele é também um botão de captura de contatos, ao clicar no botão um formulário é aberto para que o visitante fornecer o nome, sobrenome, e-mail e número do WhastApp dele, estes dados são enviados para o e-mail que você cadastrou quando gerou o botão. Ele aumenta as chances de sucesso das suas estratégias de marketing pelo WhatsApp.
Veja abaixo como é a aparência do botão WhatsApp com o formulário de captura aberto.

Criação e Instalação
Caso não tenha gerado o botão ainda, acesse a página Criar Botão WhatsApp Gratuito para criar o seu, é gratuito.
Na página acima você usará uma ferramenta para fazer a criação do botão e poderá personalizar características e comportamento do botão. Ao final, será criado um código em javascript para ser inserido no seu site. Você também receberá um e-mail com este código e as informações de como instalá-lo.
IMPORTANTE: Quando você gera o primeiro botão criamos um cadastro para você em nosso sistema e enviamos um segundo e-mail pedindo que você confirme o seu cadastro. O botão só aparecerá no seu site, mesmo após instalado, após você confirmar o seu cadastro.
O código gerado se parece com este abaixo, mas observe que este é apenas um exemplo, o seu conterá os dados que você informou quando fez a criação.
Este código deverá ser inserido entre as tags <head> e </head> do seu site:
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
Este código foi gerado na criiação do botão e deverá ser inserido imediatamente antes da tag </body> da página que você quer que o botão apareça. Caso você queira que ele apareça em todas as página do site deverá inserí-lo, normalmente, na seção footer:
<div id="WAButton"></div> <script type="text/javascript" src="https://cdn.mvmcloud.net/mvm-wapp-3.1.1.min.js"></scrip> <script type="text/javascript"> jQuery('#WAButton').mvmWhatsApp({ cid: "Ade2aec28855422a9ec7b789723fcba2", phone: "5511991234567", headerTitle: "Talk to us by WhatsApp", popupMessage: "Hi, tell me who you are so we can talk.", showPopup: true, headerColor: "#128C7E", backgroundColor: "#25D366", position: "right", size: "60px", useFirstLastName: true, firstNameLabel: "First name", lastNameLabel: "Last name", emailLabel: "Email", phoneLabel: "What is your WhatsApp number?", phoneHint: "Enter the number with country and area code. E.g.: 5511991234567", messageLabel: "Type your message to us", errorMsg: "Please fill in the required fields", btnSendText: "Start WhatsApp", btnSendColor: "#128C7E", requiredData: true, buttonOffset: '70px', }); </script>
O código acima pode ser modificado diretamente, isto permite que você modifique o visual do formulário e o comportamento do botão. Por xemplo, se você quiser que o título do formulário seja "Bem-vindo à Empresa", modifique a opção headerTitle
no código acima para headerTitle: "Bem-vindo à Empresa"
. Todas as propriedades podem ser modificadas desta forma. Mais adiante serão explicadas todas as propriedades do botão.
Como Configurar o Botão
A configuração da aparência do formulário de captura de contatos e do comportamento do botão, por exemplo, se o formulário deve abrir ou não, pode ser feita pela modificação de cada uma das propriedades do código acima. Você pode personalizar textos, cores e até mesmo substituir a imagem do botão WhatsApp por uma outra de sua escolha.
Além do visual, é possível modificar o comportamento do botão usando as respectivas propriedades. É possível usar o botão apenas como encaminhamento para a conversa no WhatsApp, evitando a abertura do formulário para a captura dos dados do visitante. Você também pode configurar que os campos nome, sobrenome, e-mail e número do telefone do WhatsApp sejam obrigatoriamente preenchidos pelo visitantes antes que ele seja encaminhado para a conversa no WhatsApp.
Observe que a ferramenta da MVMCloud só coloca no código as principais propriedades. O botão tem muitas outras que você verá abaixo e que podem ser adicionadas ao código conforme a sua necessidade.
Relação das propriedades
Propriedade | Tipo | Valor Padrão | Obrigatória | Descrição |
---|---|---|---|---|
autoOpenTimeout | Integer | 0 | Não | Define um tempo em milissegundos para abrir o formulário automaticamente. Zero significa não abrir o formulário automaticamente. |
backgroundColor | String | #25D366 | Não | Cor de fundo do botão. |
btnSendColor | String | #128C7E | Não | Cor do botão enviar do formulário. |
btnSendColorHover | String | #16b7a4 | Não | Cor do botão enviar do formulário quando o visitante passa o mouse sobre ele. |
btnSendText | String | Send Your Message | Não | Texto do botão enviar do formulário. |
buttonImage | String | Incorporada | Não | Imagem externa para substituir a imagem incorporada do botão. Deve ser `img` ou `svg` para que seja mostrada sem problema. |
buttonOffset | String | 0 | Não | Desloca a posição do botão na tela, por exemplo, o valor '30px' desloca a posição do botão 30px em relação à sua posiçãoo padrão. Valores negativos também são aceitos, ex. '-30px'. |
cid | String | Sim | ID do Cliente. Este texto identifica o seu botão em nosso servidor. Ele é gerado na criação do botão, sem esta informação o botão não será mostrado. | |
embedResources | Boolean | true | Não | Incorpora o arquivo de estilo css necessário para esta biblioteca. Se for definida como true o arquivo mvm-wapp-3.1.1.min.css é carregado automaticamente da cdn.mvmcloud.net. Se for definida como false o seguinte código deve ser inserido entre as tags <head> e </head> do seu site: <link rel="stylesheet" href="https://cdn.mvmcloud.net/mvm-wapp-3.1.1.min.css"/> . |
emailLabel | String | Enter Your Email | Não | Rótulo para campo de e-mail. |
errorMsg | String | Please, fill the required fields | Não | Mensagem de erro a ser mostrada caso o visitante deixe em branco os campos do formulário. Esta mensagem só será mostrada caso a propriedade requiredData for definida como true e o visitante não preencher os campos. |
firstNameLabel | String | Enter Your First Name | Não | Rótulo para campo de primeiro nome. |
lastNameLabel | String | Enter Your Last Name | Não | Rótulo para campo de sobrenome. |
headerColor | String | #128C7E | Não | Cor de fundo da barra de título do formulário. |
headerTitle | String | WhatsApp Chat | Não | Texto que será mostrado na barra de título do formulário. |
message | String | Não | Mensagem a ser enviada. Se showPopup for true , o campo de mensagem será preenchido com este texto. |
|
messageLabel | String | Enter Your Message Here | Não | Rótulo para o campo de mensagem. |
nameLabel | String | Enter Your Name | Não | Rótulo para o campo nome. |
phone | String | Sim | Número de WhatsApp que receberá a mensagem, número no formato internacional. | |
phoneHint | String | phone number like: 14081234567 | Não | Dica para o campo phone. |
phoneLabel | String | Enter Your Name | Não | Rótulo para o campo phone. |
position | String | left | Não | Posição do botão na tela. `'left'` | `'right'`. |
popupMessage | String | Please, enter your details | Não | Mensagem de boas-vindas para o visitante do seu site. |
requiredData | Boolean | true | Não | True para tornar obrigatório o preenchimento dos detalhes do visitante (name, first_name, last_name, email e phone). |
showOnIE | Boolean | true | Não | Mostra ou não o botao no browser IE (recommendado true). |
showPopup | Boolean | true | Não | Se true, mostra o formulário quando o visitante passa o mouse sobre o botão (em desktop) ou clica no botão (em aparelhos móveis). |
size | String | 60px | Não | Tamanho do botão. Qualquer opção css é válida largura e altura. |
useFirstLastName | Boolean | true | Não | True para mostrar os campos nome e sobrenome. False para mostrar apenas o campo nome. |
zIndex | Integer | 10 | Não | Substitui o z-index da tag div do botão. Esta opção pode trazer o botão para frente, ou enviar para trás, de outro elemento na página html. |
Assista o vídeo sobre a criação e configuração do Botão WhatsApp
Neste vídeo do nosso canal do YouTube você pode ver o passo a passo que explica como criá-lo, instalá-lo no seu site WordPress, veja que o botão não é apenas para WordPress, ele pode ser instalado em qualquer site, e como fazer as configurações para deixá-lo com o padrão do seu site. Se você gostou, achou relevante para você, compartilhe o vídeo e inscreva-se no canal YouTube da MVMCloud.
Caso você tenha alguma dúvida, entre em contato conosco clicando no botão no rodapé desta página, estamos aqui para ajudá-lo.
Caso Você Tenha Dúvida
Se você tiver alguma dúvida sobre como instalar o botão entre em Contato Conosco. Teremos prazer em ajudá-lo da melhor forma possível.