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.

Criar botão WhatsApp Gratuito

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.

Assista o vídeo e veja como instalar e configurar o botão

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.