Как сделать Дискорд на сайте: ссылка и официальный виджет

Сделать Дискорд на сайте можно двумя простыми способами: поставить кнопку с приглашением на сервер или встроить официальный виджет Discord. Кнопка надёжнее и подходит большинству сайтов. Виджет дополнительно показывает название сервера, доступные каналы и число участников онлайн, но требует включения в настройках сервера. Полноценный чат, вход через Discord и бот являются отдельными интеграциями.

Что именно можно добавить на страницу

Сначала выберите ожидаемый результат. Если человеку нужно перейти в сообщество, достаточно ссылки-приглашения. Если важно показать активность сервера прямо на странице, используйте виджет. Если сайт должен узнавать пользователя Discord, понадобится OAuth2 и серверная часть.

• Кнопка-приглашение: минимальная настройка, работает без скриптов и легко проверяется.
• Официальный виджет: показывает краткую информацию о сервере и даёт переход по приглашению.
• Вход через Discord: авторизация пользователя на вашем сайте, требует приложения в Developer Portal.
• Бот: выполняет команды внутри Discord и не заменяет виджет или кнопку на веб-странице.

Официальная модель виджета включает название сервера, приглашение, публично доступные голосовые и сценические каналы, участников онлайн и их общее число. Идентификаторы и аватары участников в ответе виджета обезличиваются, что описано в документации Discord о Guild Widget.

Правило выбора: начните с обычной кнопки. Добавляйте виджет только тогда, когда информация об активности сервера помогает человеку решить, стоит ли вступать.

Что подготовить перед изменением сайта

Нужны права на изменение страницы и доступ к настройкам Discord-сервера. Для кнопки подготовьте действующее приглашение. Для виджета дополнительно выберите канал, который открыт роли @everyone, иначе переход может вести в недоступное место.

• Сделайте резервную копию страницы или зафиксируйте текущую версию в системе контроля версий.
• Создайте отдельное приглашение для сайта, чтобы его можно было заменить независимо от других ссылок.
• Решите, где будет стоять блок: в шапке, рядом с контактами или после полезного материала.
• Подготовьте запасной канал связи для людей, у которых Discord не открывается.
• Не копируйте на страницу токен бота, секрет приложения или другие закрытые ключи.

Если сообщества ещё нет и нужно понять разницу между обычным сервером и сервером с автоматизацией, сначала посмотрите схему сервера с ботами.

По теме: Как сделать сайт с ботом в 2026: связка с Telegram по шагам

Способ 1: добавить ссылку-приглашение

Ссылка подходит для лендинга, блога и страницы контактов. Она не зависит от загрузки внешнего блока и остаётся понятной, даже если браузер запретил сторонние элементы.

1. Создайте приглашение. В Discord откройте канал, доступный новой аудитории, выберите создание приглашения и скопируйте полученный адрес.
2. Проверьте срок действия. Настройте срок и число использований под свою задачу. Для постоянной страницы не используйте ссылку, которая скоро перестанет работать.
3. Добавьте ссылку. В HTML используйте обычный элемент a и оставьте полный адрес только в атрибуте href.
4. Сделайте кнопку понятной. Текст «Вступить в Discord» точнее, чем значок без подписи. Добавьте заметный фокус для клавиатуры.
5. Проверьте выход из сайта. Открывайте приглашение в новой вкладке только если это ожидаемо, а рядом не прячьте важные условия участия.

<a class="discord-link"
   href="https://discord.gg/INVITE_CODE"
   target="_blank"
   rel="noopener noreferrer">
  Вступить в Discord
</a>

Для постоянной точки входа Discord рекомендует использовать приглашение без короткого срока действия. В официальном руководстве также советуют размещать ссылку там, где человек уже понимает пользу сообщества: рекомендации Discord по приглашениям.

Способ 2: встроить официальный виджет Discord

Виджет подходит для страницы сообщества. Он не превращает сайт в Discord-клиент: посетитель видит краткую карточку сервера и переходит в Discord для общения. Сам Discord описывает включение виджета, выбор настроек приглашения и копирование HTML-кода в официальной инструкции.

1. Включите виджет. Откройте настройки сервера Discord и найдите раздел Server Widget или «Виджет сервера».
2. Выберите канал. Он должен быть доступен роли @everyone, чтобы новое приглашение вело в видимую часть сервера.
3. Скопируйте код. Используйте HTML, который показывает сам Discord, и не заменяйте домен или параметры случайным примером из чужой статьи.
4. Ограничьте ширину. Поместите iframe в контейнер, который не выходит за экран телефона. Высоту задайте так, чтобы внутри блока не появлялась неудобная двойная прокрутка.
5. Добавьте запасную ссылку. Под виджетом оставьте обычную кнопку-приглашение на случай блокировки внешнего фрейма.

<div class="discord-box">
  <!-- Вставьте iframe, скопированный из настроек Discord -->
</div>
<p><a href="https://discord.gg/INVITE_CODE">Открыть Discord</a></p>

Если на сайте действует политика безопасности содержимого, разрешите домен Discord только в директиве frame-src. Не ослабляйте всю политику значением *. После изменения проверьте консоль браузера: сообщение о блокировке фрейма прямо укажет на нарушенную директиву.

По теме: Как сделать кейс сайта: структура, доказательства и проверка

Как проверить блок до публикации

Проверка должна охватывать сам сайт, приглашение и доступ нового пользователя. Сеанс владельца сервера скрывает часть ошибок, поэтому откройте страницу в приватном окне или используйте отдельный тестовый аккаунт.

• Страница открывается по HTTPS без предупреждений о смешанном содержимом.
• Кнопка ведёт на ожидаемый сервер, а приглашение действительно для нового аккаунта.
• Виджет загружается на компьютере и телефоне, не выходит за ширину экрана.
• Клавиша Tab выделяет ссылку, а текст кнопки понятен без изображения.
• При отключённом виджете или блокировке фрейма остаётся рабочая запасная ссылка.
• В исходном HTML нет токена бота, секрета OAuth2 и закрытых адресов панели управления.

Почему виджет пустой или приглашение не работает

Ищите ошибку по порядку: сначала настройки Discord, затем ссылку, после этого ограничения браузера и сайта. Такой порядок не даёт менять код, пока виджет просто выключен на стороне сервера.

1. Пустой прямоугольник. Убедитесь, что Server Widget включён и в скопированном коде указан идентификатор вашего сервера.
2. Отказ во встраивании. Откройте консоль браузера и проверьте frame-src, блокировщик содержимого и расширения приватности.
3. Приглашение недействительно. Создайте новую ссылку, проверьте срок и лимит использований, затем замените адрес в кнопке.
4. Канал не виден. Проверьте права @everyone и выбранный канал приглашения. Не открывайте ради виджета закрытые рабочие каналы.
5. На телефоне блок обрезан. Уберите фиксированную внешнюю ширину, задайте контейнеру max-width: 100% и проверьте страницу на узком экране.

По теме: Как сделать свадебный сайт: приглашение, RSVP и проверка

Когда нужна авторизация или бот

Кнопка и виджет не дают сайту данные аккаунта Discord. Если человек должен войти на сайт через Discord, зарегистрируйте приложение и используйте OAuth2 Authorization Code на серверной стороне. Discord рекомендует проверять параметр state, а токены считать секретами: официальная документация OAuth2.

Если задача состоит в командах, уведомлениях или модерации внутри сервера, нужен бот. Его токен нельзя вставлять в браузерный JavaScript или HTML. Пошаговый путь вынесен в отдельную статью о том, как создать бота в Discord.

Когда Discord не должен быть единственным каналом

Не делайте Discord единственным способом получить поддержку, оплатить услугу или восстановить доступ. Сеть, региональные ограничения и правила самого сервера могут помешать переходу. Оставьте на сайте электронную почту, форму или другой доступный контакт.

Частые вопросы

Можно ли вставить чат Discord прямо на сайт?

Официальный серверный виджет не является полным чатом. Он показывает краткую информацию и переводит человека в Discord. Для собственной переписки на сайте нужна отдельная система.

Нужен ли бот для кнопки-приглашения?

Нет. Достаточно создать приглашение в нужном канале и вставить ссылку на страницу.

Почему ссылка перестала работать?

Обычно истёк срок, закончился лимит использований или приглашение удалили. Создайте отдельную ссылку для сайта и проверяйте её после изменений сервера.

Как узнать идентификатор сервера для виджета?

Надёжнее не переписывать его вручную, а скопировать готовый HTML в разделе Server Widget. Тогда Discord подставит нужный идентификатор и параметры.