Boost Website Engagement: Add a Free WhatsApp Chat Button

how-to

Published on September 20, 2023

Share on X

Share on Facebook

Share on Linkedin

In today's digital age, connecting with your website visitors has never been easier. One effective way to do this is by adding a WhatsApp chat button to your website. This allows users to initiate a conversation with you instantly, making it convenient for them to ask questions or seek assistance. In this guide, we'll walk you through the simple steps to add a WhatsApp chat button with a custom message to your website, all without any cost. Let's get started!

Step 1: Copy the free HTML Code

To add a WhatsApp chat button to your website, you'll need to insert a small snippet of HTML code. Here's the code you can use:

<div style="position: fixed; bottom: 20px; right: 20px; z-index: 100">
  <a
    href="https://wa.me/91xxxxxxxxxx?text=Hi."
    target="_blank"
    style="
      display: flex;
      width: 60px;
      height: 60px;
      background-color: #128c7e;
      border-radius: 50%;
      text-align: center;
      text-decoration: none;
      color: white;
      font-size: 32px;
      line-height: 60px;
      padding: 16px;
      align-items: center;
      justify-items: center;
    "
  >
    <svg
      width="auto"
      height="auto"
      viewBox="0 0 360 362"
      fill="none"
      xmlns="http://www.w3.org/2000/svg"
      xmlns:xlink="http://www.w3.org/1999/xlink"
    >
      <path
        fill-rule="evenodd"
        clip-rule="evenodd"
        d="M307.546 52.5655C273.709 18.685 228.706 0.0171895 180.756 0C81.951 0 1.53846 80.404 1.50408 179.235C1.48689 210.829 9.74646 241.667 25.4319 268.844L0 361.736L95.0236 336.811C121.203 351.096 150.683 358.616 180.679 358.625H180.756C279.544 358.625 359.966 278.212 360 179.381C360.017 131.483 341.392 86.4547 307.546 52.5741V52.5655ZM180.756 328.354H180.696C153.966 328.346 127.744 321.16 104.865 307.589L99.4242 304.358L43.034 319.149L58.0834 264.168L54.5423 258.53C39.6304 234.809 31.749 207.391 31.7662 179.244C31.8006 97.1036 98.6334 30.2707 180.817 30.2707C220.61 30.2879 258.015 45.8015 286.145 73.9665C314.276 102.123 329.755 139.562 329.738 179.364C329.703 261.513 262.871 328.346 180.756 328.346V328.354ZM262.475 216.777C257.997 214.534 235.978 203.704 231.869 202.209C227.761 200.713 224.779 199.966 221.796 204.452C218.814 208.939 210.228 219.029 207.615 222.011C205.002 225.002 202.389 225.372 197.911 223.128C193.434 220.885 179.003 216.158 161.891 200.902C148.578 189.024 139.587 174.362 136.975 169.875C134.362 165.389 136.7 162.965 138.934 160.739C140.945 158.728 143.412 155.505 145.655 152.892C147.899 150.279 148.638 148.406 150.133 145.423C151.629 142.432 150.881 139.82 149.764 137.576C148.646 135.333 139.691 113.287 135.952 104.323C132.316 95.5909 128.621 96.777 125.879 96.6309C123.266 96.5019 120.284 96.4762 117.293 96.4762C114.302 96.4762 109.454 97.5935 105.346 102.08C101.238 106.566 89.6691 117.404 89.6691 139.441C89.6691 161.478 105.716 182.785 107.959 185.776C110.202 188.767 139.544 234.001 184.469 253.408C195.153 258.023 203.498 260.782 210.004 262.845C220.731 266.257 230.494 265.776 238.212 264.624C246.816 263.335 264.71 253.786 268.44 243.326C272.17 232.866 272.17 223.893 271.053 222.028C269.936 220.163 266.945 219.037 262.467 216.794L262.475 216.777Z"
        fill="white"
      ></path>
    </svg>
  </a>
</div>

Step 2: Paste the Code into Your Website

Open the HTML file or content management system (CMS) of your website where you want to add the WhatsApp chat button. Find the place where you want the button to appear, and paste the code there. You can adjust the `position`, `bottom`, and `right` properties in the code to control the button's placement on your website.

Step 3: Customize the WhatsApp Number

In the HTML code, replace `91xxxxxxxxxx` with your actual WhatsApp phone number, including the country code. For example, if your WhatsApp number is from the United States, it would be something like `1yyyyyyyyyy`.

Step 4: Customize the Initial Message

The code also includes a default message, "Hi." You can customize this message to something more specific or welcoming. To do this, replace `Hi.` with your desired message in the `text` parameter of the `href` attribute.

Step 5: Save and Publish

After making these adjustments, save the changes to your website's HTML file or content. Once you've saved your changes, the WhatsApp chat button with your custom message will be visible to your website visitors.

That's it! You've successfully added a WhatsApp chat button with a custom message to your website, allowing your visitors to easily reach out to you with any inquiries. This simple and free addition can enhance user engagement and improve your website's user experience.

SEO Tip: To maximize the visibility of your WhatsApp chat button, consider adding relevant keywords related to your website's content, such as "customer support," "contact us," or "live chat." This can help improve your website's search engine optimization (SEO) and attract more organic traffic.

By following these straightforward steps, you can enhance your website's accessibility and engage with your audience in a more interactive and user-friendly manner. Happy chatting!