Как разместить виджет госуслуг на сайте? - коротко
Получите код виджета в личном кабинете госуслуг, скопируйте его и вставьте в HTML‑разметку сайта перед закрывающим тегом
Получите код виджета в личном кабинете госуслуг, скопируйте его и вставьте в HTML‑разметку сайта перед закрывающим тегом
Для интеграции виджета госуслуг в ваш веб‑ресурс необходимо выполнить несколько последовательных действий. Каждый из этапов прост и не требует глубоких технических знаний, если вы знакомы с базовыми принципами работы HTML‑страниц.
Во-первых, зарегистрируйтесь в личном кабинете разработчика на портале государственных услуг. После подтверждения учетной записи в кабинете появится раздел «Виджеты», где можно создать новый виджет. При создании укажите тип сервиса, который будет отображаться (например, запись на прием, проверка статуса заявки и т.п.), задайте название и задайте параметры отображения: ширину, высоту, цветовую схему. Система автоматически сформирует код‑фрагмент, готовый к вставке.
Во-вторых, скопируйте полученный JavaScript‑код. Он обычно выглядит как <script src="https://widget.gosuslugi.ru/..."></script> с дополнительными атрибутами, определяющими параметры виджета. Убедитесь, что код скопирован полностью, без лишних пробелов и переносов.
Третий шаг – разместите код на своей странице. Откройте HTML‑файл, в котором хотите видеть виджет, и вставьте скрипт в том месте, где должна появиться интерактивная область. Чаще всего это делается внутри тега <div> с заданным идентификатором, например:
<div id="gosuslugi-widget"></div>
<script src="https://widget.gosuslugi.ru/loader.js"
data-widget-id="YOUR_WIDGET_ID"
data-width="100%"
data-height="600px">
</script>Если ваш сайт использует CMS (WordPress, Joomla, Drupal и т.п.), вставьте код в соответствующий модуль «HTML‑блок» или «Вставка кода». В большинстве систем достаточно добавить блок в нужный раздел шаблона и сохранить изменения.
После размещения проверьте работу виджета в браузере. Откройте страницу, убедитесь, что элемент загружается без ошибок, а все функции (форма ввода, кнопки, ссылки) работают корректно. При необходимости скорректируйте параметры data-width и data-height, чтобы виджет гармонично вписался в дизайн сайта.
Если возникнут проблемы с отображением, выполните следующие действия:
widget.gosuslugi.ru.После успешного тестирования разместите виджет на всех нужных страницах сайта, используя тот же код или создавая отдельные экземпляры с различными параметрами. Теперь пользователи смогут получать услуги напрямую с вашего ресурса, не покидая его.