How to Embed a Spin Wheel
You can embed a SpinAndDecide configuration on another website using an iframe. The embedded view keeps the interactive wheel and hides the surrounding site navigation and reading content, making it useful for a classroom resource or an activity page. The configuration remains an editable browser tool: it is not a locked promotion system or a server-managed submission form. This guide covers preparing the entries, copying the generated code, adding it to a page and testing the result where your audience will actually use it.
By SpinAndDecide · Updated November 4, 2026
Create a public-ready configuration
Start with the correct preset and edit its entries, title and options. The embed contains the same encoded configuration used by a shared wheel link, so anyone viewing or inspecting it can read the labels. Use a public example list or anonymous activity labels rather than private rosters. Check removal, weights and team or dice settings before export. The iframe does not transform an unsuitable list into private data simply because it appears inside another website.
Generate the iframe code
Open Customize, save & share and choose Copy embed code. The generated iframe points to the current preset URL with ?sad_embed=1 and the configuration fragment. It includes a descriptive title, full-width sizing, a maximum width and an initial height of 1,050 pixels. Clipboard restrictions may cause a selectable text box to appear instead. Copy the whole iframe element, including its closing tag. An incomplete tag can be rejected or displayed as ordinary text by the receiving editor.
Add the code through your website editor
On WordPress, use a Custom HTML block in the page where the wheel belongs and paste the generated markup. Other website builders may offer an HTML or iframe component. Some platforms and account roles remove iframe elements for security reasons; consult that platform’s own controls rather than weakening security settings indiscriminately. Preview before publishing and confirm that you see the working wheel, not the raw code. This guide does not require installing a separate wheel plugin.
Give the frame enough room
The generated width adapts to its container, while the initial height is a practical starting point. On narrow screens, the wheel and editor stack vertically and may need more height. Increase the height in your own iframe markup if controls are cramped, or allow internal scrolling. Avoid hiding overflow when doing so would cut off the result controls. Because the embedded page is on another origin, your site should not assume it can directly measure or manipulate the iframe’s internal document.
Test interaction on the published host page
Use the actual page URL after publishing. Add a harmless test entry, spin, close the dialog and confirm that keyboard focus returns to the spin control. Test the host page at a narrow width, because its own sidebars or padding may constrain the iframe more than the standalone tool. Clipboard, fullscreen and storage access may vary inside embedded contexts. If an optional feature is unavailable, provide a normal link to the standalone wheel as an alternative.
Keep a standalone link nearby
An iframe should not be the only way to reach the activity. Add a descriptive link such as Open the custom wheel in a new page near the embed. That helps visitors using restrictive browsers, assistive technology or a small display. It also gives you a straightforward fallback if the host platform changes iframe behavior. Explain the activity in server-rendered text on your own page instead of expecting the embedded tool to supply all the surrounding instructions.
Update the configuration deliberately
The iframe source contains a snapshot. Editing the wheel in your own browser later does not update the code already pasted on your website. To change the embedded starting list, return to the intended preset, make the changes, generate fresh embed code and replace the old iframe markup. Save the host page and test again. Visitors who already loaded the old configuration may continue using it until they reload, so announce material activity changes clearly.
Understand the limits of an editable embed
Visitors can edit the entries and run new selections locally. The embed does not submit participant information to an organizer, enforce eligibility, record a formal draw history or stop a visitor from rerolling. For a simple activity that freedom is useful. For a promotion or consequential allocation, define the organizer’s process separately and use systems appropriate to the records and oversight required. A visually embedded wheel is still the same browser-based random picker.
Frequently asked questions
Do I need a WordPress plugin to embed the wheel?
No separate wheel plugin is needed when your editor permits iframe markup. A Custom HTML block can hold the generated code.
Why is my embedded wheel cut off?
Increase the iframe height and check the host page’s layout. Narrow containers stack the controls and need additional vertical space.
Will editing my saved wheel update my embed?
No. Generate new embed code and replace the old iframe source when the starting configuration changes.
Can visitors edit an embedded wheel?
Yes. It remains an editable local tool. It is not a locked or centrally audited promotion interface.