Riddle’s quiz maker makes it easy to embed your quiz on your WIX site.
WIX offers a very easy to use homepage builder that’s one of the most popular on the market (used by the global football/soccer powerhouse Manchester City).
They’ve done a great job making an easy to use website builder – perfect if you’re not comfortable using WordPress or coding it via HTML.
3 Easy Steps to Embed a Riddle on Wix.com
First, you will need to make some room for the Riddle.
- Just clean out a section or create a new empty section to place your Riddle quiz.
- Make it large enough to fit your Riddle type.
- Quizzes and polls are pretty compact, while a rolled out top 10 list will need a lot of space.
Don’t worry too much about perfect sizing at this point – WIX makes it super easy to resize everything later.
Now that you have some space for your Riddle:
- Click ‘add’ in the lefthand menu.
- Then ‘more’
- And ‘HTML iFrame’
This will allow you to place the Riddle embed code into your WIX site.
Once you have your iFrame in your site:
- Copy your quiz code from Riddle.com – (edit your quiz: Publish > ‘Get Code’).
- In WIX, click and drag the handlebars of your iFrame at the corner – to make it as wide as your site.
- Now select ‘enter code’.
- Paste in our handy Riddle quiz embed code.
Because Wix doesn’t play nicely with our embed codes out of the box, you’ll need to make a few minor tweaks:
- Change the ‘width’ to your desired width (500px normally works well for both desktop and mobile – but play around with your own width to see what works best for you.)
- Change the ‘height’ to the height that works best for your quiz – 800px is a good starting point.
(The back story for all these extra steps? Our embedded quizzes normally resize automatically in both height/width on any CMS – such as via our WordPress plug-in or directly in Squarespace. Unfortunately, Wix has configured their builder so this is not possible.)
This how your revised embed code should look:
BEFORE (Riddle standard embed code):
div class=”riddle_target” style=”margin: 0 auto; max-width: 100%; width: 640px;” data-rid-id=”144533″ data-fg=”#1486CD” data-bg=”#FFFFFF” data-auto-scroll=”true” data-auto-scroll-offset=”0″><script src=”https://www.riddle.com/files/js/embed.js”></script>
<iframe style=”width: 100%; height: 300px; border: 1px solid #cfcfcf;” title=”Pop Quiz – San Francisco: The Locals’ Challenge” src=”https://www.riddle.com/a/144533?”></iframe></div>
AFTER (WIX-friendly tweaks of Riddle embed code):
div class=”riddle_target” style=”margin: 0 auto; max-width: 100%; <strong><strong>width: 500px;” data-rid-id=”144533″ data-fg=”#1486CD” data-bg=”#FFFFFF” data-auto-scroll=”true” data-auto-scroll-offset=”0″><script src=”https://www.riddle.com/files/js/embed.js”></script>
<iframe style=”width: 100%; <strong> <strong>height: 800px; </strong> </strong> border: 1px solid #cfcfcf;” title=”Pop Quiz – San Francisco: The Locals’ Challenge” src=”https://www.riddle.com/a/144533?”></iframe></div>
Right – the good news? You’re almost set – nice work!
- You might need to move things around or drag the dividers of your HTML iFrame to give enough space.
- Click save > then preview.
- Be sure to check mobile view as well – so that your quiz looks good. You might need to adjust things a bit here too.
Video: How to embed your Riddle quiz in WIX
Right – that’s a fair number of steps… you may prefer to watch our founder, Boris, as he walks through the various steps.
Congratulations – that’s all it takes.
I hope you enjoy your shiny new add-on to your WIX site. From 14 types of interactive formats – including quizzes to lists, polls to personality tests and surveys, your visitors will love your Riddles.
And as always, if you have any questions, just ask us on support chat or email us at firstname.lastname@example.org – we love to help, and are super fast to respond to every message!
Ask WIX to approve our plug-in
PS. Want to make this easier? We’d love it if you could contact WIX customer support – we have a WIX plug-in already developed that would simplify this whole process. Now we just need to find the right person to say yes.