Кнопка на сайте
Используйте этот генератор. Он создаёт HTML или JavaScript для плавающей или встроенной кнопки, которая открывает username, бота, канал или группу Telegram.
Инструмент Telegram для сайта
Генератор Telegram-кнопки для сайта
Настройте Telegram-кнопку, посмотрите preview и скопируйте готовый код для вставки.
Укажите ссылку, стиль, иконку, позицию и формат кода. Иконка вставляется как inline SVG, без внешних файлов и CDN.
Укажите Telegram-бота, канал или username. Например: @GramDeskBot, username, t.me/username.
Десктоп
Готовый текст
Мобильный
Позиция
Десктоп
Отступ на десктопе
Мобильный
Отступ на мобильном
Preview позиции
Код для установки
Установите на большинство сайтов меньше чем за 2 минуты. Вставьте перед закрывающим </body> или используйте Footer / Custom Code в вашей платформе.<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', 'Связаться с поддержкой');
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">Связаться с поддержкой</span>`;
root.appendChild(a);
document.body.appendChild(root);
})();
</script>Как установить кнопку
Скопируйте Universal Script и вставьте его перед закрывающим body tag или в custom code вашей платформы.
Tilda
- Лучший вариант для всего сайта: откройте Site Settings -> More -> HTML Code for Head/Body.
- Вставьте Universal Script в Before </body>.
- Сохраните и опубликуйте все страницы.
- Проверьте главную, карточки товаров и мобильную версию.
- Если нет доступа к site-level code, добавьте блок T123 - Embed HTML и вставьте Universal Script туда. Это сработает только на конкретной странице.
WordPress.org
- Установите и активируйте WPCode.
- Откройте Code Snippets → Header & Footer.
- Вставьте полный Universal Script в Footer и сохраните.
- Очистите кеш и проверьте опубликованный сайт на компьютере и телефоне.
WordPress.com
- Для JavaScript нужен тариф с плагинами и активированными функциями хостинга.
- Установите WPCode и вставьте Universal Script в Code Snippets → Header & Footer → Footer.
- Если скрипты недоступны, используйте обычный блок кнопки со ссылкой на Telegram.
- Проверьте опубликованную страницу без входа в админку.
Webflow
- Откройте Project Settings -> Custom Code.
- Вставьте Universal Script в Footer Code.
- Опубликуйте сайт.
- Проверьте главную и мобильную версию.
Shopify
- Откройте Online Store -> Themes -> Edit code.
- Откройте layout/theme.liquid.
- Найдите </body>.
- Вставьте Universal Script прямо перед </body>.
- Сохраните. Кнопка появится на всем магазине.
- Проверьте главную, товары, корзину и мобильную версию.
WooCommerce
- WooCommerce работает на WordPress, поэтому используйте WPCode или Header Footer Code Manager.
- Вставьте Universal Script в Footer и примените ко всему сайту.
- Без плагина вставьте script перед </body> в footer.php, лучше через child theme.
- Проверьте product, cart, checkout, desktop и mobile pages.
Wix
- Откройте Settings -> Advanced -> Custom Code.
- Нажмите Add Custom Code.
- Вставьте Universal Script.
- Placement выберите Body - end.
- Apply выберите All Pages и сохраните.
- Опубликуйте и проверьте desktop и mobile.
HTML website
- Откройте index.html или общий footer/template файл.
- Найдите </body>.
- Вставьте Universal Script прямо перед </body>.
- Сохраните и откройте сайт в браузере.
- Проверьте, что кнопка видна и кликабельна на desktop и mobile.
Превратите кнопку в рабочий процесс поддержки
Используйте генератор как точку входа, а затем выберите инструкцию под ваш сайт и способ обработки обращений командой.
Нужна командная поддержка внутри Telegram?
Если нужна не просто кнопка-ссылка, подключите GramDesk: обращения клиентов будут попадать в приватную Telegram-группу с отдельными топиками.
FAQ
Замедлит ли Telegram-кнопка мой сайт?
Нет. Сгенерированный install script легкий и самодостаточный. Он не загружает тяжелый live chat, внешние библиотеки иконок или сторонние widget framework. Иконка Telegram встроена прямо как inline SVG, поэтому для нее не нужны дополнительные внешние запросы. Для большинства сайтов такая кнопка заметно легче обычных live chat-виджетов и почти не влияет на скорость страницы.
Нужны ли Telegram API или BotFather, чтобы использовать кнопку?
Нет. Если вам нужно просто добавить Telegram-кнопку контакта на сайт, доступ к Telegram API и BotFather не нужен. Кнопка может вести на личный username, Telegram-бота, канал поддержки или другую Telegram-ссылку. BotFather нужен только если вы хотите создать и управлять собственным Telegram-ботом.
Можно ли установить Telegram-кнопку без разработчика?
Да. Генератор рассчитан и на обычных пользователей, и на разработчиков. Обычно достаточно скопировать Universal Script и вставить его в Footer, Custom Code или перед закрывающим тегом </body>. В Tilda, WordPress, Shopify, Webflow и Wix это часто можно сделать без отдельной разработки.
Можно ли добавить кнопку на все страницы сайта?
Да. Если вставить Universal Script в глобальный Footer или site-wide Custom Code, кнопка будет автоматически появляться на всех страницах сайта. Для floating support button это обычно лучший вариант: вы устанавливаете код один раз и не повторяете установку на каждой странице отдельно.
Чем floating Telegram-кнопка отличается от inline-кнопки?
Floating-кнопка закреплена на экране и остается видимой при прокрутке, поэтому посетитель может быстро открыть Telegram почти из любой части сайта. Inline-кнопка находится внутри контента страницы, например в hero-блоке, контактах или карточке товара, и работает как обычная CTA-кнопка.
Можно ли изменить текст, цвета и форму кнопки?
Да. Генератор позволяет настроить текст кнопки, цвет фона, цвет текста, цвет Telegram-иконки, радиус скругления, размер и тень. Так кнопку проще привести к стилю вашего сайта, а не использовать стандартный Telegram embed без настройки.
Можно ли использовать Telegram-бота, канал или личный username?
Да. Генератор поддерживает основные форматы Telegram-ссылок: @username, username, t.me/username и https://t.me/username. Такая ссылка может вести на Telegram-бота, канал поддержки или личный аккаунт, в зависимости от того, как вы хотите принимать обращения.
Использует ли код внешние иконки или ассеты?
Нет. Сгенерированный код включает Telegram-иконку прямо внутрь install script как inline SVG. Он не зависит от внешних icon library, font icon pack, image URL или CDN. Это делает кнопку более переносимой и снижает риск, что иконка сломается на продакшене.
Можно ли использовать Telegram-кнопку вместо live chat?
Для многих небольших сайтов и малых бизнесов да. Если задача — дать посетителю быстро задать вопрос или начать разговор, Telegram-кнопка часто проще полноценного live chat-виджета. Live chat может быть нужен большим командам и сложным support workflow, но для многих сценариев Telegram-кнопка быстрее устанавливается и проще поддерживается.
Этот генератор создаёт кнопки внутри сообщений Telegram?
Нет. Инструмент создаёт кнопку для сайта, которая открывает Telegram. Для кнопок в приветствии после Start используйте генератор стартового меню. Кнопки в других сообщениях требуют inline keyboard, которую ваш бот отправляет через Telegram Bot API.
Что делать, если нужна командная поддержка внутри Telegram, а не просто кнопка?
Telegram-кнопка только открывает вход в диалог. Если нужно, чтобы обращения попадали в приватную Telegram-группу, разделялись по топикам и обрабатывались несколькими участниками команды, одной кнопки недостаточно. В таком случае можно подключить GramDesk и использовать Telegram как легкую систему поддержки команды.