Telegram chat button

Free Telegram Chat Widget for Your Website

Add a Telegram button that opens a chat with your username, so visitors can reach you on the app they prefer.

Create your free widget See how it works
  • Opens a Telegram chat with your username
  • Great for tech and crypto audiences
  • Free, with analytics

How it works

  1. 1

    Create your widget

    Add your Telegram details, name, photo and welcome message, and pick your colours. Free account required.

  2. 2

    Paste two lines of code

    Copy the snippet into your site before the closing body tag, or use one of the step-by-step guides for 31 platforms.

  3. 3

    Check the installation

    Use Check installation to confirm the widget is live, and clear your site's cache if you don't see it.

Make it yours

What you can set for the Telegram chat widget. You can change it any time without touching the code again.

  • Display name and profile photo
  • A caption such as "Typically replies within an hour"
  • Your welcome message
  • Position: left, centre or right
  • A round icon or a "Chat now" button
  • A choice of icon images
  • Button background and text colours

Analytics

See how often the widget is shown and clicked, over time, and which websites the visits came from.

Illustration only.

Who uses a Telegram button

  • SaaS and developer tools

    Offer quick help where technical users already hang out.

  • Communities and channels

    Point visitors to a direct conversation with your team.

  • International audiences

    Reach customers in regions where Telegram is the everyday messenger.

  • Freelancers

    Share one simple way to start a project conversation.

Works with your website

Step-by-step installation guides for 31 platforms, including notes on caching, content security policies and single-page apps.

  • Any website (HTML)
  • Google Tag Manager
  • Cloudflare Zaraz
  • WordPress
  • WooCommerce
  • Shopify
  • Blogger
  • Ghost
  • Joomla
  • Drupal
  • Wix
  • Squarespace
  • Webflow
  • Google Sites
  • Magento / Adobe Commerce
  • PrestaShop
  • OpenCart
  • React
  • Next.js
  • Angular
  • Vue
  • Nuxt
  • ASP.NET Core
  • ASP.NET Web Forms
  • PHP
  • Laravel
  • CodeIgniter
  • Django
  • Flask
  • Ruby on Rails
  • Node.js / Express

Good to know

  • The widget hands your visitor to the messaging app - the conversation continues there, not on your website.
  • Your destination is fetched by the widget with its public key, so treat it as public information, like a number printed on your website.
  • When the widget is shown or clicked, A2Z Tools records the visit (IP address, page address, referrer and time) to count views and clicks. It does not collect your visitors' names or email addresses.
  • A small "powered by a2z.tools" credit link is shown in the widget.

Other widgets

Ready in a few minutes

Create your widget for free, paste it into your site, and start getting conversations.

Create your free widget See my widgets

Related Tools

More tools in the same category

Other Tools

Popular tools from across A2Z

Quick answer

To add Telegram chat to a website, create a Telegram widget in a free A2Z Tools account, enter your Telegram username, style the popup, and paste the two-line code into your site. Visitors click the button and message you in Telegram.

Key facts

  • Free; a free A2Z Tools account is needed to create and manage widgets
  • Opens Telegram through a t.me link to the username you enter
  • Requires a public Telegram username, not just a phone number
  • The conversation continues in Telegram, not on your website
  • Popup with display name, caption, welcome message, profile image and a "Start Chat" button
  • Install guides for 31 platforms
  • Dashboard shows impressions, clicks and referring websites

What is this tool?

A Telegram chat widget is a website button that opens a Telegram conversation with you. The A2Z Tools widget shows a popup with your name, caption and welcome message, then opens a t.me link for your username when the visitor clicks "Start Chat".

The link works with a public username, which you set in Telegram settings. Your phone number is not exposed by the link itself. The conversation continues in Telegram; for chat hosted on your own site, see A2Z Live Chat.

How to use it

There are two separate jobs: creating the widget in your free A2Z Tools account, and adding its code to your website. Nothing appears for visitors until the second job is done.

The code is two lines - an async script tag and a div carrying your site key. Step-by-step guides cover 31 platforms: HTML, Google Tag Manager, Cloudflare Zaraz, WordPress, WooCommerce, Shopify, Blogger, Ghost, Joomla, Drupal, Wix, Squarespace, Webflow, Google Sites, Magento (Adobe Commerce), PrestaShop, OpenCart, React, Next.js, Angular, Vue, Nuxt, ASP.NET Core, ASP.NET Web Forms, PHP, Laravel, CodeIgniter, Django, Flask, Ruby on Rails and Node.js (Express). Squarespace needs a Business plan and Webflow a paid site plan before custom code can be added, and Google Sites accepts only an embed box, not a floating button.

  1. Sign in to A2Z Tools with your email address; the account is free.
  2. Create a Telegram widget and enter your Telegram username.
  3. Set the display name, caption, welcome message, profile image, icon style, position and colours, and check the preview.
  4. Save the widget and copy its two-line code.
  5. Open the installation guide for your platform and paste the code so it loads on every page.
  6. Clear your site, plugin or CDN cache, then run the Integration Centre check or open your site in a private window.
  7. Follow impressions, clicks and referring websites in your dashboard.

Example

Settings: username "pixelforge_support"; display name "PixelForge Support"; caption "Typically replies within an hour"; welcome message "Stuck with a template? Send us a message on Telegram."; round icon on the right.

What a visitor sees: a Telegram icon bottom right. The popup shows the support name and message; "Start Chat" opens Telegram at t.me/pixelforge_support.

Common use cases

  • Support for software, apps and digital products whose users are on Telegram
  • Contact for online communities, creators and course sellers
  • Enquiries for crypto and fintech projects that already run a Telegram presence
  • Pointing visitors to a public support bot or group username

Benefits

  • Username instead of number. Visitors reach you through your Telegram username.
  • Replies from any device. Answer from Telegram on your phone, desktop app or Telegram Web.
  • Editable without reinstalling. Change the username or text in your dashboard; the code on your site stays the same.
  • Free and measurable. See impressions, clicks and referring websites.

Limitations

  • The chat does not happen on your website. The button hands the visitor to Telegram; the conversation, its history and your notifications all live there.
  • A username is required, and visitors need Telegram. Without a public username there is no t.me link to open. A visitor who does not use Telegram cannot chat through this widget.
  • No scheduling or targeting. The installed widget does not apply delay or trigger rules, business hours, device or page targeting, size or animation options, custom button text or a consent checkbox. It shows on every page that carries the code, about one second after the page loads, and its popup button always reads "Start Chat".
  • A credit link. Every widget shows a small "powered by a2z.tools" link.
  • Blockers. Ad blockers and privacy extensions can stop the widget loading for some visitors, so your counts can be lower than real traffic.
  • Platform plans. Squarespace (Business plan) and Webflow (paid site plan) restrict custom code, and Google Sites allows only an embed box.

Privacy & your data

Here is exactly what happens to the details you enter, and what the widget records once it is on your website.

The details you enter

The destination you configure - your Telegram username - is stored on A2Z Tools so the widget can use it. The code you paste into your website does not contain it: the snippet carries only a widget key, and the widget looks up its own settings when a page loads. Because that key appears in the page source of every site the widget runs on, treat the destination as public information, exactly as you would a phone number printed on your website.

Your visitors' conversations

Conversations happen entirely inside Telegram. A2Z Tools never sees, stores or has any access to the messages your visitors send you, or to their Telegram accounts.

What the widget records

So that you can see whether the widget is working, it records when it is shown and when it is clicked. Alongside each of those we keep the website and page path it happened on, the referring site, a broad device category, the browser and operating system family, and a country where the network can tell us one. Page addresses are stored without their query string, so anything your own site puts after a question mark - order numbers, email addresses, session tokens - is discarded before it reaches us.

Visitors are counted using a one-way value derived from their network address and browser, mixed with a secret, the widget's identity and the date. It cannot be reversed into an address, it is different for the same person on two different customers' websites, and it changes every day - so it can answer "how many different people" without following anyone around. The network address itself is never stored.

What is never recorded

No names, no email addresses, no message content, no full browser identification string, and no cookies of our own on your visitors' devices.

Blockers and consent

Privacy extensions and ad blockers can stop the widget loading. When that happens the widget simply does not appear for that visitor and nothing is recorded, which also means your visitor numbers are a little lower than your real traffic rather than higher.

Frequently asked questions

Do I need a Telegram username?

Yes. The button opens a t.me link, and t.me links work with a public username rather than a phone number. You can set a username in Telegram settings, then enter it in the widget.

Can the button open a Telegram group, channel or bot?

The widget opens t.me with the username you enter. If that username belongs to a public group, channel or bot instead of a personal account, Telegram opens that. For one-to-one support, use the username of the account that will answer.

Is the Telegram chat widget free, and do I need an account?

Yes, it is free. You need a free A2Z Tools account (email sign-in) to create, edit and track widgets, and you can make more than one widget of each type. Your visitors do not need an A2Z Tools account.

How do I install it on WordPress, Shopify or another website?

Copy the two-line code (an async script tag and a div with your site key) and follow the installation guide for your platform. Guides cover 31 platforms, including WordPress, WooCommerce, Shopify, Wix, Squarespace, Webflow, Google Tag Manager, React and Next.js. After saving, clear any site, plugin or CDN cache and use the Integration Centre check. Squarespace needs a Business plan and Webflow a paid site plan to add custom code; Google Sites allows only an embed box, not a floating button.

Will the widget slow down my website?

The script tag is async, so your page does not wait for it before rendering. The button appears about one second after the page loads. If the widget cannot load, for example because of an ad blocker, the rest of your page is unaffected.

Does the conversation happen on my website?

No. The popup is on your website, but "Start Chat" opens Telegram, and the conversation continues there. If you want visitors to chat inside your website and a team to answer from a dashboard, look at A2Z Live Chat.

What does the widget record about my visitors?

When the widget is shown or clicked, A2Z Tools records the visitor IP address, the page address and referrer, the page title, a random device id kept in your website browser storage, and the time. That is what powers the impressions, clicks and referring websites in your dashboard. Names and email addresses are not collected, and messages sent in Telegram do not pass through A2Z Tools. Your Telegram username is stored by A2Z Tools and loaded with the public site key, so treat it as public.

Can I change the widget later without reinstalling the code?

Yes. The code on your site carries only the site key, and the widget loads its current settings each time a page opens. Edit the Telegram username, text, image or colours in your dashboard and the installed widget uses the new settings; clear your site cache if you do not see the change.

Which website platforms does the widget work with?

Any website you can add HTML to. We provide step-by-step instructions for over thirty platforms, including WordPress, WooCommerce, Shopify, Wix, Squarespace, Webflow, Blogger, Ghost, Joomla, Drupal, Magento, PrestaShop, OpenCart, React, Next.js, Angular, Vue, Nuxt, ASP.NET, PHP, Laravel, CodeIgniter, Django, Flask, Ruby on Rails, Node.js, Google Tag Manager and Cloudflare Zaraz. If yours is not listed, the universal HTML instructions work anywhere.

Do I need to add anything to my website, or is creating the widget enough?

You do need to add it. Creating the widget and installing it are two separate steps, and this is the one people most often miss. After you have made the widget you copy two lines of code and paste them into your website. We show you exactly where for your platform, and there is an installation check that tells you whether it arrived.

I added the code but the widget is not showing. What should I check?

In order of likelihood: the change was not published; a cache or CDN in front of your site is still serving the old page; the code went onto one template rather than the site-wide header or footer; or your site sends a Content-Security-Policy header that does not allow a2z.tools. Opening your site in a private browsing window rules out your own browser cache. If a colleague cannot see it but you can, an ad blocker is the usual answer.

Will the widget slow my website down?

No. The script loads asynchronously and independently, so your page renders without waiting for it. If our service were unavailable the widget would simply not appear, and nothing else on your page would be affected.

Can I use the same widget on more than one website?

Technically yes - the same code works anywhere you paste it. It is usually better to create one widget per website, because then the numbers for each site are separate and the installation check knows which address to look at.

Can I see whether anybody is actually using it?

Yes. The widget reports how often it is shown and how often it is clicked, broken down by day, page, device and country. If it is being shown but never clicked, that is worth knowing too - a different position or a clearer message often helps.

Related tools

Last reviewed: