портал технической поддержки

#ОБРАЗОВАНИЕ22

Хостинг сайтов

в домене edu22.info

Размещение баннера ПОС с Госуслуг на сайте образовательной организации

инструкция для пользователей

Требования к размещению виджета Электронной формы сообщения (ЭФС) на сайте для создания единого окна цифровой обработки связи через федеральную государственную информационную систему «Единый портал
государственных и муниципальных услуг (функций)» (ЕПГУ).

В связи с поставленными требованиям и не смотря на приложенную инструкцию возникает немало восросов и трудностей в установке данного виджета (баннера).

Всё дело в том, что данный вариант баннера устанавливается несколько иначе чем обычный баннер-ссылка на сторонний сайт.
Обычный баннер,  к которому мы привыкли, является картинкой-ссылкой. Чтобы установить такой баннер, достаточно загрузить подготовленное изображение в нужное место на сайте и наложить на него ссылку на определенный сайт. Т.е. при клике по изображению, пользователя переносит на соответствующий сайт, адрес которого мы прописали в ссылке.
Баннер (виджет) ПОС же является специальным скриптом, при клике на который пользователю открывается окно с формой подачи сообщения, не перенося его на другой сайт.
Т.е., для создания такого баннера, нам требуется разместить на сайте код скрипта, который нам даётся при создании этого виджета на портале "Государственных и муниципальных услуг" - https://www.gosuslugi.ru/ .

Самым простым способом является метод установки кода скрипта прямо в редактор модуля HTML-кода в режиме кода.
Но редактор не всегда позволяет корректно вставить код скрипта, т.к. в CMS заложена защита сайта от посторонних скриптов и она просто убирает целиком этот код или искажает его, после чего код не выполняет свою задачу.

Как обойти эту проблему и корректно установить код скрипта виджета ПОС рассмотрим ниже для популярных CMS.


CMS Joomla

Установите плагин для вставки кодов, например бесплатный плагин Sourcerer от разработчика Regular Labs - https://regularlabs.com/sourcerer (для Joomla). Внимание, версия плагина должна поддерживать версию CMS, иначе он работать не будет!


Установку виджета ПОС производим с помощью модуля, так как это нам в дальнейшем позволит перемещать, при необходимости, виджет по позициям на странице.
Откроем "Расширения"->"Модули" и создадим новый модуль типа "HTML-код".


После установки плагина Sourcerer в редакторе материалов и модулей появится специальная кнопка, при клике по которой открывается окно вставки кода. Сюда вставляем скопированный скрипт из инструкции по установке виджета с ЕПГУ. Внимание ниже слайдер с несколькими скриншотами.


Далее нажимаем кнопку "Вставить" и видим как данный скрипт вписался в текстовый редактор обрамлённый тегами {source}{/source} - именно по этим тегам плагин передаст CMS задачу, что данный код нельзя изменять, а нужно обработать так как он прописан.


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


Здесь всё просто... Перейдите в админ.панели CMS Joomla в раздел "Расширения" -> "Шаблоны" -> "Стили" и войдите в настройки по кнопке в правом углу окна. Здесь в поле "Просмотр позиций модулей" должно быть отмечено "Включено", если нет, то включите сами и сохраните настройки. Вернитесь в раздел "Расширения" -> "Шаблоны" -> "Стили", теперь по клику на значок (глаз) предпросмотра шаблона или просто перейдите по адресу <адрес сайта>/index.php?tp=1, вы сможете увидеnь все наименования позиций, которые предусмотрены шаблоном сайта.
Внимание ниже слайдер с несколькими скриншотами.


Выберите ту из них, которая больше подходит для данного баннера и запомните как называется эта позиция. Для примера разместим модуль с баннером ПОС в Position: right. Для этого возвращаемся к настройкам нашего модуля и в правой панели находим пункт "Позиция", где в раскрывающемся списке относительно имени нашего шаблона указываем нужную позицию, в моём случае Right.
Если так же необходимо указать на каких страницах сайта следует отобразить модуль, то произведите настройки во вкладке "Привязка к пунктам меню".


Сохраняем все настройки модуля и теперь наш виджет можно увидеть на сайте.


Если Вы выбрали позицию расположения баннера ПОС, как в этой инструкции, в боковой колонке, то он может вылезать за пределы колонки. Это легко поправить...
Вернитесь в редактирование модуля и найдите в коде скрипта в первых строках значение стиля min-width:293px;, именно он не даёт вписать модуль в колонку. Просто измените 293 на 200 (или другое подходящее значение для вашего шаблона), получится min-width:200px; и модуль сократится по ширине. Скриншот правки значения смотрите на втором слайде выше.
Если Вы всё сделали как указано в инструкции, но баннер отображается некорректно или при нажатии на кнопку баннера окно ввода сообщения не открывается. То вероятно Ваш шаблон не считывает подключение скрипта.
В таком случае...
Строки, что описаны в инструкции о подключении в теги head и перед закрывающимся body прописываются непосредственно в файл шаблона
- / httpdocs / templates / <имя шаблона> / index.php
Из самого скрипта следует первую и последнюю строки удалить, т.к. мы их прописали в файле шаблона.


CMS WordPress

Установите плагин для вставки кодов, например бесплатный плагин Shortcoder автора Aakash Chakravarthy - https://www.aakashweb.com/wordpress-plugins/shortcoder/ (для WordPress) воспользовавшись поиском в установщике плагинов.  Внимание, версия плагина должна поддерживать версию CMS, иначе он работать не будет!


После установки и активации плагина в панели управления WP появится соответствующий раздел Shortcoder, где в подразделе "Create shortcode" впишите название скрипта (используйте латинские символы!!!) и вставьте в окно скопированный скрипт из инструкции по установке виджета с ЕПГУ.
Опубликуйте скрипт и скопируйте шорткод данного скрипта для последующей вставки в виджет.


Теперь перейдём в раздел админ.панели "Внешний вид" -> "Виджеты" и создадим новый виджет типа "Текст" (если создадите виджет типа HTML-код, то виджет может отображаться некорректно), перетащив его в ту область позиции, где требуется отобразить его на сайте. Можете это выполнить внутри редактора виджетов или используя визуальную настроку. Например, разместим наш баннер ПОС в "Основную область".
В поле содержимого виджета вставляем раннее скопированный шорткод вызова скрипта из плагина Shortcoder. Внимание ниже слайдер с несколькими скриншотами.


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


Если Вы выбрали позицию расположения баннера ПОС, как в этой инструкции, в боковой колонке, то он может вылезать за пределы колонки. Это легко поправить...
Вернитесь в редактирование скрипта в разделе Shortcoder и найдите в коде скрипта в первых строках значение стиля min-width:293px;, именно он не даёт вписать модуль в колонку. Просто измените 293 на 200 (или другое подходящее значение для вашего шаблона), получится min-width:200px; и модуль сократится по ширине. Скриншот правки значения смотрите на втором слайде выше.
Если Вы всё сделали как указано в инструкции, но баннер отображается некорректно или при нажатии на кнопку баннера окно ввода сообщения не открывается. То вероятно Ваш шаблон не считывает подключение скрипта.
В таком случае...
Строки, что описаны в инструкции о подключении в теги head и перед закрывающимся body прописываются непосредственно в файлы шаблона:
- / httpdocs / wp-content / themes / <имя шаблона> / header.php
- / httpdocs / wp-content / themes / <имя шаблона> / footer.php
Из самого скрипта следует первую и последнюю строки удалить, т.к. мы их прописали в файле шаблона.