PickerSpin

Embed a Spinner Wheel on Your Site

PickerSpin gives you an embeddable spin the wheel widget: one iframe, about 3KB, no account, no ads and no tracking scripts on your visitors.

Drop a working wheel into your own page with one iframe. Set the entries in the URL, paste the snippet, and your readers can spin without leaving your site.

The snippet

Paste this anywhere HTML is allowed. Change the entries to whatever you need.

<iframe src="https://pickerspin.co/embed/wheel/?entries=Alice,Bob,Carla"
        width="100%" height="520" loading="lazy"
        style="border:0;border-radius:12px;max-width:420px"
        title="PickerSpin Wheel"></iframe>

WordPress

Three routes, easiest first.

  1. Paste the link. Put a PickerSpin URL on its own line in a paragraph block and the wheel appears. WordPress reads our oEmbed endpoint and builds the embed for you. Nothing to install.
  2. Use the plugin. Download the WordPress plugin (about 3KB), then go to Plugins, Add New, Upload Plugin. It adds a [pickerspin] shortcode with options for entries, title, theme, colour and height.
  3. Paste the iframe. Use a Custom HTML block with the snippet above.

Everywhere else

It is a plain iframe, so it works in Google Sites, Canvas, Moodle, Schoology, Notion, Wix, Squarespace, Ghost and the Classroomscreen embed widget. Same snippet in every one.

What you are actually loading

  • About 3KB compressed, one request, loads lazily so it is not fetched until a reader scrolls near it.
  • No cookies, no analytics and no third-party requests from the frame.
  • The winner is drawn with the browser's Web Crypto API before the wheel moves, so the animation cannot change the result. You can check the distribution yourself.
  • Follows the reader's light or dark setting unless you set theme=light or theme=dark.

Options

  • entries — comma separated list of slices
  • title — heading shown above the wheel
  • theme — light, dark or auto
  • color — hex colour for the spin button

The wheel also posts a message to the parent page when it lands, so your own script can react to the winner.

How to embed a spin the wheel on your website

  1. Copy the iframe — Use <iframe src="https://pickerspin.co/embed/wheel/" width="100%" height="520" loading="lazy" style="border:0;border-radius:12px;max-width:420px" title="PickerSpin Wheel"></iframe>. There is no script tag, API key or account.
  2. Set your own options — Add entries as a comma separated list in the URL, for example ?entries=Pizza,Curry,Tacos. You can also pass title, theme (light, dark or auto) and color as a hex value.
  3. Paste it into your page — Anywhere HTML is allowed. On WordPress use a Custom HTML block, paste a pickerspin.co link on its own line to let oEmbed build it, or install the PickerSpin plugin and use the [pickerspin] shortcode.
  4. Read the result if you need it — The frame posts a message to the parent window when it lands. Listen for e.data.type === "pickerspin:result" to get the winner and its index, and "pickerspin:height" to size the iframe.

Embed a Spinner Wheel on Your Site — questions

How do I embed a spin the wheel on my website?

Paste one iframe: <iframe src="https://pickerspin.co/embed/wheel/?entries=Alice,Bob,Carla" width="100%" height="520" style="border:0;border-radius:12px;max-width:420px" loading="lazy" title="PickerSpin Wheel"></iframe>. Set your options in the entries parameter, comma separated. No script tag, no API key and no account are needed.

How do I add a spinner wheel to WordPress?

Three ways. Paste a pickerspin.co URL on its own line in a paragraph block and WordPress builds the embed itself through oEmbed. Or install the free PickerSpin plugin and use the [pickerspin entries="Alice,Bob,Carla"] shortcode. Or drop the iframe into a Custom HTML block.

Does the embed need an API key, account or script tag?

No. It is a single iframe pointing at a static page. There is no key to request, no account to create, no JavaScript library to include and no build step.

How much does the embedded wheel weigh?

About 3KB compressed, in one request, and it loads lazily so it is not fetched until a reader scrolls near it. The frame makes no third-party requests and sets no cookies.

Can I read the spin result from my own JavaScript?

Yes. The frame posts a message to the parent window when it lands: window.addEventListener("message", e => { if (e.data.type === "pickerspin:result") console.log(e.data.winner, e.data.index); }). It also posts pickerspin:height so you can size the iframe to fit.

Can I customise the embedded wheel?

Yes, through URL parameters: entries for the slices, title for a heading above the wheel, theme for light, dark or auto, and color for the spin button as a hex value. For example ?entries=Pizza,Curry,Tacos&title=Dinner&theme=dark.

Is the embed free to use commercially?

Yes. It is free on any site, personal or commercial, with no ads shown to your visitors and no usage limits. Keeping the small attribution link is appreciated but not required.

Is the embedded spin actually random?

Yes. The winner is drawn with the browser's Web Crypto API before the animation starts, using rejection sampling so the modulo cannot bias the result toward lower indexes. The animation reveals a result it cannot change, and the distribution can be verified at pickerspin.co/randomness.

Where else can I embed it besides WordPress?

Anywhere that accepts an iframe: Google Sites, Canvas, Moodle, Schoology, Notion, Wix, Squarespace, Ghost, and the Classroomscreen embed widget. The same snippet works in all of them.