Once you publish your quiz, you will be taken to a page with ways to embed your content. Unsure about which embed code to use? There are three choices for embedding your content. Let's go over when to use each one with some examples.

Our recommended embed code is the one you should try first. This embed code allows your quiz to dynamically resize its height based on the amount of space needed for your content. It also makes for a very rich mobile experience. Notice how the quiz in the standard embed example resizes its height as you click through the questions:

If you would like to test our standard code on your site, here is a sample you can use:

<div class="quizz-container" data-width="100%" data-iframe-title="QUIZ: Pick your puppy!" data-height="auto" data-quiz="351733"></div>
<script src="//dcc4iyjchzom0.cloudfront.net/widget/loader.js" async></script>

Alternative iframe embed code

Your site may not permit javascript to be executed which would render our recommended embed code unusable. The iFrame is a great alternative to this as it contains all of Qzzr within an iframe. Iframe embeds need to have an explicit height specified in the embed code.

While this height varies depending on the width and content of your quiz, it's typically anywhere from 700 - 1200 px. It's better to have it a little bit larger so users won't have to scroll within the iframe. In the next two examples, we'll point out how important it is to set the right height on your quiz.

If you’d like to test our iframe code on your site, here is a sample you can use:

<iframe id="quizWidget-351733" width="100%" height="700px" frameborder="0" border="none" src="https://www.qzzr.com/widget/quiz/fi9xdWl6emVzLzM1MTczMw"></iframe>

Did this answer your question?