Free WhatsApp & Telegram Chat Button

WhatsApp & Telegram Chat Button Generator

Add a floating chat button to your website so visitors can start a WhatsApp or Telegram conversation without searching for a separate support page. Customize the experience, preview it live, and copy one embed code.

WhatsApp click-to-chat Telegram chat links Live website preview Copy-paste embed code

Step 1

Add WhatsApp and Telegram chat buttons

Common channels8 shown by default

More channels 19 additional link options

WhatsApp

WhatsApp number

Channel options

LabelColor

Step 2

Customize your chat button

Button style

Button color

Icon

Button sizeShadow

Position

Advanced design options

Custom colorGradient end

Background

AnimationNotification dotOpen in new tabTrack clicks

Shift XShift Y

Where to show

Step 3

Write a helpful first message

Greeting panelShow channel list

Panel titleIntro line

Panel copy

WhatsApp message

Advanced message options

Agent nameAgent role

Avatar textDelay, sec

Display frequency

Step 4

Add the chat button to your website

Website domain

Advanced install options

Widget nameOwner email

<script>
(function () {
  var config = {
  "name": "Website chat button",
  "domain": "example.com",
  "ownerEmail": "sales@example.com",
  "channels": [
    {
      "type": "whatsapp",
      "label": "WhatsApp",
      "value": "+12025550148",
      "color": "#22c55e"
    }
  ],
  "button": {
    "style": "bubble",
    "icon": "whatsapp",
    "text": "Chat with us",
    "color": "#22c55e",
    "secondColor": "#2563eb",
    "background": "solid",
    "position": "right",
    "size": 60,
    "shadow": 20,
    "animation": true,
    "animationType": "pulse",
    "notification": true,
    "shiftX": 24,
    "shiftY": 24,
    "showOn": "all",
    "pages": "",
    "openNewTab": true,
    "analytics": false
  },
  "greeting": {
    "enabled": true,
    "title": "Need help choosing?",
    "intro": "Start a conversation",
    "body": "Chat with us on WhatsApp or Telegram and get the answer you need.",
    "defaultMessage": "Hi, I have a question before I buy.",
    "agentName": "Sales team",
    "agentRole": "Usually replies quickly",
    "avatar": "Hi",
    "showChannels": true,
    "frequency": "Every 24 hours",
    "delay": 2
  }
};
  var existing = document.getElementById("smdeck-contact-button");
  if (existing) existing.remove();
  function shouldShowOnPage() {
    if (config.button.showOn !== "selected" || !config.button.pages) return true;
    var path = window.location.pathname.replace(/\/$/, "") || "/";
    return config.button.pages.split(",").map(function (page) { return page.trim().replace(/\/$/, "") || "/"; }).filter(Boolean).some(function (page) { return path === page || path.indexOf(page + "/") === 0; });
  }
  if (!shouldShowOnPage()) return;
  function normalizeUrl(value) {
    if (!value) return "#";
    if (value.indexOf("#") === 0 || /^(https?:|mailto:|tel:|sms:|skype:|imessage:|viber:)/i.test(value)) return value;
    return "https://" + value;
  }
  function cleanHandle(value) { return value.replace(/^@/, ""); }
  function cleanPhone(value, keepPlus) { return value.replace(keepPlus ? /[^\d+]/g : /[^0-9]/g, ""); }
  function linkFor(channel) {
    var value = (channel.value || "").trim();
    var message = encodeURIComponent(config.greeting.defaultMessage || "");
    if (!value) return "#";
    if (channel.type === "whatsapp") { var number = cleanPhone(value, false); return number ? "https://wa.me/" + number + (message ? "?text=" + message : "") : "#"; }
    if (channel.type === "email") return "mailto:" + value + "?subject=Website inquiry&body=" + message;
    if (channel.type === "phone") return "tel:" + cleanPhone(value, true);
    if (channel.type === "sms") return "sms:" + cleanPhone(value, true) + (message ? "?body=" + message : "");
    if (channel.type === "telegram") return /^https?:/i.test(value) ? value : "https://t.me/" + cleanHandle(value);
    if (channel.type === "messenger") return /^https?:/i.test(value) ? value : "https://m.me/" + cleanHandle(value);
    if (channel.type === "instagram") return /^https?:/i.test(value) ? value : "https://instagram.com/" + cleanHandle(value);
    if (channel.type === "youtube") return /^https?:/i.test(value) ? value : "https://youtube.com/" + (value.indexOf("@") === 0 ? value : "@" + value);
    if (channel.type === "line") return /^https?:/i.test(value) ? value : "https://line.me/R/ti/p/" + value;
    if (channel.type === "viber") return /^(https?:|viber:)/i.test(value) ? value : "viber://chat?number=" + encodeURIComponent(cleanPhone(value, true));
    if (channel.type === "snapchat") return /^https?:/i.test(value) ? value : "https://www.snapchat.com/add/" + cleanHandle(value);
    if (channel.type === "skype") return /^skype:/i.test(value) ? value : "skype:" + value + "?chat";
    if (channel.type === "apple-messages") return "imessage:" + value.replace(/\s/g, "");
    if (channel.type === "linkedin") { var handle = cleanHandle(value); return /^https?:/i.test(value) ? value : "https://www.linkedin.com/" + (handle.indexOf("/") >= 0 ? handle : "company/" + handle); }
    if (channel.type === "x") return /^https?:/i.test(value) ? value : "https://x.com/" + cleanHandle(value);
    if (channel.type === "waze") return /^https?:/i.test(value) ? value : "https://waze.com/ul?q=" + encodeURIComponent(value);
    if (channel.type === "vk") return /^https?:/i.test(value) ? value : "https://vk.com/" + cleanHandle(value);
    if (channel.type === "tiktok") return /^https?:/i.test(value) ? value : "https://www.tiktok.com/@" + cleanHandle(value);
    if (channel.type === "discord") return /^https?:/i.test(value) ? value : "https://discord.gg/" + cleanHandle(value);
    if (channel.type === "teams") return /^https?:/i.test(value) ? value : "https://teams.microsoft.com/l/chat/0/0?users=" + encodeURIComponent(value);
    if (channel.type === "maps") return /^https?:/i.test(value) ? value : "https://maps.google.com/?q=" + encodeURIComponent(value);
    if (channel.type === "wechat") return "#";
    return normalizeUrl(value);
  }
  function greetingStorageKey() {
    return "smdeck-contact-button:" + (config.domain || location.hostname) + ":" + (config.name || "widget");
  }
  function shouldAutoOpenGreeting() {
    if (!config.greeting.enabled) return false;
    var frequency = config.greeting.frequency || "Every 24 hours";
    if (frequency === "Every visit") return true;
    try {
      var key = greetingStorageKey();
      var stored = Number(localStorage.getItem(key) || 0);
      if (frequency === "Once per visitor") return !stored;
      var hours = frequency === "Every hour" ? 1 : frequency === "Every 6 hours" ? 6 : 24;
      return !stored || Date.now() - stored > hours * 60 * 60 * 1000;
    } catch (error) {
      return true;
    }
  }
  function rememberGreeting() {
    try { localStorage.setItem(greetingStorageKey(), String(Date.now())); } catch (error) {}
  }
  function trackClick(channel) {
    if (!config.button.analytics) return;
    if (window.gtag) window.gtag("event", "contact_button_click", { contact_channel: channel.type, contact_label: channel.label });
    else if (window.dataLayer) window.dataLayer.push({ event: "contact_button_click", contact_channel: channel.type, contact_label: channel.label });
  }
  var root = document.createElement("div");
  root.id = "smdeck-contact-button";
  root.style.cssText = "position:fixed;z-index:2147483000;" + config.button.position + ":" + config.button.shiftX + "px;bottom:" + config.button.shiftY + "px;font-family:Arial,sans-serif";
  var panel = document.createElement("div");
  panel.style.cssText = "display:none;width:300px;margin-bottom:12px;padding:14px;border:1px solid #d7dde6;border-radius:10px;background:#fff;box-shadow:0 16px 36px rgba(15,23,42,.18);color:#111827";
  panel.innerHTML = "<strong>" + config.greeting.title + "</strong><p style=\"margin:8px 0 12px;color:#4b5563;line-height:1.45\">" + config.greeting.body + "</p>";
  config.channels.forEach(function (channel) {
    var item = document.createElement("a");
    var link = linkFor(channel);
    item.href = link;
    if (link !== "#") {
      item.target = config.button.openNewTab ? "_blank" : "_self";
      item.rel = "noopener";
    }
    item.textContent = channel.label;
    item.style.cssText = "display:block;margin-top:8px;padding:10px 12px;border:1px solid " + channel.color + ";border-radius:8px;color:#111827;text-decoration:none;font-weight:700";
    item.addEventListener("click", function () { trackClick(channel); });
    if (channel.type === "wechat") item.onclick = function (event) { event.preventDefault(); window.alert("WeChat ID: " + channel.value); };
    panel.appendChild(item);
  });
  var button = document.createElement("button");
  button.type = "button";
  button.className = "smdeck-contact-launcher";
  button.textContent = config.button.style === "pill" ? config.button.text : "Chat";
  var buttonBackground = config.button.background === "gradient" && config.button.secondColor ? "linear-gradient(135deg, " + config.button.color + ", " + config.button.secondColor + ")" : config.button.color;
  button.style.cssText = "position:relative;border:0;border-radius:" + (config.button.style === "pill" ? "999px" : "50%") + ";min-width:" + config.button.size + "px;height:" + config.button.size + "px;padding:0 18px;background:" + buttonBackground + ";color:#fff;font-weight:800;box-shadow:0 10px 28px rgba(15,23,42,.22);cursor:pointer";
  if (config.button.animation) {
    var style = document.createElement("style");
    style.textContent = "@keyframes smdeckContactPulse{0%,100%{transform:translateY(0) scale(1)}50%{transform:translateY(-2px) scale(1.04)}}#smdeck-contact-button .smdeck-contact-launcher{animation:smdeckContactPulse 1.8s ease-in-out infinite}";
    document.head.appendChild(style);
  }
  if (config.button.notification) {
    var dot = document.createElement("span");
    dot.setAttribute("aria-hidden", "true");
    dot.style.cssText = "position:absolute;right:4px;top:4px;width:12px;height:12px;border:2px solid #fff;border-radius:50%;background:#ef4444";
    button.appendChild(dot);
  }
  button.onclick = function () { var opening = panel.style.display === "none"; panel.style.display = opening ? "block" : "none"; if (opening) rememberGreeting(); };
  if (config.greeting.enabled) {
    root.appendChild(panel);
    window.setTimeout(function () {
      if (shouldAutoOpenGreeting()) { panel.style.display = "block"; rememberGreeting(); }
    }, Math.max(0, Number(config.greeting.delay) || 0) * 1000);
  }
  root.appendChild(button);
  document.body.appendChild(root);
}());
</script>

Chat buttons that remove friction

Make it easy for website visitors to ask before they leave

A visitor with a question about price, delivery, availability, booking, or support may not search through your navigation for help. A visible WhatsApp or Telegram chat button keeps the next step within reach on product pages, landing pages, pricing pages, and mobile screens.

WhatsApp chat button for faster sales

Open WhatsApp on mobile or WhatsApp Web on desktop with your business number and a prefilled message.

Telegram chat button for support

Send visitors to your Telegram username, profile, group, or support conversation from any important page.

One widget for every preferred channel

Combine WhatsApp, Telegram, Messenger, email, phone, SMS, Instagram, LINE, and other supported links.

Live preview before installation

Check the position, color, greeting, channel order, and first message before adding the code to your site.

How it works

Add a WhatsApp or Telegram chat button in four steps

You do not need to design a widget or write JavaScript. Configure the experience here, then install the generated snippet once.

1
Choose your chat channels
Select WhatsApp, Telegram, or the other messaging options your customers already use.
2
Add your chat details
Enter your WhatsApp number, Telegram username or link, and a useful prefilled first message.
3
Match your website
Adjust the color, icon, size, position, greeting panel, and page display rules in the live preview.
4
Copy and install
Generate the embed code and add it to your website or tag manager where customers need a quick answer.

Choose the right channel

WhatsApp chat button, Telegram chat button, or both?

Start with the messaging apps your audience already trusts. You can publish one channel or let visitors choose from several without crowding the page with separate floating buttons.

Use a WhatsApp chat button when...

Customers ask pre-sale questions from product or pricing pages.
Your team handles orders, delivery updates, quotes, or appointments in WhatsApp.
Mobile visitors need a familiar one-tap path to your business number.

Use a Telegram chat button when...

Your customers already use Telegram for support, communities, or international conversations.
You want to direct visitors to a Telegram username, profile, group, or channel.
Your business needs a second messaging option alongside WhatsApp.

Common questions

WhatsApp and Telegram chat button FAQ

Quick answers about creating, customizing, and installing a floating chat button on your website.

What is a WhatsApp chat button for a website?

A WhatsApp chat button is a floating website button that opens WhatsApp or WhatsApp Web with your business number and an optional prefilled message. It gives visitors a direct way to ask about products, orders, bookings, quotes, or support.

How do I add a WhatsApp button to my website?

Choose WhatsApp in the SMDeck builder, enter your WhatsApp number, write a useful first message, customize the button, and copy the generated embed code into your website. The same code works across your selected pages.

Can I create a Telegram chat button for my website?

Yes. Add Telegram as a channel and enter a Telegram username or link. Visitors can then open your Telegram profile or chat from the floating button on your website.

Can I use WhatsApp and Telegram in the same chat widget?

Yes. You can place WhatsApp, Telegram, Messenger, email, phone, SMS, Instagram, LINE, and other supported links inside one floating chat widget, then arrange the channels in the order you prefer.

Do I need coding skills to build the chat button?

No. The builder creates the widget code for you. You only need to customize the channels and appearance, copy the embed snippet, and add it to your website or tag manager.

Can I customize the chat button design and greeting?

Yes. You can change the color, icon, size, position, animation, greeting panel, first message, display pages, and channel order while checking the result in the live preview.

Is the WhatsApp and Telegram chat button generator free?

Yes. SMDeck lets you build, preview, and generate the website chat button code for free.

Is SMDeck affiliated with WhatsApp or Telegram?

No. SMDeck is an independent website tool and is not affiliated with, endorsed by, or officially connected to WhatsApp, Meta, or Telegram.

Ready to make conversations easier?

Build your free website chat button

Connect WhatsApp, Telegram, or both and preview the result before you install it.

Start building