Spin And Wheel

Embed a Spinning Wheel on Your Website

Put a working spinning wheel on your website, blog or class page in under a minute: pick a wheel, type your entries, and paste two lines of HTML. The widget is free, needs no account, and shows your visitors no ads and no tracking cookies.

Get the embed code

Leave empty to use the wheel's own list. Entries are stored in the code itself, not on a server.

Size

For Notion, Google Sites "By URL" and other editors that ask for a link instead of HTML.

Live preview

How to embed a spinning wheel in 3 steps

  1. Pick a wheel and add your entries. Choose the wheel of names, a yes or no wheel, a number, letter, Twister, food or custom wheel in the generator on this page and type one entry per line — or leave the list empty to keep the wheel's own entries.
  2. Choose a size and copy the code. Small is 400 px, Medium 520 px and Large 640 px tall, 100% wide up to the same limit. The code is a standard HTML <iframe> plus one link line.
  3. Paste the code into an HTML block and publish. The block is called Custom HTML in WordPress, Embed HTML in Wix, Code in Squarespace, Custom Liquid in Shopify and Code Embed in Webflow. Editors that only take a link (Notion, Google Sites "By URL") get the embed link instead.

This is the complete code for a wheel of names with three entries, Anna, Ben and Chloe, at the Medium size:

<iframe src="https://spinandwheel.com/?mode=embed&amp;entries=Anna,Ben,Chloe" title="Wheel of Names" width="100%" height="520" style="max-width:520px;border:0" loading="lazy" allow="fullscreen; clipboard-write"></iframe>
<p><a href="https://spinandwheel.com/">Wheel of Names by Spin and Wheel</a></p>

The entries are in the src address (entries=, or a compressed w= for long lists) and mode=embed shows only the wheel. The second line is a normal link to the wheel's page.

Where to paste the code

The code is a standard HTML <iframe> plus one link, so it works on any site that accepts HTML. These are the steps for the most common editors.

WordPress

In the block editor, add a Custom HTML block (type /html), paste the code and click Preview. Self-hosted WordPress allows iframes by default; on WordPress.com they may need a paid plan.

Wix

In the Wix Editor click Add Elements (+) → Embed Code → Embed HTML, choose Code, paste the code and click Update, then drag the box to about 520 px tall. Wix shows custom HTML inside its own frame, so the wheel works but the link under it stays inside that frame.

Squarespace

Edit the page, click Add Block → Code, keep the block on HTML, paste the code and save the page. The wheel appears on the published page; in the editor a Code block can show a placeholder instead.

Shopify

Go to Online Store → Themes → Customize, choose Add section → Custom Liquid, paste the code into the Liquid code field and save. Free themes such as Dawn include the Custom Liquid section.

Webflow

Drag a Code Embed element from the Add panel onto the page, paste the code, click Save & Close and publish the site. Custom code embeds may need a paid Webflow site plan.

Blogger

Open the post, switch the editor from Compose view to HTML view with the pencil menu, paste the code where the wheel should appear and publish. For a sidebar wheel, use Layout → Add a Gadget → HTML/JavaScript.

Google Sites

Choose Insert → Embed. Under "Embed code" paste the full code, or under "By URL" paste the embed link. Google Sites shows every embed inside its own frame, so the wheel works but the link under it stays inside that frame.

Notion

Type /embed, paste the embed link (not the HTML code) and press Embed link. Drag the block's corner to make it about 520 px tall so the whole wheel is visible.

Canvas, Moodle and other LMS

Open the page in the HTML editor (Canvas: the </> button; Moodle: the HTML button of the Atto or TinyMCE editor) and paste the code. If the wheel disappears after saving, the administrator has blocked iframes from other sites; ask them to allow spinandwheel.com.

Any HTML page

Paste the code into the page's <body>. The iframe is 100% wide up to its size limit and loads with loading="lazy", so it does not slow down the top of the page.

How the embedded wheel works

The widget is the real Spin and Wheel page in a lightweight embed mode (?mode=embed): only the wheel and a small "Open in Spin and Wheel" link are shown. Visitors spin with the button in the centre, see the winner in a card, and can spin again or remove the winner from the list. The wheel resizes to the box it is given — width and height — from 320 px phones to desktop sidebars.

Your entries travel in the iframe's address: a short list as entries=, a longer one compressed (deflate-raw, base64url) as w=. Nothing is uploaded or stored on a server, and nothing is written to your visitors' browser storage, so every visitor starts from your list. Color theme, spin time and sound settings made in the Customize panel are carried the same way (cfg=).

Every spin uses crypto.getRandomValues from the Web Crypto API, the same as on spinandwheel.com, so each of N entries has a 1/N chance. The embed shows no ads, sets no tracking cookies and installs no service worker; it counts only how often it is loaded and spun, anonymously and without cookies.

The line under the wheel is an ordinary link to the wheel's page on spinandwheel.com. It is optional — you can edit or remove it — but keeping it helps other teachers and creators find the tool. Improvements to the wheel reach your embed automatically; to change the entries, generate new code and replace the old one.

FAQ

Embed widget FAQ

Can I embed a wheel of names on my website for free?
Yes. The wheel of names and every other Spin and Wheel wheel can be embedded for free on personal, school and commercial sites with two lines of HTML. There is no account, no API key and no usage limit — copy the code and paste it.

Does the widget show ads or track my visitors?
No. The embedded wheel shows no ads, sets no tracking cookies and saves no entries or settings in your visitors' browser. It counts loads and spins anonymously, without cookies, so we can see that embeds are used.

Can visitors change the entries on the embedded wheel?
Visitors spin with the entries you chose and can remove a winner for the next spin. To edit the full list they click "Open in Spin and Wheel", which opens the complete wheel with your entries in a new tab.

How do I change the entries later?
Generate new code on this page with the new entries and replace the old code on your site. The entries are part of the code, so the old embed keeps its list until you replace it.

Is the embedded wheel random and fair?
Yes. The winner is chosen with crypto.getRandomValues (Web Crypto API), so each of N entries has exactly a 1/N chance on every spin, the same as on spinandwheel.com.

Which size should I choose?
Medium (520 px tall) fits most blog posts. Choose Small (400 px) for sidebars and narrow columns, and Large (640 px) for full-width pages or a projector. The width is 100% up to the same limit, and the wheel always fits inside the box.

Does the embedded wheel work on phones?
Yes. The iframe is 100% wide, the wheel scales to the available width and height, and below 700 px the winner appears as a bottom sheet with large buttons.

Can I embed a wheel in OBS for a livestream?
For OBS Studio use the dedicated stream links instead of this widget: a transparent display overlay and a control dock. The OBS setup guide explains both.