برای پیاده سازی تماس با واتساپ می توانید از کامپوننت آماده react-whatsapp-floating-button استفاده کنید.

با دستور زیر نصبش کنید:

npm install @carlos8a/react-whatsapp-floating-button

بصورت زیر هم می توانید از آن استفاده کنید:

import { FloatingWhatsApp } from '@carlos8a/react-whatsapp-floating-button';

const App = () => {
  return (
    <div>
      <FloatingWhatsApp
        phoneNumber='5215540000000' // Required
        accountName='Carlos Ochoa' // Optional
        avatar='/images/avatar.webp' // Optional
        initialMessageByServer='Hi there! How can I assist you?' // Optional
        initialMessageByClient='Hello! I found your contact on your website. I would like to chat with you about...' // Optional
        statusMessage='Available' // Optional
        startChatText='Start chat with us' // Optional
        tooltipText='Need help? Click to chat!' // Optional
        allowEsc={true} // Optional
        // Explore all available props below
      />
    </div>
  );
};

export default App;

پارامترهای مختلفش را در لینک بالا ببینید.