To add a Telegram button to an HTML website, create a normal link with an href pointing to https://t.me/username. For business support, link to a Telegram bot instead of an employee’s personal account. The link works without JavaScript, a plugin or a third-party widget.
The smallest valid version is:
<a href="https://t.me/your_support_bot">Message us on Telegram</a>Replace your_support_bot with the real username. Publish the page and test the link on a phone and a desktop browser.
Option 1: add a simple Telegram text link
A standard anchor element is the most reliable implementation. It still works if JavaScript fails, it can be opened in a new tab, and assistive technology understands that it is a link. MDN recommends using a real href instead of fake values such as javascript:void(0), because fake links break normal browser behavior and accessibility.
<p>
Need help?
<a href="https://t.me/your_support_bot">
Ask us on Telegram
</a>
</p>Use action text. “Ask about your order” is clearer than “Telegram”, because it tells visitors what will happen.
Option 2: create a styled Telegram button
An anchor can look like a button without losing correct link semantics:
<a class="telegram-contact" href="https://t.me/your_support_bot">
Message us on Telegram
</a>.telegram-contact {
display: inline-flex;
min-height: 44px;
align-items: center;
justify-content: center;
padding: 0 18px;
border-radius: 12px;
background: #ffc400;
color: #0f0f0f;
font: 700 15px/1.2 system-ui, sans-serif;
text-decoration: none;
}
.telegram-contact:hover {
background: #ffcc33;
}
.telegram-contact:focus-visible {
outline: 3px solid #0f0f0f;
outline-offset: 3px;
}The 44-pixel minimum height gives touchscreen users a practical target. Keep a visible focus style for keyboard users and enough color contrast for the label.
Option 3: add a floating Telegram button
A floating button remains visible while the visitor scrolls. Put the HTML close to the end of <body> and add fixed positioning:
<a
class="telegram-contact telegram-contact--floating"
href="https://t.me/your_support_bot?start=website"
aria-label="Open Telegram customer support"
>
Telegram support
</a>.telegram-contact--floating {
position: fixed;
right: 20px;
bottom: 20px;
z-index: 50;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.16);
}
@media (max-width: 640px) {
.telegram-contact--floating {
right: 12px;
bottom: 12px;
}
}Test the bottom of the screen carefully. The button must not cover a cookie banner, checkout action, mobile navigation or another contact widget.
Use a Telegram bot deep link to track the source
Telegram officially supports a start parameter for bot links. For example:
https://t.me/your_support_bot?start=pricing_pageWhen the visitor starts the bot through that link, the bot receives /start pricing_page. This lets you distinguish a pricing-page visitor from someone who clicked a general contact link. Use short, stable source names and do not put private customer data in the URL.
Useful source examples include:
website_headerpricing_pageproduct_pagedelivery_helparticle_html_button
This is source attribution, not full web analytics. If you also measure clicks with an analytics platform, add a normal click event to the anchor without making the link dependent on JavaScript.
Personal profile, channel, group or bot?
| Destination | Use it for | Support limitation |
|---|---|---|
| Personal username | Solo and informal contact | Exposes a personal account and cannot be shared cleanly |
| Channel | News and broadcasts | Not a private customer support conversation |
| Public group | Community discussion | Customer questions may be visible to others |
| Business bot | Private customer contact and routing | Requires bot setup and a reply workflow |
For a business, a bot is usually the cleanest destination. The customer gets a private chat, the company keeps personal accounts private, and a service such as GramDesk can route messages into a shared Telegram group for several teammates.
Add the button to one page or every page
If the website has a shared footer template, place the floating-button markup there to show it site-wide. For a static site with separate HTML files, either update each page or use a build template so the button is maintained in one place.
Contextual buttons often convert better than a generic icon. Good locations include:
- next to pricing: “Question about the plan?”
- on product pages: “Ask about availability”
- near delivery information: “Question about shipping?”
- on service pages: “Request a quote in Telegram”
- after troubleshooting steps: “Still need help?”
Do not add a floating button and three competing contact buttons to the same screen. One clear primary action is easier to understand.
Use the GramDesk Telegram Button Generator
If you do not want to write or maintain CSS, use the Telegram Button Generator. It creates a ready-to-paste button with configurable text, icon, colors, size, position and mobile behavior.
Copy the Universal Script and paste it before the closing </body> tag or into the shared footer template. The generator includes no-CDN inline icons, so the button does not depend on a remote icon file. You can update the destination and styling in one place before copying the code.
The generator creates the contact entry point. To organize the conversations behind it, connect a support bot to GramDesk. Customers write privately to the bot while teammates answer from one private Telegram group.
Accessibility and security checklist
- Use an
<a>element with a realhref. - Give the link clear visible text or an accurate
aria-label. - Keep the click target at least approximately 44 by 44 pixels.
- Provide a visible keyboard focus state.
- Do not place private information in the bot
startparameter. - If using
target="_blank", addrel="noopener noreferrer"and tell users when a new window opens. - Avoid downloading icons or scripts from unknown sources.
- Test with JavaScript disabled if the basic link is business-critical.
Final testing steps
Open the production page, not only the local HTML file. Click the button on desktop and mobile. Confirm that it opens the correct bot, the label matches the customer’s task, the button does not cover other controls and a keyboard user can focus it.
Then test the business workflow: send a message, make sure the team receives it, reply from the team workspace and confirm that the customer gets the response. A beautiful button is not useful if nobody hears the doorbell.
Frequently asked questions
Do I need JavaScript?
No. A normal https://t.me/... anchor works without JavaScript. Use JavaScript only for optional widget behavior or analytics.
Can I add a Telegram icon?
Yes. Use inline SVG or a local image and include accessible text. Do not rely on an icon alone if visitors may not understand what it opens.
Can I track which page sent the visitor?
For a bot, use Telegram’s start parameter with a source value. You can also record a normal analytics click event.
Should I link to a personal account?
For long-term business support, a bot is safer and easier to share with a team. Personal links are better limited to genuinely personal contact.