Чтобы добавить кнопку Telegram на HTML-сайт, достаточно обычной ссылки:
<a href="https://t.me/your_support_bot">Написать в Telegram</a>Замените your_support_bot на реальный username. Для бизнеса лучше использовать бот, а не личный аккаунт сотрудника.
Простая текстовая ссылка
Элемент <a> надёжнее сложного виджета: работает без JavaScript, понятен браузеру и доступен с клавиатуры. Не используйте фальшивые ссылки с javascript:void(0) — они ломают стандартное поведение и доступность.
Кнопка с CSS
<a class="telegram-contact" href="https://t.me/your_support_bot">
Написать в Telegram
</a>.telegram-contact {
display: inline-flex;
min-height: 44px;
align-items: 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:focus-visible {
outline: 3px solid #0f0f0f;
outline-offset: 3px;
}Минимальная высота 44 пикселя удобна на сенсорном экране. Не убирайте видимый focus для клавиатуры.
Плавающая кнопка
Добавьте ссылку ближе к концу <body> и фиксированное позиционирование:
.telegram-contact--floating {
position: fixed;
right: 20px;
bottom: 20px;
z-index: 50;
box-shadow: 0 10px 30px rgba(0,0,0,.16);
}На мобильном проверьте, что кнопка не закрывает меню, cookie-баннер, корзину или другой CTA.
Deep link и источник перехода
Telegram официально поддерживает параметр start для ботов:
https://t.me/your_support_bot?start=pricing_pageБот получит /start pricing_page. Так можно отличить переход с цены, товара или статьи. Не помещайте в URL персональные данные клиента.
Куда должна вести кнопка
| Цель | Подходит для | Ограничение |
|---|---|---|
| Личный username | Личный неформальный контакт | Нельзя нормально разделить с командой |
| Канал | Новости | Не приватная поддержка |
| Группа | Сообщество | Вопрос клиента могут увидеть другие |
| Бизнес-бот | Поддержка и маршрутизация | Нужно настроить процесс ответа |
Где размещать
Ставьте контекстные кнопки рядом с ценами, товарами, доставкой, записью и инструкциями. Текст «Спросить о наличии» обычно понятнее одной иконки Telegram. Если сайт использует общий footer-шаблон, добавьте плавающую кнопку туда, чтобы поддерживать код в одном месте.
Генератор GramDesk
Telegram Button Generator создаёт готовый код с текстом, иконкой, цветами, размером и мобильным поведением. Universal Script можно вставить перед </body> или в общий footer.
Генератор создаёт точку входа. Для командной обработки подключите бот к GramDesk: клиент пишет приватно, а сотрудники отвечают из одной рабочей группы.
Проверка перед публикацией
Проверьте production-страницу на компьютере и телефоне, переход в правильный бот, работу клавиатуры и отсутствие перекрытий. Затем отправьте настоящее сообщение, ответьте из команды и убедитесь, что ответ вернулся клиенту.
Частые вопросы
Нужен ли JavaScript?
Нет. Для базовой кнопки достаточно обычной ссылки https://t.me/....
Можно ли добавить иконку?
Да. Используйте inline SVG или локальный файл, но оставьте понятный текст или aria-label.
Как отслеживать источник?
Используйте start параметр бота и обычное событие клика в аналитике.