Adding an interactive spinning wheel to your website can dramatically increase engagement. Whether you're running a contest, gamifying your store, or adding fun interactive elements, embedding a wheel is surprisingly simple. Here's how to do it on WordPress, Shopify, and any HTML-based website.
Why Embed a Wheel on Your Site?
Embedded wheels keep visitors on your site rather than sending them elsewhere. They increase time-on-page (good for SEO), create shareable moments, and can drive conversions through gamified offers like 'spin to win a discount.' E-commerce sites report 20-30% higher engagement with interactive elements.
Step 1: Create and Configure Your Wheel
First, set up your wheel on Spinning Name Wheel. Add your entries (prizes, names, options), customize colors if desired, and save your configuration. Then click the 'Embed' button to generate your iframe code.
Step 2: Copy the Embed Code
The embed code looks like this: <iframe src='https://spinningnamewheel.com/embed/?data=...' width='100%' height='500' frameborder='0'></iframe>. Copy this entire code snippet. The 'data' parameter contains your wheel configuration encoded in the URL.
Embedding in WordPress
In the WordPress block editor (Gutenberg), add a 'Custom HTML' block where you want the wheel. Paste your iframe code. Preview the page to confirm it displays correctly. For the classic editor, switch to 'Text' mode (not 'Visual') before pasting. Some themes may require adjusting the height value for proper display.
Embedding in Shopify
In Shopify, go to Online Store → Pages → select your page → show HTML editor (</> button). Paste the iframe code where desired. For product pages, edit the theme and add the code to product.liquid. For homepage sections, use a 'Custom Liquid' section in the theme customizer.
Embedding in Other Platforms
Wix: Add an 'Embed HTML' element from the Add menu. Squarespace: Add a 'Code' block in any section. Webflow: Use an 'Embed' element in the designer. Generic HTML: Simply paste the iframe code in your HTML file where you want the wheel to appear.
Customizing Size and Appearance
Adjust width and height attributes to fit your layout. Use width='100%' for responsive full-width display. Minimum recommended height is 400px for comfortable interaction. Add CSS styling to the container div for borders, margins, or shadows as desired.
Mobile Responsiveness
Our embed is fully responsive, but test on mobile devices after embedding. If the wheel appears too small on phones, try increasing the iframe height or adjusting your site's responsive breakpoints.
Conclusion
Embedding a spinning wheel takes just minutes but can significantly boost your site's interactivity and engagement. Whether for contests, customer rewards, or just fun, the visual excitement of a spinning wheel captures attention in ways static content cannot. Copy, paste, publish - it's that simple.
Ready to Try It?
Put these tips into practice with our free spinning wheel. No signup required!
🎡 Spin the Wheel Now