Embed an Interactive Wheel on a Website

WheelOSpin’s Embed button produces an iframe for a dedicated lightweight wheel view. The frame can be placed in an HTML page, learning platform, internal dashboard, or blog that permits third-party iframes.

Create the code

Set up the wheel first, then choose Embed and copy the generated HTML. A typical result looks like:

<iframe
  src="https://wheelospin.com/embed/?items=Yes%7CNo"
  width="100%"
  height="700"
  title="Interactive WheelOSpin wheel"
  loading="lazy">
</iframe>

The exact URL contains the entries. Changing the wheel in your browser after copying the code does not update an existing iframe.

Size the frame

Use a responsive width such as 100% and give the frame enough height for the wheel, button, and editable options. Around 700 pixels is a practical starting point on desktop. The host page can use CSS to adjust height at smaller breakpoints.

Avoid hiding the controls below a clipped frame. A participant should be able to see that entries are editable and understand which page produced the result.

Add a useful title

The iframe title attribute should describe its purpose, such as “Random student picker wheel” or “Movie genre picker.” A generic title like “iframe” provides little context to assistive technology.

Understand the URL privacy model

The entries are encoded in the iframe URL. They are not stored in a WheelOSpin account, but URLs can appear in:

• the host page source;
• browser and network history;
• server and proxy logs;
• copied snippets;
• analytics systems used by the host.

Use public-safe labels. Do not embed private student rosters, email addresses, customer records, secret project names, or other sensitive information.

Host-site restrictions

Some website builders remove iframe markup. Others use a Content Security Policy with a frame-src rule that allows only selected domains. In those cases, an administrator must explicitly permit https://wheelospin.com.

Browser extensions, privacy products, and managed networks can also block frames. Provide a normal link to the wheel as a fallback.

What the embed does not provide

An embed is not a centrally managed wheel. Wheel state saved inside one visitor’s browser does not synchronize to other visitors. The host cannot treat the recent history as a shared or authoritative record.

The iframe also does not prove that its URL or surrounding page has not been edited. Do not use a public embed as a certified drawing system.

Test before publishing

Open the published host page in a private browser window and on a phone. Confirm that:

1. the frame loads over HTTPS;
2. labels are readable;
3. the spin button and result are visible;
4. keyboard focus can enter and leave the iframe;
5. the host page has a fallback link;
6. no private entry is exposed in source or logs.

For a full explanation of links, local storage, imports, and images, see Save, Share, Import, Download, and Embed a Wheel.