As a creative entrepreneur, you know how important it is to grow your email list. About a year ago, I decided to take the whole growing-my-list-thing seriously, and I’m so glad I did. My list continues to grow every day, and the biggest reason why is because I have Interact Quizzes in place that engage with my website viewers. 

If you would like to know more about Interact Quizzes and how it can grow your email list, then head over to my previously written blog post: How to Skyrocket Your Email List With An Interact Quiz.

Two Ways to Host Your Interact Quiz On A Showit Website:

There are two ways to host your Interact Quiz on a Showit website. The first way is the easier, less fancy option. Simply create a button, select the text/button background/etc. and create a link using the ‘Click Actions’ tab in the right panel of your Showit dashboard. By pasting in your Quiz’s URL, users who select this button will be directed to a webpage (hosted through Interact) to start your Quiz.

However, there is a fun, easy way to embed your Interact Quiz and use it as an interactive option (pun absolutely intended) on your website. Embedding your Quiz will make your website look more high-end and user-friendly and will allow users to stay on your website longer (and who doesn’t like that for SEO purposes?!).

There isn’t a right or wrong way to do this. I personally use it both ways, and I think it’s just dependant on how you would like your quiz to functionally work or look on your website.

How To Embed Your Interact Quiz On A Showit Website:

1. Create Your Quiz.

First, create your Interact Quiz. If you want to understand the importance of creating a Quiz to grow your email list or need help creating your Quiz, refer to this blog post.

2. Select the ‘Share & Embed’ button.

Once you’ve created and published your Quiz, it’s time to share it with the world! Simply select the ‘Share & Embed’ button.

3. Select the ‘Embed’ button.

There are many ways to share your Quiz, but to embed your Quiz on your Showit Website, you need to select the ‘Embed’ option.

4. Change any embed options.

You may have to play around with the embed options to get the sizing and look of your quiz the way that you would prefer it. I tend to keep the options as-is except I prefer to have the Quiz open on a new tab on mobile devices for user-friendliness.

5. Select and copy the Javascript code.

After you have specified or changed any options, select the ‘Javascript’ tab and copy the code to your clipboard.

6. Go to your Showit Website and create a canvas for the Interact Quiz

You can create a page dedicated to your Quiz and have it act as a landing page. You could also use it on any page and have a canvas dedicated specifically to your quiz and embed it there. But first, design the canvas to your specifications.

7. Select the Embed Code option in the bottom panel of Showit.

After your canvas has been created and designed to your liking, select the ‘Embed Code’ option in the bottom panel of your Showit dashboard. A black placeholder box will appear. Just like a photo, you can alter the sizing of this box to best fit your canvas’ design.

8. Paste the code into Showit and save it.

Select the placeholder box and go to the right panel in Showit. Under the ‘Embed Info’ tab, select the ‘Custom Code’ box. A pop-up will then appear and you will need to paste the Javascript code from your Interact Quiz into this pop-up. Select Save, and your quiz will upload onto your website.

Of course, I encourage you to preview your website with the Quiz to make sure everything is functioning properly, and then hit the ‘Publish’ button and start sharing your Quiz with your website viewers!

How to Make your Quiz’s Canvas act as a pop-up.

Sometimes it’s necessary to have your quiz hidden until a user is ready to take the quiz. Doing this can help with page clutter and provide a more streamlined, clean design to your website’s page. And in this case, you will need to create a button that directs to your quiz and have your Quiz act as a pop-up. Follow these steps to create a pop-up for your Quiz.

1. Create your Canvas.

Follow the above directions, and create a canvas with your Quiz that will act as your pop-up. I have created my canvas to be located at the very bottom of the page so it doesn’t distract me while I view or design the page. While designing, don’t forget to create some type of “close” option so users can exit out of the pop-up (I typically use the X icon from Showit). Once you have finished creating this canvas, you want to set the “close” click action. You do this by selecting the “close” element and going to your right panel. Under the ‘Click Actions’ tab, select the ‘+’ icon. Then make sure the following functions are Type: Hide Canvas and Canvas: This Canvas.

While designing, don’t forget to create some type of “close” option so users can exit out of the pop-up (I typically use the X icon from Showit). Once you have finished creating this canvas, you want to set the “close” click action. You do this by selecting the “close” element (i.e. X icon) and going to your right panel. Under the ‘Click Actions’ tab, select the ‘+’ icon. Then make sure the following functions are Type: Hide Canvas and Canvas: This Canvas.

2. Hide your Canvas.

Next, make sure this canvas is selected and head over to your right panel again. Under the ‘Canvas’ tab, make sure the ‘Hidden To Start’ box is checked. Doing this will hide your canvas until it has been triggered to pop-up.

3. Create a button.

You will want to create some kind of link option that will direct viewers to your Interact Quiz. I have personally created a button with text and an arrow icon, but you could use just text or a photo. Just make it clear that the element(s) can be selected, and that it will lead them to your quiz. To better understand, I have done this to my own website, as seen here.

4. Set your button’s click actions.

Once your button or photo has been created, you want to set its click action. You can do this by selecting the element(s) (i.e. text/button background/etc.) and go to the right panel. Under the ‘Click Actions’ tab, select the ‘+’ icon, and make sure the following functions are Type: Show Canvas and Canvas: [Your Quiz’s Canvas Name].

And that’s it…everything is set for your Quiz to act as a pop-up! Again, I encourage you to preview your site to make sure all of the functions are working correctly. But once everything is perfect, hit publish on your website and start sharing your Quiz!

For further details or troubleshooting about pop-ups, refer to this helpful Showit Tutorial.

Do you have a Interact Quiz hosted on your website? Please paste the link below so I can see your quiz in action on your website and participate in the fun!

I’d love for you to take one of my Interact Quizzes and tell me what you learned from them!