Spin And Wheel

Вбудуйте колесо фортуни на свій сайт

Додайте робоче колесо фортуни на свій сайт, блог або сторінку класу менш ніж за хвилину: оберіть колесо, введіть варіанти й вставте два рядки HTML. Віджет безкоштовний, не потребує облікового запису й не показує вашим відвідувачам ні реклами, ні кукі для відстеження.

Отримати код для вбудовування

Залиште порожнім, щоб використати власний список колеса. Варіанти зберігаються в самому коді, а не на сервері.

Розмір

Для Notion, режиму «By URL» у Google Sites та інших редакторів, які просять посилання замість HTML.

Попередній перегляд

Як вбудувати колесо фортуни на сайт за 3 кроки

  1. Оберіть колесо й додайте варіанти. У генераторі на цій сторінці виберіть колесо фортуни з іменами, колесо «так чи ні», колесо чисел, літер, Twister або колесо їжі та введіть по одному варіанту в рядку — або залиште список порожнім, щоб зберегти варіанти самого колеса.
  2. Оберіть розмір і скопіюйте код. Малий має 400 px, Середній — 520 px, а Великий — 640 px заввишки, ширина — 100% до того ж обмеження. Код — це стандартний HTML-елемент <iframe> плюс один рядок із посиланням.
  3. Вставте код в HTML-блок і опублікуйте. У WordPress цей блок називається Довільний HTML, у Wix — Embed HTML, у Squarespace — Code, у Shopify — Custom Liquid, а у Webflow — Code Embed. Редактори, що приймають лише посилання (Notion, «By URL» у Google Sites), отримують натомість посилання для вбудовування.

Ось повний код колеса фортуни з трьома іменами — Олена, Андрій і Марія — у розмірі Середній:

<iframe src="https://spinandwheel.com/uk/?mode=embed&amp;entries=%D0%9E%D0%BB%D0%B5%D0%BD%D0%B0,%D0%90%D0%BD%D0%B4%D1%80%D1%96%D0%B9,%D0%9C%D0%B0%D1%80%D1%96%D1%8F" title="Колесо фортуни" width="100%" height="520" style="max-width:520px;border:0" loading="lazy" allow="fullscreen; clipboard-write"></iframe>
<p><a href="https://spinandwheel.com/uk/">Колесо фортуни від Spin and Wheel</a></p>

Варіанти записані в адресі src (entries= або стиснений w= для довгих списків), а mode=embed показує лише колесо. Другий рядок — звичайне посилання на сторінку колеса.

Куди вставити код

Код — це стандартний HTML-елемент <iframe> плюс одне посилання, тож він працює на будь-якому сайті, що приймає HTML. Ось кроки для найпопулярніших редакторів.

WordPress

У редакторі блоків додайте блок Довільний HTML (введіть /html), вставте код і натисніть «Попередній перегляд». WordPress на власному хостингу дозволяє iframe за замовчуванням; на WordPress.com для цього може знадобитися платний тариф.

Wix

У редакторі Wix натисніть Add Elements (+) → Embed Code → Embed HTML, виберіть Code, вставте код і натисніть Update, потім розтягніть рамку приблизно до 520 px заввишки. Wix показує власний HTML у своїй рамці, тож колесо працює, але посилання під ним відкривається всередині цієї рамки.

Squarespace

Відкрийте сторінку для редагування, натисніть Add Block → Code, залиште блок у режимі HTML, вставте код і збережіть сторінку. Колесо з’явиться на опублікованій сторінці; у редакторі блок Code може показувати замість нього заглушку.

Shopify

Перейдіть в Online Store → Themes → Customize, виберіть Add section → Custom Liquid, вставте код у поле коду Liquid і збережіть. Безкоштовні теми, як-от Dawn, мають розділ Custom Liquid.

Webflow

Перетягніть елемент Code Embed з панелі Add на сторінку, вставте код, натисніть Save & Close і опублікуйте сайт. Для вбудовування власного коду може знадобитися платний тариф сайту Webflow.

Blogger

Відкрийте допис, у меню з олівцем перемкніть редактор із режиму створення на HTML view, вставте код там, де має бути колесо, й опублікуйте. Для колеса на бічній панелі використайте Layout → Add a Gadget → HTML/JavaScript.

Google Sites

Виберіть Insert → Embed. У вкладці «Embed code» вставте весь код або у вкладці «By URL» — посилання для вбудовування. Google Sites показує кожне вбудовування у власній рамці, тож колесо працює, але посилання під ним відкривається всередині цієї рамки.

Notion

Введіть /embed, вставте посилання для вбудовування (не HTML-код) і натисніть Embed link. Потягніть за кут блоку, щоб він мав приблизно 520 px заввишки і все колесо було видно.

Canvas, Moodle та інші LMS

Відкрийте сторінку в HTML-редакторі (Canvas: кнопка </>; Moodle: кнопка HTML в редакторі Atto або TinyMCE) і вставте код. Якщо після збереження колесо зникає, адміністратор заблокував iframe з інших сайтів; попросіть дозволити spinandwheel.com.

Будь-яка HTML-сторінка

Вставте код у <body> сторінки. Iframe має 100% ширини до свого обмеження розміру й завантажується з loading="lazy", тож не сповільнює верхню частину сторінки.

Як працює вбудоване колесо

Віджет — це справжня сторінка Spin and Wheel у легкому режимі вбудовування (?mode=embed): видно лише колесо й невелике посилання «Відкрити в Spin and Wheel». Відвідувачі крутять колесо кнопкою в центрі, бачать переможця на картці й можуть крутнути ще раз або прибрати переможця зі списку. Колесо підлаштовується під відведену йому рамку — і за шириною, і за висотою — від телефонів шириною 320 px до бічних панелей на комп’ютері.

Ваші варіанти передаються в адресі iframe: короткий список — як entries=, довший — стиснений (deflate-raw, base64url) як w=. Нічого не завантажується й не зберігається на сервері та нічого не записується в сховище браузера ваших відвідувачів, тож кожен починає з вашого списку. Колірна тема, час обертання й налаштування звуку з панелі «Налаштувати вигляд» передаються так само (cfg=).

Кожне обертання використовує crypto.getRandomValues з Web Crypto API — так само, як на spinandwheel.com, — тож кожен із N варіантів має шанс 1/N. Вбудоване колесо не показує реклами, не встановлює кукі для відстеження й не встановлює service worker; воно лише рахує, як часто його завантажують і крутять, — анонімно й без кукі.

Рядок під колесом — звичайне посилання на сторінку колеса на spinandwheel.com. Воно необов’язкове — його можна змінити або видалити, — але якщо його залишити, іншим учителям і авторам буде легше знайти цей інструмент. Покращення колеса автоматично з’являються у вашому вбудовуванні; щоб змінити варіанти, згенеруйте новий код і замініть ним старий.

FAQ

Віджет колеса: часті запитання

Чи можна безкоштовно вбудувати колесо фортуни з іменами на свій сайт?
Так. Колесо фортуни з іменами й будь-яке інше колесо Spin and Wheel можна безкоштовно вбудувати на особистий, шкільний чи комерційний сайт двома рядками HTML. Не потрібні ні обліковий запис, ні API-ключ, і немає обмежень на використання — скопіюйте код і вставте його.

Чи показує віджет рекламу або відстежує моїх відвідувачів?
Ні. Вбудоване колесо не показує реклами, не встановлює кукі для відстеження й не зберігає ні варіантів, ні налаштувань у браузері ваших відвідувачів. Воно рахує завантаження й обертання анонімно, без кукі, щоб ми бачили, що вбудовування використовують.

Чи можуть відвідувачі змінювати варіанти у вбудованому колесі?
Відвідувачі крутять колесо з обраними вами варіантами й можуть прибрати переможця перед наступним обертанням. Щоб редагувати весь список, вони натискають «Відкрити в Spin and Wheel», і повне колесо з вашими варіантами відкривається в новій вкладці.

Як змінити варіанти пізніше?
Згенеруйте на цій сторінці новий код із новими варіантами й замініть ним старий код на своєму сайті. Варіанти є частиною коду, тож старе вбудовування зберігає свій список, доки ви його не заміните.

Чи справді вбудоване колесо випадкове й чесне?
Так. Переможця обирає crypto.getRandomValues (Web Crypto API), тож кожен із N варіантів має рівно 1/N шансу при кожному обертанні — так само, як на spinandwheel.com.

Який розмір обрати?
Середній (520 px заввишки) підходить для більшості дописів у блозі. Малий (400 px) обирайте для бічних панелей і вузьких колонок, а Великий (640 px) — для сторінок на всю ширину або проєктора. Ширина — 100% до того ж обмеження, і колесо завжди вміщується в рамку.

Чи працює вбудоване колесо на телефонах?
Так. Iframe має 100% ширини, колесо масштабується під доступну ширину й висоту, а на екранах вужчих за 700 px переможець з’являється в нижній панелі з великими кнопками.

Чи можна вбудувати колесо в OBS для стриму?
Для OBS Studio використовуйте замість цього віджета спеціальні посилання для стриму: прозорий оверлей із колесом і панель керування (dock). Обидва описано в посібнику з налаштування OBS.