Embedding Riddle quizzes in Unbounce landing pages
Unbounce is a popular and powerful landing page builder, used by many marketers across the globe. We’re big fans – we use their software ourselves.
While Riddle’s quiz maker works with almost every CMS out of the box – Unbounce is a little special. You’ll need to just make one small change to your quiz embed code.
Using Unbounce with Riddle
If you’d like to embed your Riddle quiz into your Unbounce page, you just need to add this tiny snippet of code to your embed:
- Copy your embed code from Riddle’s ‘Publish’ step:
<div class=”riddle_target” data-rid-id=”153064″ data-fg=”#D82A2A” data-bg=”#FFFFFF” style=”margin:0 auto;max-width:100%;width:640px;” data-auto-scroll=”true”>
<script src=”https://www.riddle.com/files/js/embed.js”></script>
<iframe style=”width:100%;height:300px;border:1px solid #cfcfcf;” src=”https://www.riddle.com/a/153064?” title=”Pop Quiz – 80’s music challenge: Can you “name that tune”?”></iframe>
</div>
- Add this extra code:
<p style=”text-align: left; padding-left: 20px; font: inherit; font-size: 80%; max-width: 95%; width: 640px; margin: 0px auto; padding-top: 10px;”><a href=”https://www.riddle.com” style=”color: inherit;” rel=”nofollow” target=”blank”>Quiz Maker</a> – powered by Riddle</p>
- Then paste this combined code into your Unbounce landing page – using their ‘custom HTML’ option:
Your final embed code will look something like this – with the data-rid-id and other fields reflecting your own quiz:
<div class=”riddle_target” data-rid-id=”153064” data-fg=”#D82A2A” data-bg=”#FFFFFF” style=”margin:0 auto;max-width:100%;width:640px;” data-auto-scroll=”true”><script src=”https://www.riddle.com/files/js/embed.js”></script><iframe style=”width:100%;height:300px;border:1px solid #cfcfcf;” src=”https://www.riddle.com/a/153064?” title=”Pop Quiz – 80’s music challenge: Can you “name that tune”?”></iframe></div><p style=”text-align: left; padding-left: 20px; font: inherit; font-size: 80%; max-width: 95%; width: 640px; margin: 0px auto; padding-top: 10px;”><a href=”https://www.riddle.com” style=”color: inherit;” rel=”nofollow” target=”blank”>Quiz Maker</a> – powered by Riddle</p>
IMPT: Please note – you’ll need to make the Unbounce container large enough for your quiz… their tool won’t resize our quiz automatically on your page. But it’s easy to do with just a bit of experimenting.
Unbounce and Riddle – suggested use cases
We mentioned this at the top – quizzes are fantastic lead magnets. Smart marketers have been turning to Riddle since 2014 for quiz lead generation.
Why? People can’t resist a good quiz – they love discovering something about themselves, or finding out what they know about a topic.
- Personality test – perfect for assessments or product recommendations, personality tests give an overall result based on each user’s responses. Super flexible, you can use these in any vertical – including “Are you a liked (or loathed) manager?” (coaching) or “What car should you drive (really)?” (shopping).
- Quiz – from “Are you a savvy saver?” (retirement planning) to “How much do you actually know about mortgages?” (real estate), quizzes ask fact-based questions with right or wrong answers. People love to take them –
Hope that helps – but just give us a shout if we can help further… we’re, frankly, massive customer service geeks – and have a lot of fun with stuff like this. 🙂