LeadsHook Test Set Up & Testing With Iframes

Note: The below instructions walk you step by step through testing with LeadsHook but the same principles apply if you are trying to test with other/different iframe content.

Have a page with a LeadsHook quiz that you would like to test? Below are the instructions on how to do so!

LeadsHook is using iframes to embed their quizzes. While you can't test iframes directly in Visiopt (Can't select iframes as variables), below you will find instructions on how to work around iframes.

Select the page with the LeadsHook quiz and open it in the test editor:

STEP 1

As we can't select iframes as variables, we need to select the parent (containing div) of the iframe.


Then click on the "Select parent element" and then click on the topmost element:

Once that is done click on "Select variable":

Selected variable will look like this (A div container and the iframe in it):

You'll see the above in the editor when you choose the html option.

STEP 2

Now, let's say you want to test the selected quiz (selected in the step above to set u pa the test on), against another quiz.

For this, you have to publish (embed) the second quiz to a page.

It can be done on any page, we will need it just to grab the code of the second quiz from it.

So, in a new tab in the browser visit the page where you embedded the second quiz.


Right-click on the quiz and then select "Inspect element", this will open the Developer tools of  the browser:

Find the parent element of the quiz iframe. In our example it is the “quiz-container” :

Right-click on the quiz container, then select Copy > Copy outer HTM:

STEP 3

Head back to Visiopt where we prepared the quiz variable, In the variable editor pop up, click on the HTML option:

Select everything in it:

And replace it with the new quiz we copied in step 2!

When done hit Save:

If you want to test more than two quizzes against each other, then you have to embed all quizzes to a page so you can grab their code as we did in the example above!

NOTE: if the new version of the quiz is cut off (meaning the bottom of the quiz is not visible) like here:

Open the new quiz in the test editor, open HTML mode, and increase the container element height as much as needed: