Wiki

Размещение виджета в DOM странице

Для ускорения загрузки страницы с виджетом, его код можно разместить прямо в DOM страницы, то есть без использования iframe (браузер в браузере), как у обычного виджета. В этом случае код и функционал такого виджета немного отличаются друг от друга.

Код виджета для размещения в DOM страницы


window.FOQUZ_SDK = {
widget: {
widget_code: "8a64a39a2a1cb187bc9*4d1dc9e3",
},
params: {
},
};

(function(f, o, q, u, z) {
u = o.createElement("script");
z = o.getElementsByTagName("script")[0];
u.async = 1;
u.type = "module";
u.src = q; // + "?t=" + Date.now();
z ? z.parentNode.insertBefore(u, z) : o.head.appendChild(u);
})(window, document, "https://foquz.ru/widgets/dom/widget.js");

В третьей строке нужно поменять значение widget_code на то, которое отображается в коде iframe виджета у вас в интерфейсе, то есть вместо 8a64a39a2a1cb187bc94d1dc9e3. После чего можете вставлять этот код к себе на сайт.

Общие особенности DOM виджета

  • доступен для визуализаций Hello-board и Упрощенный Page-stop;
  • опции в типах вопросов Галерея фото/видео и Название вопроса не отображаются в окне опроса, размещенного в DOM;
  • в шкальных типах вопросов (например, Звездный рейтинг), если нет опций комментария или уточняющего вопроса, то при клике на оценку ответ сразу сохраняется, а респондент автоматически переходит на следующий шаг;
  • также пока не реализованы: размещение нескольких вопросов на одной странице, логические переходы (но логика отображения доступна), функция наследования вариантов ответа, а также переменные с суффиксом .COPY.

Настройки дизайна DOM-виджета

  • фон Hello-board берется из выставленного фона мобильного, если его нет, то берется основная картинка;
  • фон Упрощенного Page-stop берется из основного фона;
  • если фонов нет вообще, то отображается выставленный цвет фона.

Ограничения DOM виджета

Ниже находится список доступных типов вопросов. Через двоеточие перечислены те опции, которые не отображаются в опросе, даже если включены):
  • Текстовый ответ: маски с датами;
  • Выбор вариантов: если варианты размещены плиткой, то в них не отображаются видео и увеличение при клике на изображение. Также не отображается опция варианты ответов выпадающим списком;
  • Стартовый экран: опции Пожаловаться, Отписаться от рассылки, Промокод с копированием и Иконки соцсетей;
  • Текстовый экран: опции Выбор языка и переменная Промокод с копированием (обычный промокод работает);
  • Конечный экран: опции Пожаловаться, Отписаться от рассылки, Иконки соцсетей, Начать заново, Отчет о тестировании и любые переменные, связанные с системой баллов (при этом сами баллы считаются и их можно посмотреть в результатах опроса;
  • Звездный рейтинг, Рейтинг, NPS-рейтинг и Смайл-рейтинг имеют полностью доступный функционал.
2025-03-18 09:54 Шаг 4. Вставка кода на сайт