Embed a Spinning Wheel on Your Website
Type your entries, pick a color theme and a size, then copy one line of code. The wheel spins right on your page, on any site that accepts HTML or an embed link.
Color theme
<iframe src="https://randompickerwheel.app/embed/wheel?t=Who%20goes%20first%3F&items=Ava%2CBen%2CChloe%2CDev%2CEmma%2CFinn&theme=prism" width="420" height="540" style="border:0;max-width:100%" title="Who goes first?" loading="lazy"></iframe>
https://randompickerwheel.app/embed/wheel?t=Who%20goes%20first%3F&items=Ava%2CBen%2CChloe%2CDev%2CEmma%2CFinn&theme=prism- Class sites and LMS pagesPut a name or topic wheel straight into a Canvas, Moodle or Google Sites lesson page.
- Notion dashboardsA chore, lunch or stand-up wheel that lives inside the team wiki.
- Blog posts and quizzesLet readers spin for a recipe, a writing prompt or a bonus question.
- Event and club pagesRaffle teasers, icebreakers or a which-game-next wheel on your community site.
From list to embedded wheel in a minute
Fill in the wheel
Give it a title and type the entries, one per line. The preview on the right is the real embed, so you can spin it to test.
Style it to fit your page
Choose one of four color themes and a size. Turn off the title, the confetti or the Made with link if your page doesn't need them.
Copy and paste
Copy the iframe code into an HTML block, or copy the plain link for tools like Notion that only take a URL. See the platform table below.
Why embed this wheel
Where to paste the wheel on popular platforms
Most site builders accept the iframe code in some kind of HTML or embed block. A few, like Notion, only take a link and build the frame for you. If a platform strips iframes, the link still works as a normal button or text link.
| Platform | Where to paste | Good to know |
|---|---|---|
| WordPress, block editor | Add a Custom HTML block and paste the code | Self-hosted WordPress keeps iframes. On WordPress.com, iframe code can be removed on some plans, so use the link instead. |
| Notion | Type /embed, paste the link (not the code), then Embed link | Drag the bottom edge of the block to about 540 px so the spin button shows. |
| Google Sites | Insert, then Embed, then the Embed code tab | Paste the code, press Next and Insert, then drag the corners to resize. |
| Canvas LMS | Rich Content Editor, switch to the HTML editor | Paste the code where the wheel should appear and save the page. |
| Moodle | Page or Label, open the editor's HTML source view | If the frame disappears after saving, your site may only allow iframes for trusted users. Ask your Moodle admin. |
| Wix | Add, then Embed Code, then Embed HTML | Choose Code, paste, and set the element to the same width and height. |
| Squarespace | Add a Code block and paste | Code blocks are not available on every plan. |
| Blogger | HTML view of the post, or an HTML/JavaScript gadget | The gadget version shows the wheel in the sidebar on every page. |
| Google Classroom, Slides | Not supported | These don't accept iframes. Post the link and students open it in a tab. |
What the settings in the link mean
Every option is a readable part of the URL, so you can also edit a link by hand, for example to swap the entries for next week's class without visiting this page again.
| Parameter | Example | What it does |
|---|---|---|
| items | items=Ava%2CBen%2CChloe | The entries, comma separated and URL-encoded. At least two are needed. |
| t | t=Who%20goes%20first%3F | The title above the wheel. Leave empty for none. |
| theme | theme=ocean | prism, ocean, candy or mono. |
| title | title=0 | Hides the title line. |
| confetti | confetti=0 | Turns off the confetti burst after a spin. |
| brand | brand=0 | Hides the small Made with Random Picker Wheel link. |
Because the entries are in the link, anyone who opens the page source can read them. Don't put private information such as student grades or phone numbers on an embedded wheel.
Picking the right size
The size sets the width and height in the code. The wheel inside always scales to fill the box, and the max-width style shrinks the frame on phones, so a Large embed never causes sideways scrolling.
| Size | Frame | Works well for |
|---|---|---|
| Small | 320 × 440 px | Sidebars, narrow Notion columns, mobile-first blogs |
| Medium | 420 × 540 px | Most blog posts, Google Sites sections, LMS pages |
| Large | 560 × 680 px | Full-width pages and classroom projectors |
Frequently asked questions
Is the embeddable wheel free?
Yes. Embedding is free, with no account, no usage limit and no ads inside the frame.
How do I add a spinning wheel to Notion?
Copy the link from the Link only box, type /embed in Notion, paste the link and choose Embed link. Then drag the bottom of the block down to about 540 px so the whole wheel and the spin button are visible.
Can I change the entries after I've embedded the wheel?
The entries are part of the link, so changing them means pasting a new code. Build the new wheel here and replace the old code, or edit the items part of the URL by hand.
Why does my site remove the iframe code?
Some hosted platforms, including some WordPress.com plans, Moodle sites without trusted-content permission and many messaging tools, strip iframes for security. In that case, paste the plain link instead so visitors can open the wheel in a new tab.
Is every spin random?
Yes. The stopping point of each spin is chosen with crypto.getRandomValues in the visitor's browser, so every entry has the same chance. You, as the site owner, can't preset a result.
Does the wheel work on phones?
Yes. The frame shrinks to the width of the screen and the wheel scales with it. It stays readable down to about 280 px wide, and the spin button is a full-size touch target.
Can I remove the Made with link?
Yes. Switch off Show the Made with link before copying the code. We appreciate it when you leave it on, but it's your choice.