GramDesk GramDesk
ru
English Русский Español Português
Подключить

Инструмент Telegram для сайта

Генератор Telegram-кнопки для сайта

Настройте Telegram-кнопку, посмотрите preview и скопируйте готовый код для вставки.

Укажите ссылку, стиль, иконку, позицию и формат кода. Иконка вставляется как inline SVG, без внешних файлов и CDN.

Укажите Telegram-бота, канал или username. Например: @GramDeskBot, username, t.me/username.

https://t.me/GramDeskBot

Десктоп

Мобильный

Позиция

Десктоп

Отступ на десктопе

Мобильный

Отступ на мобильном
Preview позиции
Preview кнопки
Contact us

Код для установки

Установите на большинство сайтов меньше чем за 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', '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>

Как установить кнопку

Скопируйте 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 или Header Footer Code Manager.
  • Откройте Settings -> Header/Footer Scripts.
  • Вставьте Universal Script в Footer.
  • Выберите Site Wide, чтобы кнопка появилась на всем сайте.
  • Сохраните и проверьте desktop и mobile.
  • Без плагина: откройте Appearance -> Theme File Editor -> footer.php и вставьте script перед </body>. Лучше делать через child theme.
WordPress.com
  • На тарифе Business установите WPCode или откройте Settings -> Additional Code -> Footer.
  • Вставьте Universal Script в footer-зону.
  • Сохраните и проверьте опубликованный сайт.
  • На бесплатном тарифе может понадобиться переход на тариф с поддержкой Custom Code.
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-кнопка только открывает вход в диалог. Если нужно, чтобы обращения попадали в приватную Telegram-группу, разделялись по топикам и обрабатывались несколькими участниками команды, одной кнопки недостаточно. В таком случае можно подключить GramDesk и использовать Telegram как легкую систему поддержки команды.