Configure Free WhatsApp Button
6 Steps To Start Your Online Business
Download the 100% Free E-book!
And Receive In Your E-mail.
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.
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:
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:
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
|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.
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.