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.
Create your Button for WhatsApp and get stats, forms and more…
New video (Free WhatsApp button for Shopify).
New post (Free WhatsApp HTML button for Shopify).
Download HTML file with WhatsApp Button
This is a file with the HTML code you can use to create your landing page.
🐝 Available translations in
Download cool landing pages with WhatsApp Button
This template is ready to use with all the code together.
Download LinkTree clon with WhatsApp Button
If you need to create a Linktree clon with HTML optimized and super lightweight, this is your option. This linktree clon will help you get all the links you need with a superlight version HTML you can upload to your server.
Download Buy NOW single product landing page with WhatsApp Button
If you need to launch a campaign with a single product and a single check out page, you can use this easy to use template.
Download this HTML template with WhatsApp FORM.
Download Registration WhatsApp form landing page
If you need to capture users with an easy to use form that leads to WhatsApp you can use this HTML template to capture leads that will jump to your WhatsApp.
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
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>
Whatsapp Widget HTML
If you need to add a WhatsApp widget to your HTML page, you can use our code.
Add Whatsapp Live Chat code to HTML website
If you want to add a WhatsApp Widget to your website we can offer you different solutions.
If you have a WordPress Website you can use our free WhatsApp widget for WordPress.
If you have an Instagram Channel you can use our free tool to generate a link to your WhatsApp account.
If you have anything else, you can use our tool to create your WhatsApp Widget and monitor the activate in your account.
More articles about HTML buttons and WhatsApp
More solutions for specific CMS. You can use WhatsApp with your CMS. Drupal, Joomla, Prestashop, WordPress, PHP…
Thank You For Your Vote!
Sorry You have Already Voted!
