Custom Video iFrame before quiz results

Our Team Plan provides the ability to show a video prior to displaying the quiz results instead of showing a lead collection form.

You will find examples of this and more non technical background on our blog.

Please read this first to understand the basic concept of video ads in Riddle.

To show a video you need the following:

  1. A server where you can upload an html file. The server needs to be SSL secured, meaning the URL of that server needs to start with https://
  2. A place to host the video. This can be a directory on your server or you can use the embed code from other video hosting services

Create an HMTL file based on the example below and make sure to change the video location as noted in the comments in the code.

The code below does the following:

  1. It loads the video and displays a message below the video “Calculating your test results…”
  2. After 4 seconds, that text is replaced with a “Continue” button
  3. Once the button is pressed, the code sends a message to Riddle to show the result page. “window.parent.postMessage(“iframe-complete””,”*”)

Now save that html file on your server and note down the URL to the file. Paste that URL into the iFrame field on Riddle and disable the skip option.

That’s all it takes. If you know your way around JavaScript and HTML, you should be able to use the example below to build your own super cool video ad integration with Riddle.

HTML

Here is a live example: