Share this article

Need to make your own quiz? Use Interact

Updated: February 12th, 2018

If you want a quiz embedded on your site that looks really clean, you’ve come to the right place. We can even set you up with an embed code that is responsive to each question, so no matter how long or short each question of your quiz is, it fits perfectly on the screen for any device. We’ll run down the major platforms and how to embed your quiz here.

WordPress.

1. Click “Share and Embed” from your interact dashboard, after your quiz is ready to go.

*Note, once your quiz is embedded it will automatically update no matter how many times you make changes to it, so you only have to go through the embed process once.

1

2. Select “Embed in your Website or Landing Page” from the modal that comes up after you click “share and embed”

2

3. Now click the “WordPress” tab on the embed options pageĀ 

3

4. Now click the “Interact WordPress Plugin” link to download the plugin

4

5. And go install the plugin in your wordpress site

5

6. Now go back to interact, and copy the shortcode by clicking “Copy Shortcode to Clipboard” from the same publishing modal

6

*Don’t forget to set the heigth and width if you have a special sized quiz, otherwise the defaults will work fine

7. Paste that shortcode into the “text” view of a new page or post in wordpress

7

8. Preview and publish!

8

Custom HTML

To embed a quiz into any custom HTML site you have two options, iframe embed code and Javascript. I’ll go over both with pros and cons here, which basically boils down to the fact that the iframe code is simpler to embed but the javascript has more options.

Let’s run through your options for embedding and what they look like. I’m using an html emulator that makes it super easy to test this stuff before committing to trying it on your actual site.

Iframe

iframe

It’s a standard iframe, exactly like what you’d get from a YouTube video, but we do have some custom options.

1. Auto Resize: Not available on iframe option, see Javascript option below

2. Embed Size: Is by default a fixed size, this works well because you can set it to be large enough so even the tallest question fits into the embedded iframe. You can also choose to have the quiz fit the container it’s in, but that’s more risky.

3. Mobile Devices: You can choose to have your quiz open in a new tab rather than remain in the iframe if you’d like. People choose this option because sometimes iframes just aren’t big enough on a phone no matter what you do.

4. Cover Page: You can disable the cover page of your quiz so people see the first question by default instead of seeing the page that says “Take Quiz” You’d most likely use this if you were running ads to the quiz and the ads said “Take Quiz” because you wouldn’t want people to then see the cover page and have to click “Take Quiz” again.

Here’s what the iframe code looks like live on a site, the code is on the left and the quiz is on the right.

iframe embed

Javascript

The only difference with the Javascript embed is that you have the option to enable “Auto Resize” which means that the quiz embed automatically adjusts size as you go through the questions to accommodate for changing sizes of questions so that there are no scroll bars or empty white spaces in the quiz or the page.

auto resize

And here’s what that one looks like embedded, with the code on the left and the quiz on the right.

javascript embed

I won’t go into detail on other platforms here, but we do have full guides on everything, I’ll link out to them. Leave a comment if there’s another platform you’d like to see how to embed a quiz in.

1. Squarespace

2. Wix

3. Weebly

4. Shopify

5. Leadpages

6. Unbounce

7. Instapage

Need to make your own quiz? UseĀ Interact


Share this article