Configure Free WhatsApp Button

What is the Floating WhatsApp Button?

Increase contact with your customer

We've developed a free floating button that you can place on your website. It allows your website visitors to contact you or your service team via WhatsApp, if the visitor is using a cell phone or tablet the WhatsApp app opens automatically, if using a desktop WhatsApp Web is open for start the conversation. 

It is also a contact capture button, when clicking on the button a form is opened for the visitor to provide his first name, last name, email and WhastApp number, this data is sent to the email you registered when generated the button. It increases the chances of success of your WhatsApp marketing strategies.

See below what the WhatsApp button looks like with the capture form open.

CREATION AND INSTALLATION

If you haven't generated the button yet, go to the Create Free WhatsApp Button page to create your own, it's free.

On the page above you will use a tool to create the button and you will be able to customize the characteristics and behavior of the button. At the end, a javascript code will be created to be inserted in your website. You will also receive an email with this code and information on how to install it.

IMPORTANT: When you generate the first button we create a registration for you in our system and send a second email asking you to confirm your registration. The button will only appear on your website, even after it has been installed, after you confirm your registration.

The generated code looks like the one below, but note that this is just an example, yours will contain the data you entered when you created it.

This code must be inserted between the <head> and </head> tags of your website:

<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>

This code was generated when creating the button and should be inserted immediately before the </body> tag of the page you want the button to appear on. If you want it to appear on every page of the site, you should normally insert it in the footer section:

    
    <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>

The code above can be modified directly, this allows you to modify the look of the form and the behavior of the button. For example, if you want the form title to be "Welcome to the Company", change the headerTitle option in the code above to headerTitle: "Welcome to the Company". All properties can be modified in this way. Further on, all the properties of the button will be explained.

How to Configure the Button

Configuring the appearance of the contact capture form and the behavior of the button, for example, whether the form should open or not, can be done by modifying each of the properties in the code above. You can customize texts, colors and even replace the WhatsApp button image with one of your choice. 

In addition to the visual, it is possible to modify the behavior of the button using its properties. It is possible to use the button only as a referral for the conversation on WhatsApp, avoiding the opening of the form to capture the visitor's data. You can also configure that the first name, last name, email and phone number fields of WhatsApp are obligatorily filled in by visitors before they are forwarded to the conversation on WhatsApp.

Note that the MVMCloud tool only puts the main properties in the code. The button has many others that you will see below that can be added to the code as you need it.

List of properties

Property Type Default value Required Description
autoOpenTimeout Integer 0 No Sets a time in milliseconds to automatically open the form. Zero means not opening the form automatically.
backgroundColor String #25D366 No Button background color.
btnSendColor String #128C7E No Color of the form submit button.
btnSendColorHover String #16b7a4 No Color of the form's submit button when the visitor hovers over it.
btnSendText String Send Your Message No Text of the submit button on the form.
buttonImage String Incorporada No External image to replace the button's inline image. It must be `img` or `svg` for it to be displayed without problem.
buttonOffset String 0 No Shifts the position of the button on the screen, for example the value '30px' shifts the position of the button 30px from its default position. Negative values ​​are also accepted, eg. '-30px'.
cid String   Yes Customer ID. This text identifies your button on our server. It is generated at the creation of the button, without this information the button will not be shown.
embedResources Boolean true No Embeds the necessary css style file for this library. If set to true the mvm-wapp-3.1.1.min.css file is automatically loaded from cdn.mvmcloud.net. If set to false the following code must be inserted between your site's <head> and </head> tags: <link rel="stylesheet" href="https://cdn.mvmcloud.net/mvm-wapp- 3.1.1.min.css"/>.
emailLabel String Enter Your Email No Label for email field.
errorMsg String Please, fill the required fields No Error message to be shown if the visitor leaves the form fields blank. This message will only be shown if the requiredData property is set to true and the visitor does not fill in the fields.
firstNameLabel String Enter Your First Name No Label for first name field.
lastNameLabel String Enter Your Last Name No Label for last name field.
headerColor String #128C7E No Background color of the form's title bar.
headerTitle String WhatsApp Chat Não Text that will be shown in the form's title bar.
message String   No Message to be sent. If showPopup is true, the message field will be filled with this text.
messageLabel String Enter Your Message Here No Label for the message field.
nameLabel String Enter Your Name No Label for the name field.
phone String   Yes Number of WhatsApp that will receive the message, number in international format.
phoneHint String phone number like: 14081234567 No Tip for the phone field.
phoneLabel String Enter Your Name No Label for the phone field.
position String left No Position of the button on the screen. `'left'` | `'right'`.
popupMessage String Please, enter your details No Welcome message to your website visitor.
requiredData Boolean true No True to make filling in visitor details mandatory (name, first_name, last_name, email and phone).
showOnIE Boolean true No Show or not the button in IE browser (recommended true).
showPopup Boolean true No If true, show the form when the visitor hovers over the button (on desktop) or clicks on the button (on mobile devices).
size String 60px No Button size. Any css option is valid width and height.
useFirstLastName Boolean true No True to show first and last name fields. False to show only the name field.
zIndex Integer 10 No Replaces the z-index of the button's div tag. This option can bring the button to the front, or send to the back, of another element in the html page.

Watch the video about creating and configuring the WhatsApp Button

In this video from our YouTube channel you can see the walkthrough that explains how to create it, install it on your WordPress site, see that the button is not just for WordPress, it can be installed on any site, and how to do it the settings to leave it the default for your site. If you liked it, found it relevant to you, share the video and subscribe to MVMCloud's YouTube channel.

If you have any questions, please contact us by clicking the button at the bottom of this page, we are here to help.

WATCH THE VIDEO AND SEE HOW TO INSTALL AND CONFIGURE THE BUTTON

In Case You Have Doubt

If you have any questions about how to install the button, please Contact Us. We will be happy to help you in the best possible way.