Spin And Wheel

Pasang Spin Wheel di Website Anda

Pasang spin wheel yang langsung berfungsi di website, blog, atau halaman kelas Anda dalam waktu kurang dari semenit: pilih roda, ketik pilihan, lalu tempel dua baris HTML. Widget ini gratis, tanpa akun, dan tidak menampilkan iklan maupun cookie pelacak kepada pengunjung Anda.

Dapatkan kode embed

Biarkan kosong untuk memakai daftar bawaan roda. Pilihan disimpan di dalam kode itu sendiri, bukan di server.

Ukuran

Untuk Notion, opsi "By URL" di Google Sites, dan editor lain yang meminta tautan, bukan HTML.

Pratinjau langsung

Cara memasang spin wheel di website dalam 3 langkah

  1. Pilih roda dan isi pilihan. Di generator pada halaman ini, pilih spin nama, roda ya atau tidak, roda angka, roda huruf, Twister, spin makanan, atau roda custom, lalu ketik satu pilihan per baris — atau biarkan daftarnya kosong untuk memakai pilihan bawaan roda.
  2. Pilih ukuran dan salin kodenya. Kecil tingginya 400 px, Sedang 520 px, dan Besar 640 px, dengan lebar 100% hingga batas yang sama. Kodenya adalah <iframe> HTML standar plus satu baris tautan.
  3. Tempel kode di blok HTML lalu terbitkan. Blok ini bernama HTML Khusus di WordPress, Embed HTML di Wix, Code di Squarespace, Custom Liquid di Shopify, dan Code Embed di Webflow. Editor yang hanya menerima tautan (Notion, "By URL" di Google Sites) memakai tautan embed.

Ini kode lengkap untuk spin nama dengan tiga pilihan, Siti, Budi, dan Dewi, dalam ukuran Sedang:

<iframe src="https://spinandwheel.com/id/?mode=embed&amp;entries=Siti,Budi,Dewi" title="Spin Nama" width="100%" height="520" style="max-width:520px;border:0" loading="lazy" allow="fullscreen; clipboard-write"></iframe>
<p><a href="https://spinandwheel.com/id/">Spin Nama dari Spin and Wheel</a></p>

Pilihan tersimpan di alamat src (entries=, atau w= yang dikompresi untuk daftar panjang) dan mode=embed hanya menampilkan rodanya. Baris kedua adalah tautan biasa ke halaman roda tersebut.

Di mana menempel kodenya

Kodenya adalah <iframe> HTML standar plus satu tautan, jadi bisa dipakai di situs mana pun yang menerima HTML. Berikut langkah-langkah untuk editor yang paling umum.

WordPress

Di editor blok, tambahkan blok HTML Khusus (ketik /html), tempel kodenya, lalu klik Pratinjau. WordPress self-hosted mengizinkan iframe secara default; di WordPress.com mungkin perlu paket berbayar.

Wix

Di Wix Editor, klik Add Elements (+) → Embed Code → Embed HTML, pilih Code, tempel kodenya dan klik Update, lalu tarik kotaknya hingga tinggi sekitar 520 px. Wix menampilkan HTML kustom di dalam bingkainya sendiri, jadi roda tetap berfungsi tetapi tautan di bawahnya terbuka di dalam bingkai itu.

Squarespace

Edit halaman, klik Add Block → Code, biarkan blok pada mode HTML, tempel kodenya, lalu simpan halaman. Roda muncul di halaman yang sudah diterbitkan; di editor, blok Code bisa menampilkan placeholder sebagai gantinya.

Shopify

Buka Online Store → Themes → Customize, pilih Add section → Custom Liquid, tempel kode di kolom kode Liquid, lalu simpan. Tema gratis seperti Dawn sudah punya bagian Custom Liquid.

Webflow

Seret elemen Code Embed dari panel Add ke halaman, tempel kodenya, klik Save & Close, lalu terbitkan situs. Embed kode kustom mungkin memerlukan paket situs Webflow berbayar.

Blogger

Buka postingan, lewat menu pensil ganti editor dari tampilan Compose ke HTML view, tempel kode di tempat roda harus muncul, lalu publikasikan. Untuk roda di sidebar, gunakan Layout → Add a Gadget → HTML/JavaScript.

Google Sites

Pilih Insert → Embed. Di "Embed code" tempel kode lengkapnya, atau di "By URL" tempel tautan embed. Google Sites menampilkan setiap embed di dalam bingkainya sendiri, jadi roda tetap berfungsi tetapi tautan di bawahnya terbuka di dalam bingkai itu.

Notion

Ketik /embed, tempel tautan embed (bukan kode HTML), lalu tekan Embed link. Tarik sudut blok hingga tingginya sekitar 520 px agar seluruh roda terlihat.

Canvas, Moodle, dan LMS lainnya

Buka halaman di editor HTML (Canvas: tombol </>; Moodle: tombol HTML di editor Atto atau TinyMCE) lalu tempel kodenya. Jika roda hilang setelah disimpan, administrator memblokir iframe dari situs lain; minta mereka mengizinkan spinandwheel.com.

Halaman HTML apa pun

Tempel kode di dalam <body> halaman. Iframe-nya selebar 100% hingga batas ukurannya dan dimuat dengan loading="lazy", jadi tidak memperlambat bagian atas halaman.

Cara kerja roda yang disematkan

Widget ini adalah halaman Spin and Wheel yang asli dalam mode embed yang ringan (?mode=embed): hanya roda dan tautan kecil "Buka di Spin and Wheel" yang ditampilkan. Pengunjung memutar dengan tombol di tengah, melihat pemenang di sebuah kartu, lalu bisa memutar lagi atau menghapus pemenang dari daftar. Roda menyesuaikan diri dengan kotak yang diberikan — lebar dan tinggi — dari ponsel 320 px hingga sidebar desktop.

Pilihan Anda dikirim lewat alamat iframe: daftar pendek sebagai entries=, daftar yang lebih panjang dikompresi (deflate-raw, base64url) sebagai w=. Tidak ada yang diunggah atau disimpan di server, dan tidak ada yang ditulis ke penyimpanan browser pengunjung, jadi setiap pengunjung mulai dari daftar Anda. Tema warna, waktu putar, dan pengaturan suara dari panel Sesuaikan dibawa dengan cara yang sama (cfg=).

Setiap putaran memakai crypto.getRandomValues dari Web Crypto API, sama seperti di spinandwheel.com, jadi setiap pilihan dari N pilihan punya peluang 1/N. Embed ini tidak menampilkan iklan, tidak memasang cookie pelacak, dan tidak memasang service worker; ia hanya menghitung seberapa sering dimuat dan diputar, secara anonim dan tanpa cookie.

Baris di bawah roda adalah tautan biasa ke halaman roda di spinandwheel.com. Tautan ini opsional — Anda bisa mengubah atau menghapusnya — tetapi membiarkannya membantu guru dan kreator lain menemukan alat ini. Pembaruan pada roda otomatis sampai ke embed Anda; untuk mengganti pilihan, buat kode baru dan ganti kode yang lama.

FAQ

FAQ widget embed

Apakah saya bisa memasang spin nama di website saya secara gratis?
Bisa. Spin nama dan semua roda Spin and Wheel lainnya bisa disematkan gratis di situs pribadi, sekolah, maupun komersial dengan dua baris HTML. Tanpa akun, tanpa kunci API, dan tanpa batas pemakaian — cukup salin kodenya lalu tempel.

Apakah widget ini menampilkan iklan atau melacak pengunjung saya?
Tidak. Roda yang disematkan tidak menampilkan iklan, tidak memasang cookie pelacak, dan tidak menyimpan pilihan maupun pengaturan di browser pengunjung Anda. Ia menghitung pemuatan dan putaran secara anonim, tanpa cookie, agar kami tahu embed benar-benar dipakai.

Apakah pengunjung bisa mengubah pilihan di roda yang disematkan?
Pengunjung memutar dengan pilihan yang Anda tentukan dan bisa menghapus pemenang untuk putaran berikutnya. Untuk mengedit seluruh daftar, mereka mengklik "Buka di Spin and Wheel", yang membuka roda lengkap dengan pilihan Anda di tab baru.

Bagaimana cara mengubah pilihan nanti?
Buat kode baru di halaman ini dengan pilihan yang baru, lalu ganti kode lama di situs Anda. Pilihan adalah bagian dari kode, jadi embed lama tetap memakai daftarnya sampai Anda menggantinya.

Apakah roda yang disematkan benar-benar acak dan adil?
Ya. Pemenang dipilih dengan crypto.getRandomValues (Web Crypto API), jadi setiap pilihan dari N pilihan punya peluang tepat 1/N di setiap putaran, sama seperti di spinandwheel.com.

Ukuran mana yang sebaiknya saya pilih?
Sedang (tinggi 520 px) cocok untuk sebagian besar postingan blog. Pilih Kecil (400 px) untuk sidebar dan kolom sempit, dan Besar (640 px) untuk halaman selebar layar atau proyektor. Lebarnya 100% hingga batas yang sama, dan roda selalu muat di dalam kotak.

Apakah roda yang disematkan berfungsi di ponsel?
Ya. Iframe-nya selebar 100%, roda menyesuaikan dengan lebar dan tinggi yang tersedia, dan di bawah 700 px pemenang muncul sebagai panel bawah dengan tombol besar.

Apakah saya bisa memasang roda di OBS untuk live streaming?
Untuk OBS Studio, gunakan tautan khusus streaming, bukan widget ini: overlay tampilan transparan dan dock kontrol. Panduan pengaturan OBS menjelaskan keduanya.