Build a WhatsApp Link Generator with JavaScript

Try the working demo

Use fictional data for testing. Generating a result does not send these fields to our server. Refreshing clears the fields.

Build it and understand the decisions

Define one clear contact action

Choose the business number that should receive enquiries and write a short opening message. A visitor should understand who they are contacting and why. Use a number you control and confirm that it is registered with WhatsApp before adding the link to a public page.

• Include the international country code.
• Do not put passwords or private customer information into a link.
• Make the button label describe the conversation, such as “Ask about availability”.

Normalize the number and encode the message

The generator removes permitted display separators from the phone number and checks a conservative international-format length. It then appends an encoded message to the wa.me URL. Characters such as ampersands, question marks and line breaks must be encoded as data so they do not change the structure of the link.

• Letters and extensions are rejected.
• The format check does not prove that the number exists.
• A copied link includes the phone number and draft message, so review both.

Connect the link to a real page

Use the generated URL as the href of an ordinary anchor. Keep the business number in your own configuration rather than letting a public visitor select an arbitrary recipient in a production enquiry flow. A static link does not require the WhatsApp Cloud API, an access token or a message template.

• Test on a phone and in a desktop browser.
• The visitor still chooses whether to send the draft.
• If you need stored enquiries, connect a server-side form or CRM separately.

Measure the right outcome

A click on a chat button is an expression of interest, not evidence that a message was sent or a sale completed. Track clicks separately from confirmed enquiries. For a more complete workflow, add a reference code to the draft, agree how the team records incoming enquiries and provide another contact route when WhatsApp is unavailable.

• Keep link generation separate from opening the external service.
• Do not automatically open a chat on page load.
• Check that tracking does not collect phone numbers or message text.

Full runnable source

Save the demo markup in a normal HTML document with a UTF-8 charset and viewport meta tag. Link the stylesheet in the head and load the script with defer. Keep the IDs unchanged and use one tool per page.

• Complete JavaScript source
• Tool styles

  

    Business phone number, including country code 
    Prefilled message (optional) 
    Generate WhatsApp link
  
  
  

<link rel="stylesheet" href="business_tools.css">
<script src="contact_tools.js" defer></script>

Build your version with AI

Ask the assistant to explain every transformation and add checks with expected results. Review the output before replacing a working implementation.

Verify the result

Try an international number with spaces and parentheses, a message containing & and a newline, an empty message and a number containing letters. Decode the text query parameter and check it equals the draft. Generating a link must not open WhatsApp or transmit the fields to our backend.

In this repository, run node tests/contact_tools.test.cjs and python manage.py test main. Test keyboard access, narrow screens and errors in the browser as well.

Publish your version

A standalone version can be hosted as HTML, CSS and JavaScript over HTTPS. The generator needs no database or API secret. On this Django site, collect the static files and restart the configured application service after checking the release.

python manage.py check
python manage.py test main
python manage.py collectstatic --noinput

Open /en/tools/whatsapp-link-generator/ after deployment. Confirm that the script loads, the demo works and the page appears in the sitemap.

Limitations and production scope

This tool validates formatting only. It cannot confirm account registration, message delivery, consent to contact or lead quality. The generated link exposes its number and draft to anyone it is shared with. Opening it contacts WhatsApp; sending the message is a separate action. Browser clipboard access may require HTTPS and permission.

Inputs are not persisted by this tool. Browser extensions or changes to your own deployment may affect data handling, so review the final implementation before using sensitive information.

Official reference