How to embed a spinner wheel on your website

Step 1: Build or pick your wheel

Head to the spinner wheel and type in your entries, or open one of the preset wheels like the what should I eat wheel. What you see is what your visitors will spin.

Step 2: Copy the embed code

Under every wheel there is an embed box with an iframe snippet. Click Copy embed code and it lands on your clipboard. The snippet looks like this:

Step 3: Paste it into your page

Paste the snippet into your page's HTML wherever you want the wheel to show up. In WordPress, use a Custom HTML block. In most site builders, look for an Embed or HTML element. That is it, the wheel is live and your visitors can spin it.

Please keep the attribution line

The last line of the snippet is a plain link back to the wheel it came from. It is the only thing we ask in return, and it is the whole business model: the wheel is free, carries no ads, no account and no tracking, and that credit link is how people find it. Copy the snippet whole and you are square with us.

URL parameters

Everything is set in the iframe URL, so there is no settings panel to lose and no account holding your configuration.

Platform by platform

WordPress

In the block editor, add a Custom HTML block and paste the whole snippet, credit line included. In the classic editor, switch to the Text tab first, because the Visual tab strips iframes. If your host runs a security plugin that filters HTML, allow iframes from spinpicker.io.

Google Sites

Insert → Embed → Embed code, paste the snippet, then Next and Insert. Drag the corner handles until the whole wheel is visible; Google Sites does not resize an iframe to fit its contents.

Notion

Notion does not accept raw HTML. Type /embed, choose Embed, and paste the wheel URL on its own (for example https://spinpicker.io/embed/wheel/what-to-eat) rather than the iframe tag. Add the credit link as a separate line of text underneath.

Wix

Add → Embed Code → Embed HTML, choose Code, and paste the snippet. Size the element to at least 480 by 560 so nothing is cropped.

Squarespace

Add a Code block and paste the snippet. Leave the block set to HTML and untick Display Source.

Canva

In a Canva website, use the Embeds app and paste the wheel URL. Canva takes a URL rather than an iframe tag, so add the credit link as a text element beside it.

Moodle

In a Page or Label resource, open the editor toolbar, click HTML (the </> button) and paste the snippet. If nothing renders, your site administrator has iframes disabled in the allowed HTML settings and can add spinpicker.io to the allowed frame sources.

Canvas LMS

In the Rich Content Editor choose </> HTML Editor and paste the snippet. Canvas keeps iframes from external domains, but some institutions restrict them; if the frame comes back empty, that is an institutional content security policy rather than the embed.

Google Classroom

Classroom does not allow iframes at all, so there is nothing to paste. Use a link instead: build your wheel, press Copy share link, and attach that link to the assignment or announcement. The entries travel inside the link, so students open exactly the wheel you built and nothing is stored on a server. Shared wheels carry noindex, so a class list cannot end up in search results.

OBS and streaming software

Add a Browser source, paste the embed URL with ?theme=transparent, and set width and height to the same number. Full instructions, including the space bar shortcut, are on the streaming page.

Embedding on a school website

This is the version of the question a school IT department actually asks, so here is the direct answer. The embed loads one iframe from spinpicker.io. It sets no tracking cookies, loads no third-party analytics, and makes no further requests once the page has loaded. Names typed into the wheel stay in the visitor browser; there is no account they could be attached to and no endpoint that receives them. Because there is no cookie to consent to, the embed does not add a consent banner to your page either.

Practically, that means adding this wheel does not introduce a new data processor into your site, because no personal data reaches us in the first place. The details are on the privacy page, and the classroom specifics are on the teachers page. If your policy needs an allowlist entry, the only domain involved is spinpicker.io.

Styling and sizing tips

• Change the width and height to fit your layout. The wheel is responsive and honors max-width.
• Adjust border-radius to match your site's corners, or set it to zero for square edges.
• Keep the loading="lazy" attribute so the wheel only loads when a visitor scrolls to it, which is better for page speed.
• Leave the small credit link in place. It is a friendly backlink and lets your readers make their own wheel.

Why embed a wheel?

An interactive wheel keeps readers on the page longer and gives them something to do, not just read. Teachers embed a wheel on a class site to pick students. Bloggers add a themed wheel to a post, like a dinner picker in a recipe roundup. Community managers drop a wheel into a giveaway page so entrants can watch the draw. Because it is a plain iframe, it keeps working no matter how your site is built.

Frequently asked questions

Related: the wheel in OBS, classroom use, the wheel data as JSON, and all SpinPicker tools.