How can I use ‘Custom in-quiz iFrames’?
Custom in-quiz iFrames are a powerful and flexible way to add your own sign up forms, video ads, or other content to your Riddles.
Our standard 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 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
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:
- 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).
- 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.
- 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 email@example.com.
(Don’t be shy… we read and respond to every message – most of the time in under five minutes.)