We will be using the website we created in a previous tutorial. Please clone the project from here.

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

<!-- 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

{/* 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

      /* 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