A website where the phone number is just plain text forces the customer to copy the number, open WhatsApp, save it, and then send a message. Every extra step means someone who gives up. A direct chat link turns all of that into a single click.

This article shows the structure of this link, how to add a prefilled message, and how to build a simple button on your site. It assumes your work number is active on WhatsApp Business, though the link itself works with regular WhatsApp too.

A direct chat link looks like this:

Bash
https://wa.me/15551234567

Number rules:

  • Write the country code first (for example 1 for the US or Canada, 44 for the UK, 971 for the UAE).
  • Remove the leading zero from the mobile number.
  • Don't use a plus sign, parentheses, dashes or spaces.

So a number written as +1 555 123 4567 becomes 15551234567. When the link is opened, the chat with that number opens in WhatsApp and the customer only has to press send.

Adding a prefilled message#

You can put some text in the message box in advance so the customer doesn't have to start from scratch:

Bash
https://wa.me/15551234567?text=Hello%2C%20I%20have%20a%20question

The part after text= is the message, encoded in URL format. Writing these strings by hand is error-prone; it is better to generate them with a tool or code, like the example below.

What message should you write#

The prefilled message should help you know where the customer came from and what they want. For a product page, for example, you can put that product's name in the message:

Prompt
Hello, I have a question about the product "Product name".

That way, when the message arrives, you don't need to ask "Which product?"

A safe shortcode in WordPress#

If your site runs WordPress, you can build a small shortcode that displays a WhatsApp button without a plugin. Put the code in a simple plugin or in the child theme's functions.php file:

PHP
<?php
add_shortcode( 'wa_chat', function ( $atts ) {
    $atts = shortcode_atts(
        array(
            'phone' => '15551234567',
            'text'  => 'Hello, I have a question.',
            'label' => 'Chat on WhatsApp',
        ),
        $atts,
        'wa_chat'
    );

    // Keep digits only for the phone number
    $phone = preg_replace( '/\D+/', '', $atts['phone'] );
    if ( '' === $phone ) {
        return '';
    }

    $url = 'https://wa.me/' . $phone . '?text=' . rawurlencode( $atts['text'] );

    return sprintf(
        '<a class="wa-chat-btn" href="%s" target="_blank" rel="noopener noreferrer">%s</a>',
        esc_url( $url ),
        esc_html( $atts['label'] )
    );
} );

Notes:

  • preg_replace keeps only digits in the number, so unwanted input is removed.
  • The text is encoded with rawurlencode so spaces and non-Latin characters are not corrupted.
  • esc_url and esc_html make the output safe.
  • rel="noopener noreferrer" is for a link that opens in a new tab.

Using it on a page or post:

Bash
[wa_chat phone="15551234567" text="Hello, I have a question about this page." label="Ask on WhatsApp"]

For styling, write a .wa-chat-btn class in your theme's CSS. A good button is large and legible, and uses WhatsApp's familiar green.

Where to place it#

The button's position matters more than its looks:

  1. Product page: next to the buy button, with a message that includes the product name.
  2. Contact page: where the customer is looking for a way to reach you.
  3. Top or bottom of the site: a small fixed button, not an intrusive pop-up.
  4. Email and SMS: put the chat link in your signature.
  5. Business cards and packaging: a QR code of the same link.

Avoid full-screen pop-ups for WhatsApp; they are annoying and hurt the mobile experience.

Privacy and trust notes#

  • If the number is your personal one, know that every visitor can see it. For a business it is better to have a separate work number.
  • If you put the number in your site's code, number-scraping bots can find it too. This happens on every website; the answer is suitable automatic messages and care with unsolicited messages.
  • Next to the button, state your response hours. With a greeting and away message, the customer knows what to expect outside business hours.
  • Remember that WhatsApp conversations are stored outside your website. Don't ask customers for sensitive information such as passwords or card numbers.

Check these before you publish:

  • Open the link on a phone and see that the right chat opens.
  • The prefilled text appears correctly in the message box with no broken characters.
  • It also opens on a computer.
  • If your site is multilingual, keep a separate text for each language.

If you have several channels and want to know which one a customer came from, give each link a different phrase in the prefilled message, for example "From the website" or "From Instagram". This is the simplest way to track. For a fuller picture of WhatsApp tools, visit the complete WhatsApp guide.

Simple tracking of the customer source#

If you put the WhatsApp link in several places, such as your website, Instagram and a business card, knowing which route a customer came from is a big help. The simplest way is to use slightly different prefilled text in each link: "Hi, I'm messaging from the website", "Hi, I came from Instagram" and so on. When the message arrives, the first sentence shows the source, and you no longer need to ask the customer where they saw you.

Common mistakes#

  • Putting the number in the link with a leading zero or plus sign; the result is a broken link.
  • Forgetting to encode the text; the message appears unreadable or cut off in the chat box.
  • A button that overlaps content or the buy button and annoys people on mobile.
  • One number for all pages without thinking about who answers. If you are outside business hours, have at least an away message ready.
  • Never testing the link on a phone even once.

Fixed button vs. in-text link#

A fixed button stays in the corner of the page and suits sites where a customer might have a question at any moment. An in-text link is for places where the topic is specific, such as the end of an article or a service page. If you use both, write a different prefilled message for each so you can tell which one works better. On mobile, make the button large enough to tap comfortably and keep it from covering an important part of the page.

Summary#

  • A wa.me link with the country code and no leading zero puts the customer one click away from a chat.
  • The text parameter sets a prefilled message and must be encoded.
  • In WordPress, a small shortcode using rawurlencode, esc_url and esc_html is enough for the button.
  • Place the button next to product and contact pages and avoid intrusive pop-ups.
  • Test the link and don't ask customers for sensitive information.