How To Embed Your Quiz On Any Website

Learn how to embed an Interact quiz on any website. Create a quiz and embed it in HTML, or use our quiz plugin to simplify the process.

Create a Quiz for Your Website Today!

Do you want to offer a personality quiz on your website, but you’re not sure how? Or have you already created one with Interact, and now you’re not sure how to embed it into your online store?

If any of that sounds familiar, then you’re in the right place.

In today’s tutorial, I’ll walk you through how to embed your Interact quiz into any website. I’ll also explain why you should create a quiz in the first place, how to make one for free, and I’ll even share some tips on how to make your quiz convert. 

Use the following links to jump around this blog post:

Let’s go!

Why do you need a quiz on your website?

People leave websites when they don’t find what they’re looking for, or if nothing engages them or piques their interest. 

A lack of interesting or engaging content is one of the most common reasons why many sites have a high bounce rate.   

Yoav Vilner, CEO of Walnut, stated that you can tell whether a website is good or not by looking at visitor engagement. “A good website, then, can be roughly defined as one that keeps readers engaged,” he explained. 

Now, consider the purpose of a website.

A website is meant for turning visitors into customers. It’s where potential customers decide to work with you, join your courses, or buy your products.

When people visit your website, they want to connect with you, learn about what your offering, and find out if you have something that fits their needs. 

And so, you need to capture their interest the moment they land on your site. If you can’t do that in 15 seconds, then you probably aren’t going to. 

So what can you do to increase visitor engagement?

The simple answer is interactive content—AKA quizzes

Think about BuzzFeed quizzes. They’re fun, addictive, and tricky.

People love them and even look for them. And most of the time, they do so just for fun.

Quizzes are also useful to facilitate distance learning, which is trending in the United States. The more quizzes students take, the more they learn

But let me tell you this: quizzes aren’t just great for entertainment and education. They’re also conversion-generating machines. 

In 2015, Zenni Optical published a quiz on their website that brought it huge success:

  • 573,338 unique visitors
  • $1,167,746.21 in total revenue
  • 9,655% in return on investment 

Since then, quizzes have been taking the internet by storm, becoming a success formula for many business owners

  • Website designer Elizabeth McCravy generated $65k in revenue with her personality quiz.
  • Using an online quiz to collect leads, Jenna Kutcher built her multi-million dollar empire.
  • Over $100,000 in sales and over 30,000 leads were what Bethany McDaniel, founder of Primally Pure skincare brand, achieved from an online quiz.

We’ve written so many case studies on how quizzes can skyrocket conversion rates. Check them out for motivation.

So, which quiz-building websites should you consider to create your own quiz. 

What are the best quiz websites?

Just google “quiz websites,” and you’ll receive thousands of suggestions—Sporcle, BuzzFeed, Quotev, to name just a few. 

Google results for quiz websites

But to create a quiz that is a part of your marketing strategy, you’ll need to use the best online quiz-makers out there, like Interact quiz builder, for example.

Interact is an online quiz-maker that allows people to create personality, assessment, and scored quizzes. It’s a go-to quiz builder for educators, e-learning professionals, bloggers, and marketers.

Interact has a clear, intuitive user interface. You can build a quiz from scratch or choose a customizable template.

quiz cover for which color scheme do you prefer?

Among Interact’s many features, you can:

  • Add quiz questions, set correct answers, and show quiz results 
  • Design quizzes using style options to make your quiz fit your site 
  • Add an opt-in form to a quiz to collect leads and segment audiences 
  • Share quizzes on social media or embed them into a website, landing page, or popup 
  • Track conversions and get real-time reports with built-in Facebook Pixel and Google Analytics
  • Support 25 integrations, including marketing automation, email marketing services, analytics tools, membership, and course sites

For those who are new to quiz building or need help with design ideas, check out Interact’s template library. With 800+ pre-made quiz templates, it’s a great source for inspiration and to learn from expert quiz-makers. 

Also, don’t forget to take a look at real-life quizzes created with Interact to spark ideas. 

The best part? Interact offers a free plan with unlimited quizzes. FOREVER!!!

That’s freakin’ awesome, right?

GIF of women screaming
From Giphy

If you’re ready to generate an Interact quiz, learn how in the next section. 

How to create a quiz for your website 

Use Interact quiz builder to turn your ideas into a quiz in minutes. It’s easy to use for everyone.

Interact quiz-building dashboard

We’ve created many step-by-step guides to walk you through building an Interact quiz. Check out our Tutorials category, or click any of the links below to get started:

Once you’re done with creating a quiz, you can embed it into your website. 

Interact makes it easy to put your quiz in WordPress, Squarespace, Wix, Weebly, Shopify, BigCommerce, Leadpages, Unbounce, Instapage, and an HTML site. You can even embed an Interact quiz to a website using JavaScript. 

Let’s move on to learn how. 

Embed a quiz in WordPress

Embed an Interact quiz in your WordPress site using the Interact plugin for WordPress. It’s a simple but powerful tool to help you create a WordPress quiz site quickly. You can embed your quiz to an existing or new post/page. 

Step 1: In your WordPress dashboard, click Plugins and type “Interact” in the search box to find the Interact plugin. Then, click Install Now > Activate.

Interact plugin for WordPress

Step 2: Go back to your Interact dashboard and choose the quiz you want to embed to your WordPress website. Click Share & Embed.

Share & Embed button in Interact

You’ll see a dialog box with five options to share your quiz. Click Embed Code > WordPress > Copy Shortcode to get the code.

Copy shortcode button in Interact

Next, choose one of the three options Interact provides for how you’d like your quiz to appear on your WordPress site:

  • Use custom embed size: Select this to change your quiz’s dimensions. Otherwise, your quiz will be automatically resized to fit the quiz content. 
  • Open quiz in new tab on mobile devices: Select this if you want your quiz to open a new tab on mobile devices. 
  • Disable cover page on quiz: Select this if you want to hide your cover page. Your quiz will start from the first question. 

Step 3: In WordPress, click a post if you want to embed a quiz to it. 

Then, click Add block and type “shortcode” to find the Shortcode block. Next, click Shortcode to add it to your post. 

WordPress Gutenberg shortcode widget

Then, paste your Interact quiz shortcode into the Shortcode block:

pasting shortcode in widget

When you’re finished, click Preview to see how your quiz appears on your WordPress site. 

quiz preview

Note: Step 3 applies if you’re using the Gutenberg editor. If you’re using the classic editor, follow this guide instead. 

Embed a quiz in Squarespace

You don’t need a plugin to embed a quiz in Squarespace. Just copy and paste your quiz code into a codeblock on any page of your site.

Step 1: In your Squarespace builder, hover your mouse over the left menu and click Pages.

Pages in Squarespace menu

Choose the pages where you’d like to add your quiz. Click Edit at the top of the page. 

Edit in Squarespace

The page will expand, as shown below. “Plus signs” will appear around sections of the page as you hover over them. 

blocks in Squrespace page builder

Step 2: Select the section where you’d like the quiz to live. You’ll see a placeholder text block; hover over it, and two insert points will appear. As you hover over an insert point, you’ll see guidelines showing where a new block can be placed. 

Choosing the section in Squarespace builder

Click an insert point to show the block menu. Scroll down to the More section and click Code

Add code in blocks

An HTML box will appear with a line of code in it. You’ll replace this code with your Interact quiz code. 

Step 3: In your Interact quiz builder, click the quiz you want to embed to your Squarespace site. Then click Share & Embed > Embed Code > iFrame.  

Finding iFrame code in Interact

Choose from the three options available to customize the embed code if you want. Then, click Copy Code to copy the code. 

Step 4: Go back to the Squarespace page builder, paste the quiz code into the HTML box, and click Apply.

HTML box

Your quiz is now live on your website. Hooray!

live quiz cover

Check out this detailed guide to learn how to make a quiz for your Squarespace website from scratch.

Embed a quiz in Wix

Wix is an ideal website builder for small businesses, restaurants, online stores, and artists. 

If you’re running a Wix website, you can easily embed your Interact quiz.

Step 1: In Wix, navigate to Add > Embed > Embed a Widget

finding Wix embed widget

Click the plus button to add an “Embed a Widget” block to your Wix page. You can move the block to any place or change its dimensions. 

where to put the code

Then, click Enter Code to open the HTML Settings dialog. Select Code to show a box where you can place your quiz code. 

HTML box

Step 2: Go back to your Interact dashboard and copy the iFrame code of your quiz. Then, switch to your Wix website editor and paste the code into the code box and click Apply.

Adding iFrame code to Wix

Here is what you’ll get:

Embed a quiz in Weebly

Step 1: In your Weebly website editor, drag and drop the Embed Code element into your site.

Weebly page builder

The Click to set custom HTML button appears. Click it to open the Custom HTML dialog:

Add custom HTML

Next, click Edit Custom HTML to display a box where you’ll place your Interact quiz code.

where to add HTML to Weebly

Step 2: Go back to your Interact quiz builder, then copy and paste the iFrame code of your quiz. 

getting iFrame code from Interact

Step 3: Paste your quiz code into the HTML box in the Weebly editor.

pasting code into HTML block

Finally, enjoy the result!

Embed a quiz in a Shopify store

Take these steps to add a quiz to a page or a blog post on your Shopify store:

Step 1: In your Shopify dashboard, navigate to the Sales Channels section on the left menu. Click Online Store, and then Blog Posts or Pages, depending on where you want to embed your Interact quiz.

finding the blog post builder in Shopify

You can embed your quiz into an existing post or a new post. Either way, click Show HTML in your Shopify rich text editor.

HTML editor

Step 2: Go back to your Interact dashboard. Copy the iFrame code, and then paste it into the Shopify rich text editor.

add iFrame code to shopify

That’s it!

Embed a quiz in a BigCommerce store

Step 1: In your BigCommerce page builder, select the page/post where you want to embed your quiz. Then, click Widgets > Basic > HTML.

Find HTML widget

Drag and drop the HTML widget into your selected page. An HTML box will appear on the left as shown below. This is where you’ll place your quiz embed code. 

where you put the code

Step 2: Copy your quiz iFrame code from the Interact quiz builder and paste it into the HTML box above. Then select Save HTML. Remember to paste the code after the </p> tag.

add code and preview

Embed a quiz in Leadpages

Leadpages is one of the most popular websites to design landing pages. You can add your Interact quiz to a Leadpages landing page to collect leads.

Step 1: In your Leadpages quiz builder, click Widgets > Show More > HTML.

HTML widget in leadpages

Drag and drop the HTML widget into the section where you want to place your Interact quiz.

adding to section of page

Then, click anywhere in the HTML widget to display the HTML box.

box to add HTML code

Step 2: Go back to your Interact dashboard and copy your quiz iFrame code. Then, paste it into the HMTL box in the Leadpages page builder and click Save

adding the code to the block

Your code will be saved, but Leadpages doesn’t show your quiz inside the page builder. You need to click Preview to see the quiz. 

where to find the preview button

Here it is:

preview of quiz on Leadpages

Check out this comprehensive guide to learn how to create a quiz landing page with Leadpages. 

Embed a quiz in Unbounce

Step 1: In your Unbounce page builder, choose where you’d like to embed your Interact quiz on your landing page. Then, hover your mouse over the options menu on the left, and you’ll see the Custom HTML element. 

custom HTML element

Drag and drop the Custom HTML element to your page. Then, the Embed Custom HTML Code box will appear:

box to add code

Step 2: Go back to the Interact quiz builder, copy the iFrame shortcode of your quiz, and paste it into Unbounce’s Embed Custom HTML Code box. Click Save Code.

code pasted in

After that, your quiz will appear as a placeholder in the Unbounce builder.

placeholder inside builder

To see the actual quiz, click Save > Preview.

preview of the quiz

Embed a quiz in Instapage

Step 1: In your Instapage page builder, click Settings > HTML/CSS.

HTML under Settings

Then, you’ll see the HTML/CSS box like this:

HTML editor in Unbounce

You can place your quiz code in the header, body, or footer of your page.

Step 2: Copy your quiz iFrame code from the Interact quiz builder. Then, paste the code into the HTML/CSS box in the Instapage builder.

add code from Interact

Note: after you paste your quiz into this box, nothing will appear on your Instapage builder. Click Preview to see your quiz.

quiz not showing up with Preview button highlighted

Here is your quiz:

quiz preview

Embed a quiz in an HTML site

You can add your quiz iFrame code to an HTML site. This is done in the same way you’d put a YouTube code to a website. 

quiz on HTML site

Embed using Javascript

You can use your Interact quiz iFrame code to embed a quiz into your WordPress site. But an iFrame code comes with some disadvantages. 

For example, it isn’t compatible with all browser types, and sometimes, it’s not good for search engine optimization.

Instead, consider embedding your quiz using JavaScript.

JavaScript code removes the browser compatibility. Your quiz will blend into your website more seamlessly by inheriting your website’s CSS, allowing your quiz fonts and colors to shine through. 

Luckily, Interact quiz builder allows you to embed your quiz to any website using either iFrame or JavaScript. 

Javascript code on Interact

Note: this method doesn’t always work because some websites don’t allow adding JavaScript. 

Tips for creating a high-converting quiz for your website

When you create a quiz for your website, keep these tips in mind:

1. Ask better questions

Knowing how to ask a question is just as important as knowing what to ask.

By asking the right questions, you prove you understand quiz-takers’ needs, helping them figure out their problems through your quiz. They’ll be engaged and spend more time on your site to answer questions to eventually get a solution (AKA your offer) at the end of the quiz.

Here are some tips to help you create engaging and fun quiz questions

  • Rresearch your potential audience thoroughly. What do they expect? What are they looking for? What do they need help with? What do they love/like/hate? Where do they share their opinions? What language do they use? The more information about them you have, the better. 
  • Diversify your question types. Use a combination of different quiz question types to make your quiz interesting. For example, mix multiple-choice questions with true/false questions in a quiz. You can do this easily with Interact quiz builder. 
  • Show your expertise. By doing so, you’ll build trust with quiz takers. This is important if you offer product recommendations after the quiz. Interact allows you to demonstrate your knowledge in your quiz in many ways. For example, add a short explanation after each question to explain why a quiz-taker’s answer was correct or incorrect. 

Check out How To Ask Better Questions for more useful tips. 

2. Create a sales funnel for your quiz

You created a quiz for a reason: to collect leads and convert them into customers.

You want to see increases in your sales revenue dashboard, not just your traffic analytics display. 

But it’s not that easy to get conversions. If it was, everyone could make a fortune overnight, right?

According to HubSpot, approximately 96% of your website visitors are not ready to buy. MeetEdgar said it’s 98%. 

Neil Patel brings another interesting point: 48% of businesses say their leads require a long sales cycle with many influencing factors.  

What do these numbers mean?

It means you need to create a marketing funnel for your quiz to nurture your leads or help them move through your funnel. 

Hold up—don’t more quiz-takers mean higher conversion rates? 

Yes, definitely! 

But remember, any lead generation methods, PPC campaigns, landing pages, quizzes, etc., are only at the top of your marketing funnel. Their job is to convince people to sign up for your email list in exchange for offers and future incentives.

Once they sign up, you’ll need a marketing funnel in place to maintain a relationship with them and keep them engaged. You’ll increase the chances of leads becoming buyers. 

As Kayla says:

“After all, the quiz isn’t where you make your sales pitch. It’s only meant to grab your audience’s attention so you can effectively make the sales pitch through email. This is essentially the strategy behind your quiz marketing funnel.” 

If you don’t know how to get started with your marketing funnels, check out these amazing guides:

Your turn 

Now you know how to embed a quiz to any website. 

Start creating your quiz with Interact today. Then, choose a platform to create a website and follow our guide to place your quiz on it.

If you still have questions, feel free to reach out to us. We’re happy to help!

Create a Quiz for Your Website Today!