Custom in-quiz iFrames are a powerful and flexible way to add your own sign-up forms, video ads, or other content to your quizzes and other interactive content created with Riddle’s online quiz maker.
Our flexible online lead generation form builder is great – but many partners wanted an even more flexible option, asking us:
- “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.”
Part of our white-labelled Team plan, the answer is yes, yes, and yes once again.
The only limitation is your imagination.
If you can put the content in an iFrame, you can display it in your Riddles to your site’s audience.
Embed your own videos, ads, or forms
Unlimited flexibility – you can embed any content as an iFrame, including:
- Your own videos or ads
- Contests or your own lead forms
- Any iFrame content – like a ‘Like us on Facebook’ page
Use YouTube, Vimeo, or MP4 videos (no iFrame required)
Don’t want to use an iFrame? Now you can easily embed video in a form without the need for an iFrame.
Here’s how:
- Create a lead form
- Add an ‘image’ block
- Click on ‘image’ and then on the mountain/moon icon.
- Next – click on ‘video/audio’
- Choose YouTube, Vimeo, or MP4 videos (more info)
Example: YouTube video in a lead form
In-quiz iFrame – instructions:
- In the ‘Lead gen’ step, click on the ‘Custom’ option.
- Paste in your iFrame’s URL (it will need to come from a HTTPS:// domain)
- Customize the height as a percentage of the width (our default is 75% high compared to 100% wide)
- Choose to add a skip button – so users can opt out of completing your form
- (Not sure how to create an iFrame? Check out this link.)
In-quiz iFrame – key requirements:
Okay, so here are the technical details behind creating your own in-quiz iFrame. Don’t worry – you don’t have to be a super-smart coder, but you do need to be comfortable creating your own iFrame.
- 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
Custom 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:
- Create an image that’s 606 pixels wide, 454 high.
- Embed this on a page on your site, and add this CSS so that the image displays well on different screen sizes.
- <img style=”width: 100%; height: 100%;” src=”https://YOURIMAGEURL”> (Please note – your URL must be https://.)
- Add your page URL into our custom in-quiz iFrame.
We’re pretty excited about this – super powerful, and dead easy to use.
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.)