Riddle University: how to use the In-Quiz iFrame

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 ask for their name and email address for newsletter sign ups, contest entries, or white papers. Now you can use our new In Quiz iFrame tool to display your own sign up forms, video ads, or other content.

How can an iFrame be so powerful?

Many of our partners like the NBA’s Chicago Bulls have been seeing great results with their Riddles. Some have had over 20% of their users give their names and emails when showing  a lead gen form between the last question or item.

However, they wanted a more flexible option beyond our existing form builder or integrating with MailChimp.

  • “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.”

Now with our Custom In Quiz iFrame option, the only limitation is your imagination. If you can put content in an iFrame, you can display it in your Riddles to your site’s audience.

Live example (click on a poll choice to view):


Here’s how:

  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.)

The 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

We’re pretty excited about this – super powerful, and dead easy to use. But if you have any questions, please don’t hesitate to give us a shout at hello@riddle.com.

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

By | 2017-03-21T10:47:52+00:00 July 21st, 2016|

About the Author:

Passionate about ultimate frisbee, photography and travel, I'm an active Californian who 10 years ago fell head over heels in love with living abroad in Europe, and love bringing a healthy dose of American enthusiasm to a string of start-ups and small European companies. History and culture are great and all, but I'm still searching holding out hope for the perfect Manchester hamburger... any tips?

Leave A Comment