Telegram website tool
Telegram Button Generator for Websites
Create a custom Telegram contact button, preview it, and copy ready-to-paste 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.
https://t.me/GramDeskBot
Desktop
Mobile
Position
Desktop
Mobile
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 us');
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 us</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
- Best option: install WPCode or Header Footer Code Manager.
- Open Settings -> Header/Footer Scripts.
- Paste the Universal Script into Footer.
- Choose Site Wide so the button appears on the whole site.
- Save and check desktop and mobile.
- Without a plugin: open Appearance -> Theme File Editor -> footer.php and paste the script before </body>. Use a child theme if possible.
WordPress.com
- On the Business plan, install WPCode or open Settings -> Additional Code -> Footer.
- Paste the Universal Script into the footer area.
- Save and test the published site.
- On a free plan, custom scripts may require upgrading to a plan with Custom Code support.
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.
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.
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.