Brian Mwangi

Back to articles

Integrate WhatsApp into your website

-- 2 min read

An image of WhatsApp icon

Communication is a very important aspect in business. You should always make sure that your users and clients can easily reach you. WhatsApp has become the most popular way for people to communicate locally and globally. In this article we will learn how to integrate WhatsApp into your website for easier communication.

Implementation

I will be using Remix in the examples. If you're not familiar with Remix you can learn more about it here.

Integrating WhatsApp is very simple. We want the WhatsApp icon to always be visible in our website so we'll place the icon in the root.jsx file. The root.jsx file is used to render all the other routes in our app. This is a very simple root.jsx file:

// app/root.jsx

import {
  Links,
  LiveReload,
  Meta,
  Outlet,
  Scripts,
  ScrollRestoration,
} from "@remix-run/react";

export function Layout({ children }) {
  return (
    <html lang="en">
      <head>
        <meta charSet="utf-8" />
        <meta
          name="viewport"
          content="width=device-width, initial-scale=1"
        />
        <Meta />
        <Links />
      </head>
      <body>
        {/* children will be the root Component, ErrorBoundary, or HydrateFallback */}
        {children}
        <Scripts />
        <ScrollRestoration />
        <LiveReload />
      </body>
    </html>
  );
}

export default function App() {
  return <Outlet />;
}

First let's show the WhatsApp icon. The following code renders the icon at the bottom of the viewport.

// app/root.jsx

export function Layout({ children }) {
  return (
    <html lang="en">
      <head>
        <meta charSet="utf-8" />
        <meta
          name="viewport"
          content="width=device-width, initial-scale=1"
        />
        <Meta />
        <Links />
      </head>
      <body>
        {/* children will be the root Component, ErrorBoundary, or HydrateFallback */}
        {children}

  
        // WhatsApp icon
        <div className="fixed bottom-10 right-5 md:right-10">
              <a href={href} target="_blank" className="group">
                <img
                  src="/whatsapp.svg"
                  alt="WhatsApp icon"
                  loading="lazy"
                  className="w-6 h-6 md:w-8 md:h-8 group-hover:scale-105 transition-transform duration-300 ease-in-out "
                />
              </a>
        </div>
        <Scripts />
        <ScrollRestoration />
        <LiveReload />
      </body>
    </html>
  );
}

Now let's make it do something when clicked. We need to pass the url that contains the WhatsApp number that will be used. But we don't always want to open the native WhatsApp application. We only want to open the native application if the user is using a phone or tablet. Otherwise we want to open the web application.

To do that, we need a React state to store the url and a useEffect() hook to check for the user's device.

// app/root.jsx
import { useState, useEffect } from 'react';

export function Layout({ children }) {
  let [ href,setHref ] = useState('');

  useEffect(() => {
    // Check the user's device
    let isMobileDevice = /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent);
    let phoneNumber = '+254710162152';

    // If the device is a mobile phone or tablet, open the native app otherwise open the web application
    if (isMobileDevice) {
      setHref(`whatsapp://send?phone=${phoneNumber}`);
    } else {
      setHref(`https://web.whatsapp.com/send?phone=${phoneNumber}`)
    }
  },[]);
  
  return (
    <html lang="en">
      <head>
        <meta charSet="utf-8" />
        <meta
          name="viewport"
          content="width=device-width, initial-scale=1"
        />
        <Meta />
        <Links />
      </head>
      <body>
        {/* children will be the root Component, ErrorBoundary, or HydrateFallback */}
        {children}

  
        // WhatsApp icon
        <div className="fixed bottom-10 right-5 md:right-10">
              <a href={href} target="_blank" className="group">
                <img
                  src="/whatsapp.svg"
                  alt="WhatsApp icon"
                  loading="lazy"
                  className="w-6 h-6 md:w-8 md:h-8 group-hover:scale-105 transition-transform duration-300 ease-in-out "
                />
              </a>
        </div>
        <Scripts />
        <ScrollRestoration />
        <LiveReload />
      </body>
    </html>
  );
}

That's it! Now we have a working WhatApp integration.

WhatsApp icon