DEV Community: Sagor Ahamed

How to Build WhatsApp Click-to-Chat Links (wa.me) in JavaScript and Python

Sagor Ahamed — Thu, 01 Oct 2026 13:01:52 +0000

A quick guide to the wa.me URL format, URL-encoding pre-filled messages, and generating links in code.

If you build landing pages, e-commerce sites, or small business tools, you'll eventually be asked: "Can we add a WhatsApp button?"

The good news is that you don't need an API for this. WhatsApp supports click-to-chat links using the wa.me format.

The URL format

https://wa.me/<number>
https://wa.me/<number>?text=<url-encoded message>

Rules for <number>:

Use the full international format: country code + number.
No +, no spaces, no dashes, and no leading zeros.

For example, a Bangladeshi number 01712345678 becomes:

https://wa.me/8801712345678

(880 is the country code, and the leading 0 is dropped.)

Adding a pre-filled message

The message goes in the text query parameter and must be URL-encoded:

https://wa.me/8801712345678?text=Hi%21%20I%27d%20like%20to%20know%20more.

JavaScript

function waLink(phone, message = "") {
  const digits = phone.replace(/\D/g, "").replace(/^0+/, "");
  const base = `https://wa.me/${digits}`;
  return message ? `${base}?text=${encodeURIComponent(message)}` : base;
}

console.log(waLink("+880 1712-345678", "Hi! I'd like to know more."));
// https://wa.me/8801712345678?text=Hi!%20I'd%20like%20to%20know%20more.

Note: if you pass a local number that starts with 0, you still need to prepend the country code yourself.

Python

from urllib.parse import quote
import re

def wa_link(phone: str, message: str = "") -> str:
    digits = re.sub(r"\D", "", phone).lstrip("0")
    base = f"https://wa.me/{digits}"
    return f"{base}?text={quote(message)}" if message else base

print(wa_link("+880 1712-345678", "Hi! I'd like to know more."))

Simple message templates

For things like order confirmations or support buttons, a placeholder pattern keeps messages consistent:

function fillTemplate(template, vars) {
  return template.replace(/\{(\w+)\}/g, (_, key) => vars[key] ?? "");
}

const msg = fillTemplate("Hello {name}, my order #{id} needs help.", {
  name: "Rafi",
  id: "10482",
});
const link = waLink("8801712345678", msg);

Common mistakes

Including + or spaces in the number. The link will fail or open the wrong chat.
Forgetting to encode the message. Special characters like &, # and emoji can break the URL.
Not testing on mobile and desktop. Behavior differs slightly: mobile opens the app, desktop may open WhatsApp Web or the desktop app.
Very long messages. Keep them short for reliable behavior.

QR codes

You can turn any wa.me link into a QR code for printed menus, flyers, or business cards. Any QR library works, because the link is just a normal URL.

Don't want to code it?

If you just need a link or QR code without writing anything, I've been using a free generator at waurl.online. It builds wa.me links, supports pre-filled messages, and can create QR codes and short links with click stats. (Disclosure: I'm connected to this project.)

What's your approach for WhatsApp buttons on your sites? Let me know in the comments.

JPG vs WebP: Which Image Format Loads Faster for Web Performance?

Sagor Ahamed — Fri, 18 Sep 2026 05:20:05 +0000

JPG vs WebP: Which Image Format Is Better for the Web?

If you're serving images on a website, choosing the right format can make a noticeable difference in file size, loading speed, and performance.

Quick Summary

WebP can usually achieve similar visual quality at a smaller file size than JPG.
JPG is still useful when compatibility with older software or specific platforms is required.
WebP is a strong choice for modern websites, apps, and emails.
Regardless of the format, compressing images before serving them can significantly reduce page size and improve load times.
You can compress JPG and WebP images directly in your browser without uploading them to a server.

Want to Read the Full Guide?

For the complete comparison of JPG vs WebP, including file size, quality, browser support, and practical use cases:

Read the full blog → JPG vs WebP for Web Performance

Compress Your Images

Ready to reduce your image file size?

Compress your image → Image Compressor Tool

Building a Privacy-Focused Image Compressor Tool with Next.js

Sagor Ahamed — Thu, 17 Sep 2026 00:55:16 +0000

Recently, I built a small web project called Image Compressor Tool — a simple online tool that allows users to compress images directly in their browser.

🔗 Try it here: https://imagecompressortool.live/

The idea behind the project was simple:

Compress images quickly without uploading them to a server.

Why I Built It
Image compression is something many people need — whether they are uploading images to a website, sharing them online, or simply trying to save storage space.

However, many existing tools involve uploading your images to a remote server before processing them.

For certain types of images, users may prefer not to upload their files anywhere.

So I wanted to build a tool where the compression happens directly inside the browser.

Key Features
The tool currently provides:

🖼️ Browser-based image compression
🔒 No image upload required
⚡ Fast and simple workflow
📦 Reduced image file size
📱 Responsive interface
💻 Works across desktop and mobile devices
How It Works
The basic workflow is intentionally simple:

Select Image → Compress → Download

Instead of sending the image to a backend server, the image is processed on the user’s device.

This means the application doesn’t need a dedicated image-processing backend for the basic compression workflow.

Focus on Performance
While building the project, I wanted to keep the application lightweight and fast.

Download the Medium app
I focused on things like:

Optimizing the user experience
Keeping the interface simple
Reducing unnecessary network requests
Using static generation where possible
Making the application responsive
Improving SEO fundamentals
The goal wasn’t to build a complicated application.

The goal was to build one useful tool and make the experience as simple as possible.

What I Learned
This project also gave me an opportunity to explore areas beyond just building the UI.

I worked more with:

Next.js
React
TypeScript
SEO-focused web applications
Static generation
Web performance
Client-side image processing
Responsive UI development
One thing I particularly enjoyed was thinking about the product from a user’s perspective rather than only from a developer’s perspective.

A small tool can still have a lot of interesting engineering and product decisions behind it.

What’s Next?
This is just the beginning.

I plan to continue improving the tool based on real user feedback and potentially add more useful image-related features in the future.

If you work with images frequently, give it a try and let me know what you think.

🔗 Image Compressor Tool:
https://imagecompressortool.live/

If you have any suggestions for improvements or features you’d like to see, I’d love to hear them. ❤️

WebDevelopment #FrontendDevelopment #NextJS #ReactJS #JavaScript #TypeScript #SEO #WebPerformance #SideProject #BuildInPublic #ImageCompressor