Статья была полезной?
После создания виджета в GetCourse его можно разместить несколькими способами на странице сервиса Tilda.
Рассмотрим основные варианты:
Обратите внимание: для корректного отображения двух и более одинаковых виджетов на странице, необходимо добавить в код скрипта какой-либо параметр (для каждой копии виджета свое значение). В противном случае в браузере может отображаться только один из нескольких виджетов.
Например: <script id="43b1724fc95ea6ca6e362b0f164ea4812c57ea70" src="https://test.getcourse.ru/pl/lite/widget/script?id=143846&rand=случайный_набор_букв"></script> <script id="43b1724fc95ea6ca6e362b0f164ea4812c57ea70" src="https://test.getcourse.ru/pl/lite/widget/script?id=143846&rand=другой_случайный_набор_букв"></script>
Где &rand=случайный_набор_букв и &rand=другой_случайный_набор_букв — параметры, которые нужно добавить к виджетам. (Вместо значений параметров из примера нужно использовать свои).
1. Вставка виджета в HTML-блок
Как объединить сайт на Тильде и GetCourse
Скопируйте код созданного виджета:
На странице Tilda добавьте блок из раздела «Другое» T123 — «HTML-код»:
Кликните по кнопке «Контент»:
В появившемся окне вставьте скопированный код виджета и сохраните изменения по кнопке «Сохранить и закрыть»:
Чтобы виджет отобразился на странице, её необходимо опубликовать:
2. Вставка «старого виджета» в HTML-блок
После создания «старого виджета» по ссылке ваш_аккаунт/cms/control/xdget/new (например, виджета с формой обратной связи), можно скопировать его код:
и вставить в блок T123 — «HTML-код» аналогичным образом:
При необходимости блок с виджетом можно отцентрировать, выставив отступы в «Настройках»:
3. Вставка виджета через HTML-код формы в HTML-блок
Для вставки виджета через HTML-код формы в HTML-блок необходимо скопировать его код:
Добавить на странице Tilda блок T123 — «HTML-код»:
и вставить код в «Контент» блока:
Виджет отобразится на странице после опубликования изменений.
4. Вставка виджета в PopUp
Рассмотрим, как настроить открытие виджета GetCourse во всплывающем окне при клике на кнопку. Для этого на странице Tilda нужно будет вставить два блока. Первым вставьте блок из раздела «Другое» T868 — «HTML-код в попапе»:
Кликните по кнопке «Контент»:
В появившемся окне нужно вставить код виджета, скопированный со страницы «Настройки и код виджета» в аккаунте:
Скопируйте ссылку на PopUp, чтобы далее использовать ее в следующем блоке:
Добавьте блок с кнопкой, при нажатии на которую будет всплывать форма виджета:
Вставить кнопку можно блоком из раздела «Форма и кнопка» — BF101 «Кнопка»:
Кликнув по кнопке «Контент» вставьте скопированную ссылку на PopUp:
Опубликуйте изменения на странице:
Аналогичным образом можно настроить показ PopUp не только при клике на кнопку, но и для блоков с триггерами (T183, T188, T723):
В меню «Контент» каждого такого блока также нужно будет прописать ссылку на PopUp:
Если в виджете много полей и форма полностью не помещается по высоте окна браузера, то нужно задать высоту в настройках блока с кодом виджета:
До и после задания высоты блоку с кодом виджета:
5. Вставка «старого виджета» в PopUp
Для отображения «старого виджета» в PopUp блоке T868 — «HTML-код в попапе» необходимо вставить его код:
и добавить к нему для задания высоты всплывающего окна, например, такую строчку кода:
<script> iframe.setAttribute("height", "499") </script>
Значение height (высоту блока в пикселях) вы можете отрегулировать по своему усмотрению.
Далее настроить показ PopUp при клике на кнопку или для блоков с триггерами.
В меню «Контент» указанных блоков вставьте скопированную ссылку на PopUp:
6. Вставка виджета через HTML-код формы в PopUp
Для вставки HTML-кода формы в PopUp блоке T868 — «HTML-код в попапе» необходимо добавить его код в «Контент» блока:
Затем настроить показ PopUp при клике на кнопку или для блоков с триггерами (аналогично описанному алгоритму выше).
