Add WhatsApp Chat To Your Website - React and HTML
Tags: react, whatsapp, chat, tutorial
Published: 2020-12-08 12:24:19

WhatsApp is now one of the world most used social media platform for communication. The fact that all you need is a mobile number, makes it so suitable.

## Jump to:
1. [React Website](#1)
2. [HTML Website](#2)
3. [Conclusion](#3)

Since it has become so acceptable, many people desire to have the chat on their website. In this tutorial, I will be showing you how to simply add WhatsApp Chat to your website. We will use a REACT website and an HTML website.

## REACT Website.
We will be using the website we created in a [previous tutorial](https://dev.to/ebereplenty/css-animation-without-css-aos-in-plain-js-and-react-4jfj). Please clone the project from [here](https://github.com/EBEREGIT/React-AOS-Tutorial/tree/react-aos-tut).

* Install the dependences with ``npm install``
* Run ``npm start``

Adding the WhatsApp chat will take just three (3) steps:
* First, Add the following font awesome link to the ``head`` in the ``index.html`` file

```javascript

<!-- font awesome -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">

```

Secondly, Add the following code to the ``App.js`` file just before the closing tag where we want it to be display

```javascript

{/* WhatsApp icon */}
      <a
        href="https://wa.me/2348100000000"
        class="whatsapp_float"
        target="_blank"
        rel="noopener noreferrer"
      >
        <i class="fa fa-whatsapp whatsapp-icon"></i>
      </a>

```
> Ensure to replace the mobile number *(2348100000000)* with yours or any number that is to be contacted from your website


*You should have a WhatsApp Icon at the bottom of the website*


* Finally, add the following CSS code to ``App.css``

```javascript

      /* for desktop */
      .whatsapp_float {
          position: fixed;
          width: 60px;
          height: 60px;
          bottom: 40px;
          right: 40px;
          background-color: #25d366;
          color: #FFF;
          border-radius: 50px;
          text-align: center;
          font-size: 30px;
          box-shadow: 2px 2px 3px #999;
          z-index: 100;
      }

      .whatsapp-icon {
          margin-top: 16px;
      }

      /* for mobile */
      @media screen and (max-width: 767px) {
          .whatsapp-icon {
              margin-top: 10px;
          }

          .whatsapp_float {
              width: 40px;
              height: 40px;
              bottom: 20px;
              right: 10px;
              font-size: 22px;
          }
      }

```

*This makes the icon look really like a WhatsApp icon for real. It will also make it sticky and visible at any point on that page*

All Codes [here](https://github.com/EBEREGIT/React-AOS-Tutorial/tree/whatsapp-icon)

Congratulations!!! Your visitors can now reach you from your REACT website. See More info in the [Conclusion](#3)

## HTML Website
We will be using the website we created in a [previous tutorial](https://dev.to/ebereplenty/css-animation-without-css-aos-in-plain-js-and-react-4jfj). Please clone the project from [here](https://github.com/EBEREGIT/JS-AOS-Tutorial/tree/js-aos-tut).

Adding the WhatsApp chat here will also take just three (3) steps:

* First, Add the following font awesome link to the ``head`` in the ``index.html`` file

```javascript

<!-- font awesome -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">

```

Secondly, Add the following code to the ``Index.html`` file just after the footer tag where we want it to be display

```javascript

{/* WhatsApp icon */}
      <a
        href="https://wa.me/2348100000000"
        class="whatsapp_float"
        target="_blank"
        rel="noopener noreferrer"
      >
        <i class="fa fa-whatsapp whatsapp-icon"></i>
      </a>

```

> Ensure to replace the mobile number *(2348100000000)* with yours or any number that is to be contacted from your website


*You should have a WhatsApp Icon at the bottom of the website*

* Finally, add the following CSS code to ``styles.css``

```javascript

      /* for desktop */
      .whatsapp_float {
          position: fixed;
          width: 60px;
          height: 60px;
          bottom: 40px;
          right: 40px;
          background-color: #25d366;
          color: #FFF;
          border-radius: 50px;
          text-align: center;
          font-size: 30px;
          box-shadow: 2px 2px 3px #999;
          z-index: 100;
      }

      .whatsapp-icon {
          margin-top: 16px;
      }

      /* for mobile */
      @media screen and (max-width: 767px) {
          .whatsapp-icon {
              margin-top: 10px;
          }

          .whatsapp_float {
              width: 40px;
              height: 40px;
              bottom: 20px;
              right: 10px;
              font-size: 22px;
          }
      }

```

*This makes the icon look really like a WhatsApp icon for real. It will also make it sticky and visible at any point on that page*

All Codes are [here](https://github.com/EBEREGIT/JS-AOS-Tutorial/tree/whatsapp-chat)

Live Website [here](https://eberegit.github.io/JS-AOS-Tutorial/)

The website now looks like this:

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/nr1is4m9k5j9ik96lr4p.JPG)

That is it!!! You just improved the experience on your website...

<a name="3"></a>
## Conclusion

We have seen how to add WhatsApp Chat to a website in just 3 simple steps. First, we add the link to font awesome, second, we add the WhatsApp icon linked to WhatsApp chat and finally, style it to look appealing and stay sticky on the website no matter where the user is.

The experience is better on mobile device because on mobile device, your users will be redirected to their WhatsApp application and the chat will be initiated. On desktop however, will be redirected to download the WhatsApp application.

Keep making your website experience awesome. 

Thank you for reading!!!