Button on a website
Use this generator. It creates HTML or JavaScript for a floating or inline website button that opens your Telegram username, bot, channel or group.
Telegram website tool
Telegram Button Generator for Website
Create a Telegram contact button for any website, preview it, and copy ready-to-paste HTML or JavaScript code.
Set the link, style, icon, position, and code format. The generated button uses inline SVG, so it does not depend on external icon files or CDNs.
Use a Telegram bot, channel, or username. Examples: @GramDeskBot, username, t.me/username.
Desktop
Text presets
Mobile
Position
Desktop
Desktop distance
Mobile
Mobile distance
Position preview
Install code
Install on most websites in under 2 minutes. Paste before the closing </body> tag or use Footer / Custom Code in your website platform.<script>
(function() {
if (window.__gramdesk_tg_button_loaded || document.getElementById('gram_desk_bot_tg_generator_root')) return;
window.__gramdesk_tg_button_loaded = true;
var style = document.createElement('style');
style.innerHTML = `.gram_desk_bot_tg_generator_button{display:inline-flex;align-items:center;justify-content:center;gap:10px;height:46px;padding:0 18px;border-radius:12px;background:#ecad1f;color:#111111;font:15px/1.1 system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;text-decoration:none;border:0;box-sizing:border-box;white-space:nowrap;}
.gram_desk_bot_tg_generator_button:hover{filter:brightness(.97);}
.gram_desk_bot_tg_generator_icon{width:20px;height:20px;color:#111111;flex:0 0 auto;}
.gram_desk_bot_tg_generator_label{display:inline-block;min-width:0;overflow:hidden;text-overflow:ellipsis;}
.gram_desk_bot_tg_generator_label_mobile{display:none;}
.gram_desk_bot_tg_generator_shadow{box-shadow:0 12px 26px rgba(17,24,39,.18);}
.gram_desk_bot_tg_generator_button{position:fixed;z-index:9999;bottom:24px;right:24px;}
@media (max-width: 640px){.gram_desk_bot_tg_generator_button{bottom:16px;right:16px;}}
@media (max-width: 640px){.gram_desk_bot_tg_generator_button{width:46px;padding:0;border-radius:12px;}.gram_desk_bot_tg_generator_label_desktop{display:none;}.gram_desk_bot_tg_generator_label_mobile{display:none;}}`;
document.head.appendChild(style);
var root = document.createElement('div');
root.id = 'gram_desk_bot_tg_generator_root';
var a = document.createElement('a');
a.href = 'https://t.me/GramDeskBot';
a.target = '_blank';
a.rel = 'noopener noreferrer';
a.className = 'gram_desk_bot_tg_generator_button gram_desk_bot_tg_generator_shadow';
a.setAttribute('aria-label', 'Contact support');
a.innerHTML = `<svg class="gram_desk_bot_tg_generator_icon" viewBox="0 0 24 24" aria-hidden="true" xmlns="http://www.w3.org/2000/svg"><path fill="currentColor" d="M23.11 4.49c.32-1.55-1.2-2.83-2.68-2.26L2.34 9.22c-1.65.64-1.72 2.94-.12 3.68l3.94 1.82 1.88 6.55a1 1 0 0 0 1.67.44l2.88-2.89 4.05 3.03c1.17.88 2.86.24 3.16-1.2l3.31-16.16ZM3.06 11.08l18.09-6.99-3.31 16.16-4.74-3.55a1 1 0 0 0-1.31.09l-1.23 1.24.37-2.04 7.28-7.28a1 1 0 0 0-1.2-1.58L6.95 12.88l-3.89-1.8Zm5.12 3.4.6 2.12.24-1.28a1 1 0 0 1 .27-.53l2.22-2.22-3.33 1.91Z"/></svg>
<span class="gram_desk_bot_tg_generator_label gram_desk_bot_tg_generator_label_desktop">Contact support</span>`;
root.appendChild(a);
document.body.appendChild(root);
})();
</script>How to install the button
Copy the Universal Script and paste it before the closing body tag or into your platform custom code area.
Tilda
- Best option for the whole site: open Site Settings -> More -> HTML Code for Head/Body.
- Paste the Universal Script into Before </body>.
- Save and publish all pages.
- Check the homepage, product pages, and mobile version.
- If site-level code is not available, add a T123 - Embed HTML block and paste the Universal Script there. This works only on that page.
WordPress.org
- Install and activate WPCode.
- Open Code Snippets → Header & Footer.
- Paste the complete Universal Script into Footer and save.
- Clear the cache and test the published site on desktop and mobile.
WordPress.com
- For JavaScript, use a plugin-enabled plan with hosting features activated.
- Install WPCode and paste Universal Script into Code Snippets → Header & Footer → Footer.
- If scripts are unavailable, use a normal Button block linked to your Telegram address.
- Test the published page while logged out.
Webflow
- Open Project Settings -> Custom Code.
- Paste the Universal Script into Footer Code.
- Publish the site.
- Check the homepage and mobile version.
Shopify
- Open Online Store -> Themes -> Edit code.
- Open layout/theme.liquid.
- Find </body>.
- Paste the Universal Script right before </body>.
- Save. The button will appear across the store.
- Check the homepage, product pages, cart, and mobile version.
WooCommerce
- WooCommerce uses WordPress, so use WPCode or Header Footer Code Manager.
- Paste the Universal Script into the Footer area and apply it site-wide.
- Without a plugin, paste the script before </body> in footer.php, preferably through a child theme.
- Check product, cart, checkout, desktop, and mobile pages.
Wix
- Open Settings -> Advanced -> Custom Code.
- Click Add Custom Code.
- Paste the Universal Script.
- Set Placement to Body - end.
- Apply it to All Pages and save.
- Publish and check desktop and mobile.
HTML website
- Open index.html or the shared footer/template file.
- Find </body>.
- Paste the Universal Script right before </body>.
- Save and open the site in a browser.
- Check that the button is visible and clickable on desktop and mobile.
Turn the button into a support workflow
Use the generator for the contact entry point, then choose the guide that matches how your website and team handle customer messages.
Need team support inside Telegram?
If you need more than a link button, connect GramDesk to route customer messages into a private Telegram support group with separate topics.
FAQ
Will the Telegram button slow down my website?
No. The generated install script is lightweight and self-contained. It does not load heavy live chat software, external icon libraries, or third-party widget frameworks. The Telegram icon is embedded directly as inline SVG, so there are no external icon requests. For most websites, this kind of button is significantly lighter than traditional live chat widgets and has minimal impact on page speed.
Do I need Telegram API or BotFather to use this button?
No. If you only want to add a Telegram contact button to your website, you do not need Telegram API access or BotFather. You can link the button to a personal Telegram username, a Telegram bot, a support channel, or another Telegram destination. BotFather is only required if you want to create and manage your own custom Telegram bot.
Can I install the Telegram button without a developer?
Yes. The generator is designed for non-technical users as well as developers. In most cases, you only need to copy the generated Universal Script and paste it into your website platform’s Footer, Custom Code section, or before the closing </body> tag. Platforms like Tilda, WordPress, Shopify, Webflow, and Wix usually allow this without building a custom integration from scratch.
Can I add the button to all pages of my website?
Yes. If you place the generated Universal Script in a global Footer or site-wide Custom Code area, the button can appear automatically across all pages of your website. This is the recommended setup for a floating support button, because you only install it once and do not need to repeat the process page by page.
What is the difference between a floating and an inline Telegram button?
A floating button stays fixed on the screen while visitors scroll, so it remains visible and easy to reach from almost any part of the page. This is usually the best option for site-wide support access. An inline button is placed directly inside page content, such as a hero section, a contact block, or a product page, and works more like a traditional call-to-action button.
Can I change the button text, colors, and shape?
Yes. The generator lets you customize the button label, background color, text color, Telegram icon color, border radius, size, and shadow. This makes it easier to match the button to your website design instead of using a generic Telegram-style embed.
Can I use a Telegram bot, channel, or personal username?
Yes. The generator supports several common Telegram link formats, including @username, username, t.me/username, and https://t.me/username. This can point to a Telegram bot, a support channel, or a personal Telegram account, depending on how you want visitors to contact you.
Does the code use external icons or assets?
No. The generated code includes the Telegram icon directly as inline SVG inside the install script. It does not depend on external icon libraries, font icon packs, image URLs, or CDN-hosted assets. This makes the button more portable and reduces the chance of broken icons on production websites.
Can I use this Telegram button instead of live chat?
For many small websites and small businesses, yes. If your main goal is to let visitors ask questions, send quick support requests, or start a conversation, a Telegram button can be a much simpler alternative to a full live chat widget. A traditional live chat system may still make sense for larger support teams or more advanced workflows, but for many use cases a Telegram button is faster to install and easier to manage.
Does this generator create buttons inside Telegram messages?
No. This tool creates a button for a website that opens Telegram. For buttons in the welcome message shown after Start, use the Telegram Start Menu Builder. Buttons in other bot messages require an inline keyboard sent by your bot through the Telegram Bot API.
What if I need team support inside Telegram, not just a button?
A Telegram button is only the entry point for conversations. If you need incoming messages to be routed into a private Telegram support group, separated into topics, and handled by multiple team members, then you need more than just a contact button. In that case, you can connect GramDesk and use Telegram as a lightweight team support system instead of sending messages to one personal account.