whatsapp-url-builder
Version:
Tiny helper to build WhatsApp click-to-chat URLs (wa.me & api.whatsapp.com)
158 lines (106 loc) • 4.1 kB
Markdown
A tiny helper to build **WhatsApp Click-to-Chat URLs** (`wa.me` &
`api.whatsapp.com`).\
Works in **Node.js**, **React/Next.js**, and even plain **HTML (via
CDN)**.
------------------------------------------------------------------------
``` bash
npm install whatsapp-url-builder
```
or with yarn:
``` bash
yarn add whatsapp-url-builder
```
------------------------------------------------------------------------
``` js
const { whatsAppUrl } = require("whatsapp-url-builder");
const url = whatsAppUrl("919876543210", "Hello from Node!");
console.log(url);
// -> https://wa.me/919876543210?text=Hello%20from%20Node!
```
------------------------------------------------------------------------
``` js
import { whatsAppUrl } from "whatsapp-url-builder";
const url = whatsAppUrl("919876543210", "Hello from React!");
console.log(url);
// -> https://wa.me/919876543210?text=Hello%20from%20React!
```
------------------------------------------------------------------------
``` js
import { whatsAppUrl } from "whatsapp-url-builder";
// Using api.whatsapp.com instead of wa.me
const apiUrl = whatsAppUrl("919876543210", "API style", { useApi: true });
console.log(apiUrl);
// -> https://api.whatsapp.com/send?phone=919876543210&text=API%20style
// Only message (no phone number)
const msgUrl = whatsAppUrl(undefined, "Hello world!");
console.log(msgUrl);
// -> https://wa.me/?text=Hello%20world!
```
------------------------------------------------------------------------
After publishing, use unpkg or jsDelivr to load the global build:
``` html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>WhatsApp Example</title>
<script src="https://unpkg.com/whatsapp-url-builder@1.0.0/dist/index.global.js"></script>
</head>
<body>
<button onclick="alert(WaUrlBuilder.whatsAppUrl('919876543210', 'Hi from HTML!'))">
Get WhatsApp Link
</button>
</body>
</html>
```
With jsDelivr:
``` html
<script src="https://cdn.jsdelivr.net/npm/whatsapp-url-builder@1.0.0/dist/index.global.js"></script>
```
This exposes a global object:
``` js
WaUrlBuilder.whatsAppUrl("919876543210", "From CDN!");
```
------------------------------------------------------------------------
- **phone**: Full international number (digits only). Optional.\
- **message**: Prefilled text message. Optional.\
- **opts.useApi**: When true, generates
`https://api.whatsapp.com/send?...`. Default: `false` (uses
`wa.me`).\
- **opts.encode**: Custom encoder (defaults to `encodeURIComponent`).
Returns a **string URL**.
------------------------------------------------------------------------
## 🌍 Examples of output
``` js
whatsAppUrl("919876543210", "Hi");
// -> https://wa.me/919876543210?text=Hi
whatsAppUrl("919876543210");
// -> https://wa.me/919876543210
whatsAppUrl(undefined, "Only message");
// -> https://wa.me/?text=Only%20message
whatsAppUrl("919876543210", "With API style", { useApi: true });
// -> https://api.whatsapp.com/send?phone=919876543210&text=With%20API%20style
```
------------------------------------------------------------------------
- Global variable name: **`WaUrlBuilder`**
- Usage:
``` js
WaUrlBuilder.whatsAppUrl("919876543210", "Hello from global build!");
```
------------------------------------------------------------------------
MIT
---
If you find this package useful, you can support my work here:
[](https://buymeacoffee.com/vijayj)