Wheel Spinning

Popular

Spin the wheel

Classroom & groups

Random name pickerRandom team generatorRandom letter generatorChore wheelTimes tables wheelRandom word generator

Decisions

Yes or no wheelDecision wheelWhat to eat wheelRandom movie generatorActivity wheelWorkout wheelDate night ideas

Games & parties

Truth or dare wheelWould you rather questionsNever have I ever questionsIcebreaker questionsMagic 8 ballSpin the bottleRandom object generatorRandom emoji generatorDrawing prompt wheelRandom question generatorRandom card generator

Draws & numbers

Random number wheelPrize wheelRaffle wheelRandom date generator

Sports

Random NFL team generatorRandom NBA team generatorRandom MLB team generatorRandom NHL team generator

Reference

Random country generatorRandom color generatorZodiac wheelRandom state generatorRandom animal generatorBaby name generator
All wheelsGuidesEmbed a wheelIs it random?

Embed a Spinning Wheel on Your Website

To embed a spinning wheel, type your entries, choose a theme and size, then copy the code into your page. It is free, needs no account, and the wheel spins right on your site.

Build your embed code

One entry per line, up to 300 characters each.
Size

The wheel fills the width of the page, up to this size, and keeps its shape on phones.

Light or dark
OptionsWithout the button, visitors spin by clicking the wheel. Without the popup, the result shows under the wheel.
Paste the code into an HTML block. Notion, Google Slides, PowerPoint and Canva use the link instead.

Live preview

The preview loads here.
Test the postMessage API

These buttons send messages to the preview, and the list shows what the wheel sends back.

  1. No messages yet.

A short listener for your own page, which logs each winner and spins the wheel:

const frame = document.querySelector('iframe[src^="https://wheelspinning.net/embed/"]');

window.addEventListener('message', (event) => {
  if (event.origin !== 'https://wheelspinning.net' || event.source !== frame.contentWindow) return;
  if (event.data.type === 'wheelspinning:result') {
    console.log('Winner:', event.data.result.text);
  }
});

// Spin from your own button:
frame.contentWindow.postMessage({ type: 'wheelspinning:spin' }, 'https://wheelspinning.net');

How to embed a spinning wheel

To embed a spinning wheel, build it in the generator, copy the code and paste it into an HTML block on your page. The whole process takes 5 steps:

  1. Type your entries, one per line, and add a title if you want a heading over the wheel.
  2. Choose a theme, a spin time from 1 to 60 seconds, and light mode, dark mode or the visitor's own device setting.
  3. Pick Responsive to fill the page width up to a size you set, or Fixed size for an exact width and height.
  4. Spin the live preview to check it, then press Copy code.
  5. Paste the code where the wheel should appear, and publish the page.

The whole wheel is stored inside the code's link, so this spin wheel embed needs no account and no saved file. To change the wheel later, build a new code and replace the old one.

Embed options and what they change

The wheel's entries and settings travel inside the link, and the size sits on the iframe tag. The same code therefore behaves the same way on every site.

OptionWhat visitors seePart of the link
Entries and titleThe slices, and a heading over the wheel#w= (compressed wheel data)
ThemeOne of 25 color themes#w=
Spin timeA spin lasting 1 to 60 seconds#w=
SoundsTick and winner sounds, or silence#w=
Spin buttonA Spin button, or only a wheel that spins when clickedcontrols=0 hides the button
Result popupA popup with the winner, or a result line under the wheelpopup=0 turns the popup off
Light or darkLight colors, dark colors, or whatever the visitor's device usesmode=light or mode=dark

The embed's background is transparent in every mode, so your page shows through. "Match the device" only switches the colors of the wheel's rim, pointer and text to suit each visitor's light or dark setting. Pick Light or Dark to match your page.

Developers can also write a link by hand. The query ?entries=Ava|Mateo|Priya sets the entries, and title, theme (a theme ID such as ocean, mono or contrast) and seconds set the basics.

Add the wheel to any website with HTML

To add the wheel to a website, paste the embed code into the page's HTML where the wheel should go. Any page that accepts an <iframe> tag can show the wheel, including hand-written HTML and site builders with an HTML or embed-code block.

  • Responsive code sets the width to 100% with a largest width and an aspect ratio, so the wheel stays round on phones.
  • Fixed-size code sets an exact width and height. On a narrow phone, the frame shrinks to the screen width and the wheel shrinks with it.
  • Lazy loading is on in both versions, so the wheel loads only when a visitor scrolls near it.

A site with a Content Security Policy needs https://wheelspinning.net in its frame-src list. Without it, the browser blocks the frame.

Embed the wheel in WordPress

To embed the wheel in WordPress, add a Custom HTML block and paste the embed code into it. These steps follow WordPress.org's Custom HTML block documentation for WordPress 7.0:

  1. Open the post or page in the block editor.
  2. Type /html in a new paragraph and press Enter, or add Custom HTML from the block inserter.
  3. Click Edit HTML, paste the embed code and press Update.
  4. Preview the page to check the wheel, then publish.

WordPress removes <iframe> tags from users without the unfiltered_html capability, such as Contributors. If the wheel vanishes after saving, ask a site administrator to add the block.

Use the wheel in Google Slides

Google Slides cannot show a live web page on a slide, so the wheel goes in as a link that opens during your presentation. Press Copy link in the generator, then add the link to text on your slide. The guide to using a wheel in Google Slides or PowerPoint covers each step and presenting tips.

Use the wheel in PowerPoint

PowerPoint opens the wheel through a hyperlink on a slide, which you click during the slide show. Press Copy link in the generator, then link it from text, a shape or a picture on the slide. The step-by-step slides guide covers each PowerPoint version.

Embed the wheel in Notion

To embed the wheel in Notion, add an Embed block and paste the wheel link, not the iframe code. The steps come from Notion's help page on embeds, bookmarks and link mentions:

  1. Press Copy link in the generator.
  2. In your Notion page, type /embed and choose Embed.
  3. Paste the wheel link into the box that appears and confirm.
  4. Drag the bars on the sides of the block to resize it.

Notion's help says the link must start with https, not <iframe. It also warns that some websites block embedding; wheelspinning.net allows it.

Use the wheel in Canva

In Canva, the reliable method is a link on text or an element, which stays clickable when you present the design. Canva's help on hyperlinks says links also keep working in designs downloaded as PDF files.

  1. Press Copy link in the generator.
  2. Select the text or element that should open the wheel.
  3. Choose More on the floating toolbar, then Link, and paste the wheel link.
  4. Present the design and click the link to open the wheel.

Canva's Embeds app adds media from a web link, so the wheel link is worth trying there. Canva's help does not list which websites the app accepts, so fall back to the link method if the embed fails.

Control the embedded wheel with postMessage

The embedded wheel accepts 3 messages and sends 3 events, so your page can spin it, stop it, change entries and read results.

Messages your page can send to the wheel
MessageEffect
{ type: 'wheelspinning:spin' }Starts a spin. Ignored while the wheel is already spinning.
{ type: 'wheelspinning:stop' }Brakes the spin. The result stays the same.
{ type: 'wheelspinning:setEntries', entries: ['Ava', 'Mateo'] }Replaces the entries. Blank and non-text items are dropped, and the message is ignored during a spin.
Events the wheel sends to your page
EventWhen it arrives
{ type: 'wheelspinning:ready', entries: [...] }Once the wheel has loaded, with its visible entries
{ type: 'wheelspinning:spinning' }When a spin starts
{ type: 'wheelspinning:result', result: { text, wheel, at } }After each spin, with the winning entry, the wheel title and the time as an ISO 8601 string
  • Check the sender. The wheel posts events to any parent page, so test that event.origin is https://wheelspinning.net before using them.
  • Wait for ready. Send setEntries after the ready event, once the wheel has loaded.
  • Mind the limits. Entries are plain text, up to 300 characters each and 10,000 per wheel.

The "Test the postMessage API" panel in the generator sends spin and stop messages to the preview and lists the latest 4 events that come back. It also shows a short listener you can copy.

The "Made with Wheel Spinning" link

Every embedded wheel shows a small "Made with Wheel Spinning" link under the wheel, and it opens wheelspinning.net in a new tab. The link is part of every embed and has no off switch.

The embedded wheel loads no ads, analytics or trackers, so your visitors see only the wheel and that one link.

What the embedded wheel does not do

The embedded wheel is built for spinning, not editing, so 4 features of the main wheel stay on wheelspinning.net.

  • No editing for visitors. Visitors can spin and remove a winner from the result popup, but they cannot type entries. A reload brings the full list back.
  • No images or slice colors. Codes from the generator carry text entries, a title, a theme and the spin settings.
  • No saved history. The embed keeps no autosave or result history, so every visit starts fresh.
  • No live wheel inside slides. Google Slides, PowerPoint and Canva open the wheel from a link instead.

For weights, elimination rounds, several wheels or full screen, use the full spin the wheel tool.

Questions about embedding a wheel

Is the embed free?

Yes. The code is free and needs no account. The wheel lives in the link itself, so it keeps working for as long as wheelspinning.net is online.

Can visitors change the entries?

No, visitors cannot add or edit entries. The result popup lets them remove a winner for that visit, and a reload restores the list. Your own page can replace the entries with the setEntries message.

How do I change a wheel I already embedded?

Build a new code and replace the old one. The entries live in the link, so changing the generator does not update codes already pasted.

Does the embedded wheel work on phones?

Yes. The responsive code fills the screen width and keeps the wheel round. Visitors tap the wheel or the Spin button to spin.

Is the embedded wheel random?

Yes. It draws each result with crypto.getRandomValues before the animation, like every wheel on the site. The page on how fair the wheel is explains the draw and runs a 10,000-pick test.

Why does the wheel not show after I paste the code?

The platform most likely removed the iframe. WordPress strips iframes for users without unfiltered_html, and Notion needs the plain link. Sites with a Content Security Policy must allow https://wheelspinning.net as a frame source.

Can I remove the "Made with Wheel Spinning" link?

No. The small credit link is part of every embedded wheel.

Platform steps checked in October 2026 against each platform's official help: WordPress.org documentation, Google Docs Editors Help, Microsoft Support, Notion Help and the Canva Help Center. Menus change over time, so check the platform's own help if a step looks different.

Guides for presenting a wheel