Embed videos, ads, and other content with Riddle’s ‘In-Quiz iFrame’

4 min read

Our quiz maker makes it easy to place videos, ads, contest entries forms, or other content using our ‘In-quiz iFrame’.

You probably already know that adding lead generation to interactive content like quizzes, lists, and polls is powerful.

Your audience is at their most engaged – so it’s a perfect time to power your marketing funnel – and ask for their name and email address for newsletter sign ups, contest entries, or white papers.

But now, you can use our new in-quiz iFrame feature in our quiz builder – display your own sign up forms, video ads, or other content.

Super powerful, super flexible… we bet you love it.

In-quiz iFrame: example

Why is a custom in-quiz iFrame so powerful?

Many of our partners like sports publisher 90min.com use our quiz maker’s in-quiz iFrame as a flexible tool kit – easily customizable to each of their clients’ marketing objectives.

  • “Can we show our own video ads to monetize all of this viral traffic?”
  • “We have some proven landing pages – can we use these instead?”
  • “I’d like to use Riddles for contests, but use my own contest entry forms from another system.”

In this case, 90min had their team create a poll contest around picking the winner of the Champions League – successfully supporting the launch of the film “Ready, Player One”:

They easily added a video trailer between the question – and displaying the poll results… when each user is most emotionally engaged.

Engagement, video views, and social virality – in one quick-to-create interactive format.

(220K+ responses!)

You can use our In-Quiz iFrame option in all 14 of our quiz maker formats, the only limitation is your imagination:

  • Video ads
  • Like/follow us on Facebook/Instagram
  • Your lead generation or contest entry forms from any other marketing software

The bottom line? If it can be shown as an iFrame, you can display to your audience in your Riddle quizzes.

Custom in-quiz iFrame: getting started

  1. In the ‘Lead gen’ step, click on the ‘Custom’ option.
  2. Paste in your iFrame’s URL (it will need to come from a HTTPS:// domain)
  3. Customize the height as a percentage of the width (our default is 75% high compared to 100% wide)
  4. Choose to add a skip button – so users can opt out of completing your form
  5. (Not sure how to create an iFrame? Check out this link.)

In-quiz iFrame: basic requirements

Our Custom in-quiz iFrame option allows you to include virtually any web content at the end of your riddle.

However, it just needs to meet a few requirements:

  • The web page must be hosted on a single public URL from a HTTS:// domain.
  • Alas, we don’t support HTML embed codes or custom variables.
  • Some webpages don’t allow embedding – they supply response headers that forbid it (example: http://www.google.com).
  • The iframe will be sized to fit the width of your riddle, so the webpage you choose must support small window sizes (between 300px – 600px wide).
  • We can’t detect the height of your content, so we allow you to specify the iframe height as a percentage of the width. It’s up to you to adjust this to fit your content for all screen sizes (if content doesn’t fit, scroll bars will appear for desktop users). For best representation on mobile devices, you should calculate the height as a percentage of the width and make sure to enter that into the height field. The default width for the entire Riddle unit is 640px. Thus, if you want to embed a form that is 900px in height, enter 141% (900/640*100).

Now, you can use existing content or forms, but we recommend the best content would be custom built for use in this Riddle, and use CSS and javascript to fit the layout (or even trigger the next page – see below):

  • You can disable the skip button below the iframe, but you must implement the auto-continue trigger in this case or the user will be stuck on this screen.
  • Trigger the auto-continue in your page’s javascript at any time to progress to the next page of the Riddle. Some example uses after:
    •  a 5 second timer
    •  a video finishes playing
    •  the user clicks a button, or some other interaction

Here’s another spectacular example by 90min – promoting the movie launch of ‘Game Night’ with full branding (using our  quiz maker’s CSS editor) and a video trailer.

Your in-quiz iFrame: static images

You can go beyond using videos – any content that can be put in an iFrame will work.

For example, imagine you wanted to display a static image instead – here’s how:

  1. Create an image that’s 606 pixels wide, 454 high.
  2. Embed this on a page on your site, and add this CSS so that the image displays well on different screen sizes.
  3.  (Please note – your URL must be https://.)
  4. Add your page URL into our custom in-quiz iFrame.

Custom in-quiz iFrame: summary

We’re pretty excited about this – super powerful, and dead easy to use.

With 14 types of interactive format, AND the ability to embed your own ads or forms, our online quiz creator is now a super flexible marketing platform.

But if you have any questions, please don’t hesitate to give us a shout on support chat or at hello@riddle.com.

(Don’t be shy… we read and respond to every message – most of the time in under five minutes.)

If you want to dive deeper into how to set this up for your Riddle, please make sure to check out our complete code example here.

Download our free e-book “Quizmaster”

Learn how to use quizzes for your marketing -
capture more leads and grow your business!
Scroll to Top