• Techblog369, India
  • March 27, 2023

How To Configure A Sendinblue SMTP Relay in Postfix?

Fix Email Issues in CyberPanel with SMTP Relay Setup Free Method. First Create a email using your Cyberpanel Under Emai Tab Create Email Second go to the SSL tab and click …

Create a simple password strength indicator with JavaScript

You’ve probably seen many examples of password strength indicators around the web. They let users know the password they’re using is weak and indicate how the strength changes when it’s modified. …

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 (
               href="https://wa.me/91+930000077/?text=Welcome to Techblog369 Team"
               body="hello world"
               rel="noopener noreferrer"
               <i class="fa fa-whatsapp whatsapp-icon"></i>

export default Whatsapp

Now we add some CSS for the Whatsapp button


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


import Whatsapp from "./components/Whatsapp";

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



Leave a Reply

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