0 Flares 0 Flares ×

So you’ve built an awesome quiz using Interact, and now it’s time to get that amazing piece of interactive content integrated into your website. Lucky for you, embedding quizzes is super simple for nearly any website or social network. In the following guide we’ll walk through exactly how to embed quizzes on any website. Just find the one you use and you’ll be embedding in no time!

WordPress.

At the end of the quiz creation process you’ll be given a code that looks like the one pictured below. this code is just an iframe (the same technology youtube uses to embed videos). All you need to do is copy that code and you’re ready to get started.

embed code

 

Once you’ve got the code selected it’s time to put that quiz into your post. You can embed this code virtually anywhere on a wordpress site (posts, articles, sidebar, etc), but the best place for it to go is in a post. That’s because the ideal size for quizzes is 800 by 600 pixels, which is about 2/3′s of an average web page. This provides adequate space for the quiz to display all of its content.

Once you’ve got a new post open, select the “text” tab in the upper right-hand corner and paste the quiz code in. There’s a picture below of what that looks like.

01

Once the code is pasted in, you can continue editing the page to add text content or anything else you want. I would advise switching back to the visual editor so you can see where the quiz will be in the post. That way you can work around the quiz and make sure the page looks nice when it gets published. When you’re done creating all the content, just publish the page and the quiz will be there, just like the screenshot below.

red cross swim quiz

 

*One thing to note is that wordpress.com doesn’t allow you to embed iframes. What you’ll have to do there is have an image of your quiz that links to the full page quiz hosted on Interact.

Custom HTML.

For sites that are custom-built, the process is slightly more complicated than for wordpress (slightly in the most literal sense of the word, it’s still really easy). To demonstrate how simple it is, I embedded a quiz using a simple online text editor to show how it works. If your page is created using HTML, just use the same embed code as picture in the wordpress tutorial above and embed it in a <p> tag with the styling you’d like to use to center it. I did it in the image below. The code itself is also in there so you can see the format of the embed code within the paragraph tag.

swimming quiz

Tumblr.

The site that prides itself on minimalism doesn’t dissapoint when it comes to adding quizzes. It only takes two steps to drop a quiz into a tumblr blog and be up and running. To prove how easy it is, I made a tumblr blog  just to put a quiz in and called it “Interact Testing Blog” after setting up my account, I selected to create a new text post and then clicked the “html” button to paste in my code.

02

 

After dropping in my code I had to switch back to normal mode by clicking the “html” button again. Then I clicked post and was done. One thing to note is that when you first click post you’ll get a weird preview thing that doesn’t look right, but once you click through to actually view the quiz on your blog it will look like this.

tumblr 2

Blogger.

Blogger is in a heated battle with tumblr for the absolute easiest way to embed a quiz. Once again I started from scratch with a brand new blog to see how long it took me to get a quiz up and running. Again, I used the same embed code, which you can access from your dashboard. All I had to do was create a new post and paste the code into the “html” option.

03

Once the code is pasted in, you can continue working on the post, or just publish it with the quiz. When you’re ready, just publish and the quiz will be all set. This is how it will look (yours will be fancier since I just made this blog)

blogger 2

Google site.

This is the first of our slightly more difficult embed options. By more difficult I mean you have to do some digging to find the right widget to support the Interact widget. What you’re looking for here is the “embed gadget” which can be found in the “insert” menu of your Google site web builder. Once you have selected the widget you’ll be able to drop the iframe code from Interact into it.

gadget

 

One thing to note with Google sites is that they don’t allow for script embeds (which is the default option for Interact quizzes) you can shoot us an email to josh@tryinteract.com to get the iframe version of the quiz embed code. Once the code is in all you have to do is hit save and you’ll be all set.

google site

Wix.

Wix is a bit involved, I’ll be honest. That’s why it gets its own article for how to embed a quiz. Check that out here 

Facebook App .

This one also takes a bit of work, but is really cool when done. Check out the guide here

Webs.com Website

Check out the guide for webs.com here

Shopify.com Website

View the guide to implement a quiz into a shopify.com site here

 

 

 

Free Live Training! How to Generate Leads Using Quizzes. Click here to claim your spot

0 Flares Twitter 0 Facebook 0 Google+ 0 Email -- LinkedIn 0 0 Flares ×