How to Add a Quiz to Showit

The 3 easy steps to embedding a quiz into Showit

Add a quiz to a Showit landing page in a few easy steps. Here’s a video version if you prefer.

  1. Create a new page for your quiz
  2. Embed your quiz on your Showit page
  3. Optimize the quiz embed for the best experience on all devices

Need to create your own quiz for Showit? Interact integrates seamlessly with Showit and is a super easy-to-use quiz builder for generating leads and recommending products. Create a quiz for Showit now.

1. Create a new page for your quiz

Login to Showit and click on your account nam in the bottom left corner.

Choose “Create a New Design”.

Showit home page to create a new or open an existing design

Choose a template to work off of and then click “Start With This Design.” We recommend putting your quiz on a page without any distractions, this can include a header, footer, popups really anything that would take them out of the quiz. 

To remove distractions from the page, click on the section you want to remove in the Home menu on the left. Click the 3 dots and select “Delete” from the dropdown.   

Showit design preview

Now, click into the area of the page you want to embed the quiz. Then click the square icon (see below) at the bottom of the page and select “Embed Code” from the dropdown list.

An embed code frame appears on your page. Resize it and/or move the frame to the desired location on the page. This is where your quiz will appear.

Showit embed frame to add an embed code

2. Embed your quiz on your Showit page

Now go over to your Interact dashboard and click “Share & Embed” on your quiz you want to add into your Showit page. 

Select share and embed from interact

In the box that comes up, click on “Embed Code” on the left sidebar, and click the “Javascript” tab. This will auto-resize your quiz based on the height of the quiz question. 

Toggle on the buttons for “Auto resize embed to fit quiz content” and “Use custom embed size” then change the width of the dimensions to 1,500.  

Adjust javascript embed code in interact

Click “Copy Code.”

Back in Showit, double click in the HTML frame you just created. 

Then paste the embed code into the Edit Code frame and hit “Save.”

You can see below that I pasted in the Javascript code from Interact into the Showit code block. If it was a success you’ll see the quiz appear on your landing page (the quiz image may not load but it will appear on the preview and published site). The same will appear if you used the iFrame embed code. 

Showit site builder with interact quiz embedded

You can see above that I pasted in the Javascript code from Interact into the Showit code block html editor. If it was a success you’ll see “Your custom HTML is saved!” and you can view it in Preview Mode. The same will appear if you used the iFrame embed code. 

3. Optimize the quiz embed for the best experience on all devices

Double click on your quiz. You’ll see the embed code starts with <div. Immediately after that add align=”center” so it appears: <div align=”center” and click “Save.” This will center the quiz on all devices regardless of screen size. 

Preview your quiz on mobile and desktop to make sure everything functions as desired. If you have questions while building your quiz we have support experts on our live chat and community to troubleshoot your Showit quiz setup.

Showit preview of site with quiz embedded

Need to create a quiz for your Showit site? Interact has you covered, with the easiest-to-use quiz builder fully compatible with Showit. Create a quiz with Interact now.

What is the best quiz for you business?

Quizzes are super effective for lead generation and selling products. Find the best quiz for your business by answering a few questions.

Take the quiz