Embed tutorial

Embed a spinner wheel on your website

Use the chrome-free play page to place a working SpinnerWheel.ai wheel inside a website, learning platform, dashboard, or presentation.

Create and share a wheel

Create your embed

1
Build or open the wheel you want to use.
2
Select Save & share, then choose Embed.
3
Copy the iframe code and paste it into an HTML or embed block.
4
Preview the page on desktop and mobile before publishing.

Responsive embed pattern

The generated iframe works on its own. Wrap it like this when the host page needs a responsive 3:2 area.

<div style="position:relative;width:100%;aspect-ratio:3/2;min-height:420px">
  <iframe src="https://spinnerwheel.ai/en/play?cmsWheelId=904f8dd0-a445-408b-b8c6-9f09cf6ea605&lang=en&topBar=false" title="SpinnerWheel.ai" style="position:absolute;inset:0;width:100%;height:100%;border:0" allowfullscreen loading="lazy"></iframe>
</div>

Useful options

topBar=false removes site navigation and the footer inside the iframe.
Keep allowfullscreen so presenters can expand the wheel.
A width of 100% lets the iframe follow its container.
Use a minimum height of about 420px so controls remain usable on small screens.

Troubleshooting

If the host strips iframes, use its trusted embed or custom HTML block.
If the wheel looks cramped, increase the container height rather than scaling the iframe.
Create a new share code after changing choices if you want the embed to carry the updated wheel.

Live preview

This preview uses the same localized play surface as generated embeds.