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 it's 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>

Wordpress Plugin and Shortcode

Our last option is using our WordPress Plugin. If you have a self hosted WordPress site, the recommended or iframe code will work for you without needing the plugin at all. Check out the suggested article here for ways to embed on WordPress.

Did this answer your question?