Конструктор виджетов

Как встроить виджет

1. Выберите калькулятор или тест и настройте вид.
2. Нажмите «Скопировать».
3. Вставьте код в HTML-блок своей страницы. В WordPress это блок «Произвольный HTML», в Tilda — блок T123, в Битриксе и большинстве CMS — визуальный редактор в режиме кода.

Что делает автоподбор высоты

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

Технически это postMessage: виджет отправляет число, а маленький скрипт из кода вставки его принимает. Скрипт проверяет источник сообщения и меняет только высоту рамок с атрибутом data-fastcalc. Никаких данных о посетителе не передаётся, cookie не устанавливаются. Если скрипты вставлять нельзя, снимите галочку и задайте высоту вручную.

Тема и цвет

• Светлая и тёмная — фиксированные варианты. Тёмную берите, если у вас тёмный сайт.
• «Как у гостя» — виджет следует системной настройке посетителя. Хороший выбор, если у вас есть переключатель темы.
• Акцентный цвет задаёт цифры на панели результата, шкалы и варианты ответа в тестах, подсветку полей при вводе, кнопки и подпись под рамкой. Достаточно выбрать один цвет: оттенок для наведения и фон выделений считаются от него автоматически, цвет текста на кнопках подбирается по яркости фона, а для цифр на тёмной панели светлота поднимается до читаемой — поэтому даже чёрный акцент не сделает результат невидимым.

Сколько виджетов можно поставить на страницу

Сколько нужно. Скрипт автоподбора высоты добавляется в код один раз — при вставке нескольких виджетов повторные копии сами отключаются, и каждая рамка настраивается независимо. У всех стоит loading="lazy": они не грузятся, пока посетитель до них не доскроллит, и не влияют на скорость страницы.

Условия использования

Виджеты бесплатны для любых сайтов, включая коммерческие. Просим об одном: не удаляйте ссылку под рамкой. Это единственное, что мы получаем взамен, и именно поэтому виджеты остаются бесплатными и без рекламы внутри.

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

Частые вопросы