Один із найпоширеніших страхів: «Квіз — це складно. Потрібен розробник». Насправді — ні. Qwizoo генерує готовий код для вбудовування, і все що потрібно — скопіювати і вставити його у правильне місце.
У цій інструкції — 4 способи для різних платформ.
Спосіб 1: Пряме посилання (найпростіший)
Якщо вам не потрібно вбудовувати квіз на сайт — просто використайте пряме посилання.
Кожен квіз у Qwizoo має унікальний URL вигляду: qwizoo.com/q/your-quiz-id
Де використовувати пряме посилання:
- В рекламі (Google Ads, Facebook Ads, TikTok)
- У повідомленнях клієнтам
- В bio Instagram або Telegram
- У email-розсилках
- В описі відео на YouTube
Це найшвидший спосіб — квіз живе на окремій сторінці Qwizoo і не потребує жодних налаштувань на вашому сайті.
Спосіб 2: Inline-вбудовування (iframe або скрипт)
Квіз відображається прямо на вашій сторінці — без переходів.
- Відкрийте квіз у Qwizoo → Публікація → Вбудувати
- Оберіть тип: «Inline» (вбудований)
- Скопіюйте код
- Вставте у HTML вашого сайту в тому місці, де має з'явитися квіз
Код виглядає приблизно так:
<div id="qwizoo-inline"></div>
<script src="https://www.qwizoo.com/embed.js"
data-quiz="your-quiz-id"
data-type="inline">
</script>
Як вставити на WordPress
- Відкрийте редактор сторінки (Gutenberg або класичний)
- Додайте блок «Довільний HTML» (Custom HTML)
- Вставте скрипт Qwizoo
- Збережіть і перевірте
Якщо ви використовуєте Elementor або Divi — є аналогічні блоки для HTML.
Як вставити на Tilda
- Відкрийте редактор Tilda
- Додайте блок T123 (HTML-блок)
- Вставте скрипт
- Натисніть «Публікувати»
Як вставити на Wix
- Відкрийте редактор Wix
- Додайте елемент → Інше → HTML iFrame
- Вставте код скрипту або iframe
- Збережіть і опублікуйте
Як вставити на Webflow
- Перейдіть в Designer
- Додайте елемент Embed
- Вставте код
- Опублікуйте проект
Спосіб 3: Popup (квіз-вікно)
Квіз відкривається у модальному вікні при натисканні на кнопку.
Ідеально коли:
- Ви хочете розмістити кнопку «Пройти тест» або «Підібрати послугу»
- Квіз не повинен займати місце на сторінці
- Хочете зберегти дизайн лендингу без змін
<!-- Кнопка-тригер -->
<button id="open-quiz">Підібрати послугу →</button>
<!-- Скрипт Qwizoo -->
<script src="https://www.qwizoo.com/embed.js"
data-quiz="your-quiz-id"
data-type="popup"
data-trigger="open-quiz">
</script>
Атрибут data-trigger прив'язує popup до будь-якого елементу на сторінці — кнопки, посилання, картинки.
Спосіб 4: Float-кнопка (квіз у кутку)
Плаваюча кнопка у правому нижньому куті сторінки — як чат-підтримка, тільки квіз.
<script src="https://www.qwizoo.com/embed.js"
data-quiz="your-quiz-id"
data-type="float"
data-position="bottom-right"
data-label="Підібрати тариф">
</script>
Float-кнопка:
- Видима на всіх сторінках сайту одночасно (якщо код у header/footer)
- Не заважає контенту — з'являється при скролі
- Працює на мобільних пристроях
Перевірка після вбудовування
Після того як вставили код — перевірте:
| Що перевірити | Як перевірити |
|---|---|
| Квіз відображається | Відкрийте сторінку в браузері |
| Мобільна версія | Відкрийте DevTools → Mobile view |
| Ліди приходять | Пройдіть квіз і перевірте дашборд Qwizoo |
| Інтеграції спрацьовують | Перевірте CRM або вебхук |
Часті запитання
Квіз сповільнює сайт?
Скрипт Qwizoo завантажується асинхронно і не блокує рендеринг сторінки. Вплив на швидкість мінімальний.
Чи потрібно вставляти код на кожну сторінку?
Тільки для Inline-квізу. Для Float-кнопки — достатньо вставити код один раз у footer (він з'явиться на всіх сторінках).
Що якщо у мене кастомний сайт на React або Vue?
Скрипт Qwizoo працює в будь-якому HTML-середовищі. Для React рекомендуємо Inline через div-контейнер.
