whatsapp button html

Pure HTML & CSS Code to create a Link to WhatsApp

whatsapp link html

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.

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&amp;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…

By César Martín (ToChat.be)

We develop WhatsApp solutions, WhatsApp API and WhatsApp Widgets. Please contact us for more information. We are here to help you.

4 comments

  1. Indihome Jakarta Timur saat ini ada dengan service pasang jaringan Indihome lewat cara online, anda tak perlu ada ke kantor indihome untuk lakukan register penempatan indihome.
    Ini adalah wujud service digital paling depan dari Indihome
    Jakarta Timur untuk meringankan orang Jakarta Timur yang ingin nikmati jaringan internet cepat indihome.
    Dengan gunakan Tehnologi Fiber Optik, kami tawarkan sejumlah service paket internet seperti Singgel Play, Dual Play juga
    Triple Play. Tidak hanya itu kami tawarkan sejumlah Add
    On Favorit buat anda cicipi sama keluarga.

  2. Indihome Jakarta Timur saat ini ada dengan service pasang jaringan Indihome lewat cara online, anda tak butuh
    hadir ke kantor indihome buat mengerjakan pendaftaran penempatan indihome.
    Ini adalah wujud pelayanan digital paling depan dari Indihome Jakarta
    Timur untuk mempermudah penduduk Jakarta Timur yang pengin nikmati jaringan internet cepat indihome.

    Dengan gunakan Technologi Fiber Optik, kami menjajakan beberapa pelayanan paket internet seperti Singgel Play,
    Dual Play juga Triple Play. Terkecuali itu kami
    tawarkan beberapa Add On Teratas buat anda cicipi dengan keluarga.

  3. That is a great tip particularly to those new to the blogosphere.
    Brief but very accurate info… Thank you for sharing this one.
    A must read article!

Leave a comment

Your email address will not be published. Required fields are marked *