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.
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.
2. Select “Embed in your Website or Landing Page” from the modal that comes up after you click “share and embed”
3. Now click the “WordPress” tab on the embed options page
4. Now click the “Interact WordPress Plugin” link to download the plugin
5. And go install the plugin in your wordpress site
6. Now go back to interact, and copy the shortcode by clicking “Copy Shortcode to Clipboard” from the same publishing modal
*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
8. Preview and publish!
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.
It’s a standard iframe, exactly like what you’d get from a YouTube video, but we do have some custom options.
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.
And here’s what that one looks like embedded, with the code on the left and the quiz on the right.
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.