Embedding Riddle quizzes in Unbounce landing pages
Unbounce is a popular and powerful landing page builder, used by many marketers across the gl0be.
Riddle’s quiz maker works with almost every CMS out of the box – but Unbounce is a little special so there’s an extra step.
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.
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. 🙂