In this article, I am going to show how to integrate Whatsapp into ReactJs App

How to integrate Whatsapp in ReactJs App.

Create React Project
npx create-react-app you-app
Make a folder name components under the src root
Make a file named Whatsapp.js or you can give any name

Paste the below code

import React from 'react'

const Whatsapp = ()=> {
   return (
       <div>
           <a
               href="https://wa.me/91+930000077/?text=Welcome to Techblog369 Team"
               class="whatsapp_float"
               target="_blank"
               body="hello world"
               rel="noopener noreferrer"
           >
               <i class="fa fa-whatsapp whatsapp-icon"></i>
           </a>
       </div>
   )
}

export default Whatsapp

Now we add some CSS for the Whatsapp button

Index.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;
         }
     }

Now import Whatsapp to App.js file below the footer section

App.js

import Whatsapp from "./components/Whatsapp";

  <div className="pages">
       <Switch>
         <Route exact path="/" component={Home} />
         <Redirect to="/" />
       </Switch>
       <Footer />
       <Whatsapp />
  </div>