DEV Community

Cover image for How I Added a Pre-Filled WhatsApp Button to Every Client Website in Delhi - With Code
Meraj Ahmed
Meraj Ahmed

Posted on

How I Added a Pre-Filled WhatsApp Button to Every Client Website in Delhi - With Code

#webdev #ai #website #wordpress

How to Add a Pre-Filled WhatsApp Button to a Website with HTML, JavaScript & React

If you build websites for businesses in India, you've probably noticed something:

Many customers would rather send a WhatsApp message than fill out a contact form.

For local businesses, especially service-based businesses, WhatsApp can be a much more natural conversion channel than asking someone to fill in their name, email address, phone number, and a long enquiry form.

When I build websites for clients in Delhi and across India, one simple feature I often add is a WhatsApp click-to-chat button with a pre-filled message.

The implementation is surprisingly simple.

You don't need a WhatsApp API, a complicated backend, or an npm package.

You can do it with a normal link and a little URL encoding.

Here's how.

The simplest WhatsApp button

A WhatsApp click-to-chat URL follows this structure:

https://wa.me/PHONE_NUMBER?text=YOUR_ENCODED_MESSAGE
Enter fullscreen mode Exit fullscreen mode

For example:

<a
  href="https://wa.me/919876543210?text=Hi%2C%20I%20found%20your%20website%20and%20would%20like%20to%20know%20more%20about%20your%20services."
  target="_blank"
  rel="noopener noreferrer"
>
  WhatsApp Us
</a>
Enter fullscreen mode Exit fullscreen mode

That's enough to create a basic WhatsApp CTA.

When a visitor clicks the link, WhatsApp opens with the specified phone number and the pre-filled message.

Important: format the phone number correctly

The phone number should be in international format.

Don't include:

  • +
  • spaces
  • brackets
  • hyphens

For example:

+91 98765 43210
Enter fullscreen mode Exit fullscreen mode

becomes:

919876543210
Enter fullscreen mode Exit fullscreen mode

So the final URL becomes:

https://wa.me/919876543210
Enter fullscreen mode Exit fullscreen mode

Why use a pre-filled message?

A generic button might say:

WhatsApp Us

That's fine, but you can reduce friction even further by giving the visitor a starting message.

For example:

Hi, I found your website and would like to know more about your website development services.
Enter fullscreen mode Exit fullscreen mode

For a real estate website:

Hi, I found this property on your website and would like to know more about it.
Enter fullscreen mode Exit fullscreen mode

For a salon:

Hi, I'd like to book an appointment. Could you please share your available times?
Enter fullscreen mode Exit fullscreen mode

For a restaurant:

Hi, I'd like to know more about today's menu and availability.
Enter fullscreen mode Exit fullscreen mode

The visitor can still edit the message before sending it.

The purpose isn't to automate the entire conversation.

The purpose is to make starting the conversation easier.

Don't manually encode the message

This is where JavaScript becomes useful.

A WhatsApp URL cannot safely contain every character exactly as it appears in a normal sentence.

For example:

Hi, I found your website!
Enter fullscreen mode Exit fullscreen mode

needs URL encoding before being placed into the text parameter.

Instead of manually converting spaces and special characters, use JavaScript's built-in:

encodeURIComponent()
Enter fullscreen mode Exit fullscreen mode

For example:

const phoneNumber = "919876543210";

const message =
  "Hi, I found your website and would like to know more about your services.";

const whatsappUrl =
  `https://wa.me/${phoneNumber}?text=${encodeURIComponent(message)}`;

console.log(whatsappUrl);
Enter fullscreen mode Exit fullscreen mode

This is much cleaner and less error-prone than manually creating an encoded string.

Create a reusable WhatsApp URL function

If you're working on multiple websites or multiple WhatsApp buttons, you can turn this into a small reusable function.

function createWhatsAppUrl(phoneNumber, message) {
  return `https://wa.me/${phoneNumber}?text=${encodeURIComponent(message)}`;
}

const url = createWhatsAppUrl(
  "919876543210",
  "Hi, I found your website and would like to know more about your services."
);

console.log(url);
Enter fullscreen mode Exit fullscreen mode

Now you can reuse the same function anywhere in your application.

For example:

const salesUrl = createWhatsAppUrl(
  "919876543210",
  "Hi, I'd like to get a quote for your services."
);

const supportUrl = createWhatsAppUrl(
  "919876543210",
  "Hi, I need help with my existing service."
);
Enter fullscreen mode Exit fullscreen mode

This keeps the implementation simple and maintainable.

Adding WhatsApp to a React website

If you're building with React, you don't need a large library just to create a WhatsApp button.

A simple component is enough:

const phoneNumber = "919876543210";

const message =
  "Hi, I found your website and would like to know more about your services.";

const whatsappUrl =
  `https://wa.me/${phoneNumber}?text=${encodeURIComponent(message)}`;

export default function WhatsAppButton() {
  return (
    <a
      href={whatsappUrl}
      target="_blank"
      rel="noopener noreferrer"
      aria-label="Chat with us on WhatsApp"
    >
      WhatsApp Us
    </a>
  );
}
Enter fullscreen mode Exit fullscreen mode

One advantage of using a normal <a> element is that the browser already understands it as a link.

You don't need JavaScript state, an onClick handler, or a client-side component just to open WhatsApp.

For a static CTA, a normal link is often the better solution.

A reusable React component

If you're building several client websites, I'd make the component configurable.

export default function WhatsAppButton({
  phoneNumber,
  message = "Hi, I found your website and would like to know more about your services.",
  children = "WhatsApp Us",
}) {
  const whatsappUrl =
    `https://wa.me/${phoneNumber}?text=${encodeURIComponent(message)}`;

  return (
    <a
      href={whatsappUrl}
      target="_blank"
      rel="noopener noreferrer"
      aria-label="Chat with us on WhatsApp"
    >
      {children}
    </a>
  );
}
Enter fullscreen mode Exit fullscreen mode

Now you can reuse it:

<WhatsAppButton
  phoneNumber="919876543210"
  message="Hi, I'd like to get a quote for a new website."
/>
Enter fullscreen mode Exit fullscreen mode

Or:

<WhatsAppButton
  phoneNumber="919876543210"
  message="Hi, I'd like to discuss your SEO services."
>
  Talk to us on WhatsApp
</WhatsAppButton>
Enter fullscreen mode Exit fullscreen mode

This approach makes the component useful across different pages and projects.

Adding it to a Next.js website

The same approach works with Next.js.

For example:

export default function ContactSection() {
  const phoneNumber = "919876543210";

  const message =
    "Hi, I found your website and would like to discuss my project.";

  const whatsappUrl =
    `https://wa.me/${phoneNumber}?text=${encodeURIComponent(message)}`;

  return (
    <section>
      <h2>Have a project in mind?</h2>

      <p>
        Send us a message on WhatsApp and let's discuss it.
      </p>

      <a
        href={whatsappUrl}
        target="_blank"
        rel="noopener noreferrer"
        aria-label="Discuss your project on WhatsApp"
      >
        Discuss Your Project
      </a>
    </section>
  );
}
Enter fullscreen mode Exit fullscreen mode

If the phone number and message are static, there's no reason to turn this into a client component.

Keep it simple.

Make the message different on every page

This is where a simple WhatsApp button can become much more useful for lead generation.

You don't necessarily want the same message on every page.

For example, imagine a website development agency with these pages:

/services/website-development
/services/seo
/services/ecommerce
/contact
Enter fullscreen mode Exit fullscreen mode

The WhatsApp message can change depending on the page.

Website development page 

const message =
  "Hi, I found your website development service and would like to discuss my project.";
Enter fullscreen mode Exit fullscreen mode

SEO page 

const message =
  "Hi, I found your SEO service and would like to know more about your packages.";
Enter fullscreen mode Exit fullscreen mode

Ecommerce page 

const message =
  "Hi, I need an ecommerce website and would like to discuss my requirements.";
Enter fullscreen mode Exit fullscreen mode

Contact page 

const message =
  "Hi, I found your website and would like to get in touch.";
Enter fullscreen mode Exit fullscreen mode

This gives the business more context when the enquiry arrives.

Instead of receiving:

Hi

they may receive:

Hi, I found your website development service and would like to discuss my project.

That's a much better starting point.

Generate the message dynamically

You can also generate the message based on the current page or service.

For example:

const serviceName = "Website Design & Development";

const message =
  `Hi, I found your ${serviceName} page and would like to discuss my project.`;

const whatsappUrl =
  `https://wa.me/${phoneNumber}?text=${encodeURIComponent(message)}`;
Enter fullscreen mode Exit fullscreen mode

This can be particularly useful for websites with many services.

You could even generate different messages for products, properties, appointments, courses, or other types of content.

Add a floating WhatsApp button

For local businesses, a floating WhatsApp button can be useful because visitors don't always want to scroll back to the top or search for the contact section.

A basic React implementation could look like this:

export default function FloatingWhatsApp() {
  const phoneNumber = "919876543210";

  const message =
    "Hi, I found your website and would like to know more about your services.";

  const whatsappUrl =
    `https://wa.me/${phoneNumber}?text=${encodeURIComponent(message)}`;

  return (
    <a
      href={whatsappUrl}
      target="_blank"
      rel="noopener noreferrer"
      aria-label="Chat with us on WhatsApp"
      className="fixed bottom-5 right-5 z-50 rounded-full px-5 py-3 shadow-lg"
    >
      WhatsApp
    </a>
  );
}
Enter fullscreen mode Exit fullscreen mode

If you're using Tailwind CSS, you can style it to match the rest of the website.

But don't just place it anywhere.

The button should not cover important content, navigation, cookie notices, or other fixed elements.

Mobile UX matters

Most WhatsApp conversations are likely to happen on mobile, so mobile usability should be considered from the beginning.

A WhatsApp CTA should be:

  • easy to tap
  • visually recognizable
  • large enough for touch interaction
  • positioned without covering content
  • accessible to keyboard and screen-reader users
  • tested on real mobile devices

Don't make the button so small that someone has to tap it multiple times.

Also avoid placing multiple floating buttons on top of each other.

For example:

WhatsApp
Call
Back to top
Cookie button
Chat widget
Enter fullscreen mode Exit fullscreen mode

can quickly turn into a mess on a small screen.

A clean interface is usually better.

WhatsApp button vs contact form

I don't recommend automatically replacing contact forms with WhatsApp.

Different visitors have different preferences.

A good business website can provide several ways to contact the company:

  • WhatsApp
  • phone
  • email
  • contact form
  • booking system
  • location/map

WhatsApp is particularly useful when a business wants fast conversations with potential customers.

A contact form can be better when the business needs structured information.

For example, a web development agency might ask for:

Name
Email
Business
Website
Budget
Project requirements
Enter fullscreen mode Exit fullscreen mode

A WhatsApp conversation may be better for a simple enquiry:

Hi, I need a website for my business.
Enter fullscreen mode Exit fullscreen mode

Both can have a place on the same website.

Don't confuse a WhatsApp link with the WhatsApp Business API

This is another important distinction.

Adding a:

https://wa.me/
Enter fullscreen mode Exit fullscreen mode

link is not the same thing as integrating the WhatsApp Business Platform/API.

A click-to-chat link simply helps a visitor start a conversation.

You don't need a backend, database, API credentials, or a WhatsApp API integration for that basic functionality.

The architecture can be as simple as:

Website
   ↓
wa.me link
   ↓
WhatsApp
   ↓
Customer conversation
Enter fullscreen mode Exit fullscreen mode

A proper API integration is a different project.

You might need that when building:

  • automated messaging
  • transactional notifications
  • CRM integrations
  • customer support systems
  • message templates
  • team inboxes
  • automated workflows

Don't build an API-based system when all the client wants is a button.

Track WhatsApp clicks

If you're building a lead-generation website, you should also consider tracking the button.

Otherwise, you may know that the website receives visitors but have no idea how many people are actually clicking the WhatsApp CTA.

With Google Analytics 4, you could track an event such as:

gtag("event", "whatsapp_click", {
  page_location: window.location.href,
});
Enter fullscreen mode Exit fullscreen mode

The exact implementation depends on how analytics is configured on your website.

The important idea is to measure the action.

You can then think about the funnel as:

Google search
      ↓
Website visitor
      ↓
Service page
      ↓
WhatsApp click
      ↓
Conversation
      ↓
Qualified enquiry
      ↓
Customer
Enter fullscreen mode Exit fullscreen mode

This is much more useful than looking only at page views.

Track which page generated the click

You can make the tracking even more useful by including information about the page or service.

For example:

gtag("event", "whatsapp_click", {
  page_location: window.location.href,
  service: "website-development",
});
Enter fullscreen mode Exit fullscreen mode

Then you can compare which pages generate the most WhatsApp interactions.

You might discover that:

Website Development → 42 clicks
SEO → 18 clicks
Ecommerce → 7 clicks
About → 2 clicks
Enter fullscreen mode Exit fullscreen mode

That information can help you improve the site's conversion strategy.

One implementation mistake I see frequently

I've seen developers build unnecessarily complicated systems for a feature that is basically just a link.

For example:

Website
   ↓
Custom API
   ↓
Backend
   ↓
Database
   ↓
WhatsApp integration
Enter fullscreen mode Exit fullscreen mode

For a simple click-to-chat button, you generally don't need any of that.

You can simply have:

Website
   ↓
wa.me
   ↓
WhatsApp
Enter fullscreen mode Exit fullscreen mode

Keep the architecture proportional to the problem.

If the client later needs automated messaging, CRM integration, lead management, team inboxes, or other workflows, then you can evaluate a proper API-based solution.

Accessibility considerations

A good CTA shouldn't only look good.

It should also be understandable to users who rely on assistive technologies.

For example:

<a
  href="https://wa.me/919876543210"
  target="_blank"
  rel="noopener noreferrer"
  aria-label="Chat with us on WhatsApp"
>
  WhatsApp Us
</a>
Enter fullscreen mode Exit fullscreen mode

The aria-label provides additional context for screen-reader users when the visible text isn't sufficiently descriptive.

Also make sure that:

  • the button has sufficient contrast
  • keyboard users can reach it
  • the focus state is visible
  • the clickable area is large enough
  • the CTA doesn't rely only on color

Accessibility should be part of the implementation rather than something added later.

Security and privacy considerations

A WhatsApp link itself is simple, but remember that the phone number is publicly exposed in the page source.

For a business website, that's usually expected.

Don't put private phone numbers into publicly accessible WhatsApp links.

If a client doesn't want their personal number exposed, they should use an appropriate business number instead.

Also avoid putting sensitive customer information into pre-filled messages.

For example, don't automatically construct messages containing private information that shouldn't be visible in a URL.

Keep the message generic and let the customer provide the details themselves when appropriate.

Test the actual user journey

Before delivering the website, test the complete flow.

Don't just check whether the link looks correct.

Test it on:

  1. Desktop
  2. Android
  3. iPhone
  4. Different browsers
  5. WhatsApp installed
  6. WhatsApp Web where applicable

Click the button and verify:

  • the correct phone number opens
  • the correct message appears
  • special characters work
  • spaces work
  • punctuation works
  • the link opens in the expected way
  • the button doesn't cover other mobile UI

A five-minute real-device test can prevent a surprisingly embarrassing client issue.

A production-ready simple implementation

If you just need a straightforward version, this is the implementation I'd start with:

<a
  href="https://wa.me/919876543210?text=Hi%2C%20I%20found%20your%20website%20and%20would%20like%20to%20know%20more%20about%20your%20services."
  target="_blank"
  rel="noopener noreferrer"
  aria-label="Chat with us on WhatsApp"
>
  WhatsApp Us
</a>
Enter fullscreen mode Exit fullscreen mode

And if the message needs to be generated dynamically:

const phoneNumber = "919876543210";

const message =
  "Hi, I found your website and would like to know more about your services.";

const whatsappUrl =
  `https://wa.me/${phoneNumber}?text=${encodeURIComponent(message)}`;
Enter fullscreen mode Exit fullscreen mode

That's really all you need for a basic WhatsApp click-to-chat implementation.

What I use on client websites

For local businesses, my basic setup is usually:

Fast website
↓
Clear service information
↓
Strong CTA
↓
WhatsApp click-to-chat
↓
Pre-filled enquiry
↓
Business conversation




The WhatsApp button is only one part of the conversion system.

A website still needs:

* useful content
* fast loading times
* mobile usability
* clear service pages
* trust signals
* good technical SEO
* strong calls to action
* analytics
* an easy way to contact the business

For businesses looking for a **website design and development service in Delhi NCR**, I work on websites that combine these elements with features such as WhatsApp CTAs, lead-generation forms, booking functionality, SEO-ready development, and custom functionality.

You can learn more about the approach here:

**https://www.smarterdigi.com/services/website-design-development**

## Final thoughts

The interesting thing about web development is that useful solutions don't always require complicated technology.

A pre-filled WhatsApp button is a good example.

The implementation itself is only a few lines of HTML or JavaScript.

The real work is deciding:

* where the CTA should appear
* what message should be pre-filled
* how it should behave on mobile
* how the interaction should be tracked
* how it fits into the site's overall conversion journey

For an Indian local business, those details can matter much more than adding another JavaScript library.

Sometimes the best implementation is simply the one that removes one unnecessary step between a potential customer and the business.
Enter fullscreen mode Exit fullscreen mode

Top comments (0)