Embed a Spinning Wheel on Your Website

What an embedded wheel is

An embedded wheel is a Wheel Cue wheel that lives inside your own page. Visitors see your list on the wheel, press Spin and get a random pick without leaving your site. You paste the code once; nothing needs to be installed, and nobody needs an account.

The code is two pieces of HTML: an iframe, which is a window onto a small page at wheelcue.com that shows only the wheel, and a one-line credit under it. Your list, the title and the options are written into the code itself. That is why the wheel works anywhere the code is pasted, and also why it cannot change after you paste it: to change the list, make new code and replace the old one.

How to use the builder

1. Replace the sample names with your own list, one entry per line. You can paste a column from a spreadsheet.
2. Add a title or question if you want one above the wheel, such as "Who answers next?".
3. Choose the options: remove each winner, light or dark colors, sound on or off, and the height of the frame.
4. Try the wheel in the preview. It is the same wheel your visitors will get.
5. Press Copy code and paste the code into your page, as described below for each platform.

Coming from a wheel on this site? Or put this wheel on your website, under any wheel, opens this page with that list already filled in. Once you edit the wheel, the address of this page keeps a copy of it, so you can bookmark the page and come back to change the wheel later.

For weighted entries, turn on Weighted choices and add a multiplier: Pizza *3 gives Pizza three times the share of an entry without one. It works exactly as on the rest of the site.

Where to paste the code

Every platform below accepts embed code, but the buttons move around from time to time. If a label is different on your screen, look for the option called Embed, HTML or Custom HTML.

Google Sites

1. Open your site and click Insert, then Embed.
2. Choose Embed code, paste the code and click Next, then Insert.
3. Click Publish at the top right.

WordPress

1. In the block editor, add a Custom HTML block. Typing /html in an empty paragraph is the quickest way.
2. Paste the code into the block. In recent versions the block has an Edit HTML button that opens a code window: paste the code there and press Update.
3. Save or update the post.

Self-hosted WordPress keeps iframes for Administrators and Editors. If your account is a Contributor or an Author, WordPress removes the iframe when you save, so ask an Editor or Administrator to add it. On a multisite network only Super Admins can add iframes.

On WordPress.com, iframes need a plan that includes plugins, with its hosting features turned on. On the other plans the iframe is removed and the wheel does not appear.

Blogger

In a post or page:

1. Open the post in the editor and switch to HTML view with the button at the top left.
2. Paste the code where you want the wheel, then update or publish.

In the sidebar:

1. Go to Layout and click Add a gadget in the section where the wheel should go.
2. Choose HTML/JavaScript, paste the code into Content and click Save.
3. Click Save on the Layout page as well, to keep the new arrangement.

A sidebar is usually narrow, so the Compact height suits it best.

Canvas LMS

1. Open a Page, an Assignment, a Discussion or an Announcement and click Edit.
2. In the Rich Content Editor, click the HTML Editor icon to switch to the HTML view.
3. Paste the code and click Save.

Canvas keeps iframes on Pages, Assignments, Discussions and Announcements. Calendar event descriptions remove them, so put the wheel on a Page and link to it from the event instead.

Some schools turn on the Content Security Policy in their Canvas settings. Canvas then blocks pages from websites that are not on the school's list of allowed domains, and shows a message about the security policy where the wheel should be. If that happens, ask your Canvas administrator to add wheelcue.com to the allowed domains.

Privacy: keep names off public pages

Everything on an embedded wheel is written into the code: the entries, the title and the options. Anyone who opens your page can read them in the page source, and in the address of the wheel itself.

For a class wheel on a public website, use first names, initials or seat numbers rather than full names. A course page that only your students can see is a better place for a full roster than an open blog. The same rule as for any wheel you send applies: do not put private details about other people on a wheel without their permission.

What reaches Wheel Cue

The list sits after a "#" in the wheel's address, a part browsers do not send to a server, so it never reaches Wheel Cue or its web host. The wheel itself is delivered by Cloudflare, which processes your visitors' IP address and browser data, as for any web page, to deliver the wheel and protect it from abuse. No analytics and no ads run inside the embedded wheel, and the wheel itself stores nothing on your visitors' devices. If Cloudflare's automated security check runs there, it keeps a temporary identifier in session storage. If your school or site requires it, mention this in your own privacy notice; the Wheel Cue privacy policy has the details.

Limits

An embedded wheel holds up to 100 entries and 3,000 characters of entry text in total, and each entry can be up to 120 characters long. Weights go from 1 to 999.

These limits keep the code a reasonable length and every slice readable. The builder shows how much of each limit you are using, and stops making code when a list is over either one. If a wheel ever reaches the embed with more than 100 entries, it uses the first 100 and says so.

How the wheel behaves on your page

Removing winners and Reset

With Remove each winner on, the winning entry stays on the wheel for a moment so everyone can see it, then comes off. The next spin picks from the entries that are left, so nobody comes up twice. Reset appears as soon as an entry has been removed and puts the whole list back.

Nothing is saved between visits. Reloading the page, or opening it on another computer, starts again from the full list in the code.

Fullscreen

The wheel has a Fullscreen button for projectors and classroom boards. It needs the allow="fullscreen" part of the code, which is already there. If a platform removes it, or shows embed code inside a frame of its own that does not allow fullscreen, the button does not appear and the wheel still works in the page.

Colors, sound and size

Light colors suit most pages; choose dark for a dark site. Visitors can spin by pressing the button, the hub or the wheel itself. The frame fills the width of your column up to 640 pixels, and the wheel scales to fit, so it also works on phones.

The credit line

Under the wheel, the code adds one line: "Wheel by Wheel Cue", with a plain link to this site. It tells visitors where the wheel comes from and where to make their own. Inside the wheel's own window there is also a small "Made with Wheel Cue" note; that one is part of the wheel and stays.

Keeping the line under the wheel is appreciated, because it helps other teachers and bloggers find the wheel, but it is not required: you can delete it from the code and the wheel works the same. It is an ordinary visible link with the site's name, nothing hidden.

Same fair draw as the rest of the site

An embedded wheel uses the same random code as every wheel on Wheel Cue. Each result is drawn with crypto.getRandomValues(), your visitor's browser's cryptographic random number generator, before the wheel starts to turn, and the animation is then aimed at the slice that has already won.

How randomness works explains the method step by step, and the fairness report publishes the results of millions of draws through the same code.