If you want to create a pure HTML button for your HTML website, this is the best code you can use. If you have an HTML website, or PHP… you need to add your code directly to your website. With this code you can add a button for your WhatsApp number directly in your website.
The HTML Code for your WhatsApp Button
<div onclick=”location.href=’https://api.whatsapp.com/send?phone=PHONENUMBERHERE&text=Hi,%2we%20use%20ToChat.Be’;” align=”center” class=”whatsappbutton”><i class=”fa fa-whatsapp fa-2x”></i><span>Contact Us</span></div>
Obviously place your own phone number at “PHONENUMBERHERE”.
This is the CSS for your Button >
/* WhatsApp Button */
.whatsappbutton { background-color: #7ACC72; /* Green */ border: none; color: white; text-align: center; text-decoration: none; font-size: 16px; border-radius: 20px; padding: 10px 20px; margin-top: 10px !important; width: fit-content; margin: auto; cursor: pointer }
.whatsappbutton span { vertical-align: text-bottom !important; }
.fa-whatsapp { margin-right: 10px; }
Or, you can create your own Short Url WhatsApp Button
Download HTML file with WhatsApp Button
This is a file with the HTML code you can use to create your landing page.
A better version of the Link to WhatsApp
You can create a better version of the Link to WhatsApp using our service to create link to WhatsApp.
With this link you can manage your stats and add your welcome message with our easy to use editor. Coding directly is always risky and your link can stop working.
Also we give you a short URL with a nicer format. Your URL will be like: https://chatwith.io/s/5f687a450cf8a
You can use this link to WhatsApp in the code we shared before:
<div onclick=”location.href=’https://chatwith.io/s/5f687a450cf8a’;” align=”center” class=”whatsappbutton”><i class=”fa fa-whatsapp fa-2x”></i><span>Contact Us</span></div>
No responses yet