Как встроить виджет платформы «PRO.Культура.РФ» на свой сайт

Виджеты платформы «PRO.Культура.РФ» помогают решать большое количество задач: анонсирование событий, сбор контактов посетителей сайта и отзывов об учреждении, наполнение сайта учреждения. Однако мало просто создать виджет, главное – правильно установить его на сайте. 

Чтобы узнать, что такое виджеты и как их можно использовать, рекомендуем прочесть статью.

В личном кабинете учреждения на платформе «PRO.Культура.РФ» можно создавать виджеты двух форматов: динамический и статический. Они отличаются не только визуально, но и по способу встраивания в сайт. 

Динамический виджет (формат «Всплывающее диалоговое окно») – появляется после открытия страницы, на которой он размещен, поверх всех остальных элементов. Благодаря такому формату можно привлечь внимание посетителей сайта учреждения к конкретному событию или попросить оставить отзыв об учреждении.

Статический виджет (форматы «Блок внизу страницы», «Встроенный», «Полоса в верху страницы» и другие) – неподвижный блок в определенной части сайта. В этом блоке может содержаться анонс события или нескольких, карта, форма подписки на новости учреждения. 

Внимание! Выбор статического или динамического формата зависит от содержимого виджета, наличия/отсутствия формы обратной связи и самого сайта, на который планируется установить виджет.

Мы рекомендуем попробовать оба формата и посмотреть, какой визуально и функционально привлекательнее через инструмент «Предпросмотр». Кнопка располагается в карточке виджета.

Каким же образом вставить виджет на сайт? Точный алгоритм установки зависит от платформы, на которой сделан сайт, но в большинстве случаев достаточно следовать следующей инструкции.

Шаг первый: открыть панель администрирования сайта. Найти раздел, управляющий страницей, на которую планируется разместить виджет. Открыть стандартный редактор страницы.

Шаг второй: нажать кнопку «Открыть как текст»/HTML/«Текстовое поле» или любую другую, которая открывает размеченный HTML-текст вместо обычного текста.

Для адекватной работы динамических виджетов следует вставить JavaScript-код. Его можно скопировать из блока JavaScript на карточке виджета в личном кабинете учреждения.

Внимание! JavaScript-код для всплывающего виджета можно вставить не только в конкретный текстовый блок, но и в любое место страницы, например, в блок для счетчиков. Размер виджета формируется автоматически.

Для корректного отображения статических виджетов можно использовать как JavaScript так и HTML-код (также доступен в карточке виджета).

Внимание! При вставке HTML-кода следует обратить внимание на значение параметров width и height – они задают размеры рамки, в которую можно поместить виджет. Если рамка будет больше блока, куда устанавливается виджет, отображение будет некорректным. Размеры можно подобрать вручную, если неизвестен точный размер страницы.

Пример: если размер блока, куда необходимо поместить виджет, имеет ширину 700 пикселей, а в высоту 1500 пикселей, следует при вставке изменить стандартные параметры виджета.

Шаг четверый: оценить корректность вставки виджета через механизм предпросмотра или после сохранения страницы. Если появилась необходимость удалить виджет – достаточно просто открыть текстовое поле, где вставлен код, и удалить код виджета.

Обратите внимание! Для обновления виджета одного типа не нужно все время создавать новые сущности на платформе «PRO.Культура.РФ» и вставлять их на сайт – достаточно просто отредактировать готовый виджет в своем кабинете. 

Пример. На сайте установлен динамический виджет «Анонс». Сотрудник желает поменять его на «Анонс события». Формат виджета при этом не меняется. Для этого необходимо найти виджет на платформе «PRO.Культура.РФ» и отредактировать его: выбрать другой тип и остальные параметры и сохранить виджет. Все изменения мгновенно отобразятся во встроенном виджете. 

Данная инструкция универсальна для большинства современных платформ сайтов. На некоторые из них, например, Wordpress и Joomla, виджет можно установить через специальные модули.

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