How to Embed an Interactive Quiz in Your Showit Site

February 9, 2018

Just a few weeks ago, I added two fun, interactive quizzes to my website designed to help creatives dig deeper into their strengths as designers and discover the next 5 steps to propel their brands forward, no matter what season of business they’re in! These quizzes have already been such a great way to provide more value to my community, and they’re a thoughtful, fun way to invite website visitors to engage with the content on my site. And even better — they’re a cinch to design and embed on your website.

Today, I’m walking you through just how I designed these interactive quizzes and how I embedded them to my Showit 5 website. If you’re a Showit user who’s been thinking of adding an engaging detail like this to your site, then keep on scrolling for the full run down (plus screenshots!).

Although there are several options out there for creating an interactive quiz or poll, I went with Interact. They make it incredibly easy to set up a quiz as you can choose from dozens on pre-made templates. If you find one that fits your needs, all you have to do is customize the style and content! You can try it out for free or you can opt for a paid plan for more robust integration features.

Once you find a quiz template that fits your vision, you’ll be able to name it and start customizing things. I started by formatting the style guidelines I wanted this to follow so I could then focus exclusively on the content itself. Interact has an easy-to-navigate dashboard that keeps all the tools at your fingertips. From styling options to your quiz content to your integration options to connect your quiz to your email marketing platform, everything you’ll need is just a click away.

How to add a custom quiz to your Showit 5 website | b is for bonnie design

Styling your quiz takes less than three minutes as you can easily choose the colors you’ll use for the background, titles, quiz questions, buttons, and more. I knew I wanted this quiz to blend into a muted pink background on my website so I went with a color palette that complements that aesthetic and works well with my existing branding.

How to add a custom quiz to your Showit 5 website | b is for bonnie design

From there, you can click over to the Content tab to start adding in your questions, response options, and result details. Honestly, the most time consuming part of creating a quiz like this is creating the content you want to share! I spend a decent amount of time choosing my prompts, creating questions, pairing responses to different results in ways that make sense. And then I had to get all of that tied into an email sequence in Convertkit that continues to educate quiz participants as they receive their results!

How to add a custom quiz to your Showit 5 website | b is for bonnie design

My favorite feature about these Interact quizzes is that you’re able to hook them up to a third-party app, like your email marketing platform. For me, this was a great way to stay in touch with those who take my quizzes and it allows me to share even more information through a tailor-made email sequence that helps them understand their results and see how to implement them within their business.

In the Interact dashboard, you can create an opt-in form, choose what details you want to capture from quiz takers, match up your quiz responses to the proper email sequence, and even give it a test to see how things are working.

How to add a custom quiz to your Showit 5 website | b is for bonnie design

Once you’ve got your quiz styled, all content loaded, and any third-party integrations hooked up, then it’s time to get your quiz added to your Showit site! You’ll first want to “publish” your quiz in Interact. From there, you can click the Share & Embed button at the top of the dashboard. You can choose from a variety of ways to add a quiz to your site from a banner at the top of your site to a custom embed code. If we’re adding a quiz to your Showit site, then we’ll want to grab the custom embed code!

You have options to customize your embed code once you click on that option like the dimensions you’d like your quiz to be or if you’d like to enable or disable the cover page on your quiz. Once you’ve customized your embedding options to your fancy, copy the code generated and hop over to your Showit account.

How to add a custom quiz to your Showit 5 website | b is for bonnie design

Personally, I chose to create a static page on my Showit site for each quiz to live but you could easily embed your quiz on any page of your site. Wherever you choose to add your quiz, you’ll want to click on the small rectangle icon in the center of the bottom toolbar in the Showit app. From there, click on the Embed Code option from the list of options that pops up.

A dark grey rectangle will appear in the canvas you’re working in. From there, scroll over to the toolbar on the right of your screen and click the Embed Info tab. On the Custom Code box, click to open an empty pop up area where you can paste your embed code from Interact directly. After hitting Save, your quiz should appear in all its glory!

How to add a custom quiz to your Showit 5 website | b is for bonnie design

Depending on how you want your quiz to display, you can create a separate canvas view to serve as a branded cover page for your quiz, like I did in the shot below. You may want to play around with the sizing or the mobile view of the quiz just to make sure everything is displaying as it should, but most likely you’ll be ready to hit “Publish” in Showit to share this new addition with your audience!

How to add a custom quiz to your Showit 5 website | b is for bonnie design

Well, there you have it, friend. That’s exactly how I added two custom quizzes to my website using Interact and Showit!

And if you’re interested in checking out a quiz in action, be sure to click below to explore the final product:

Brand designers — what’s your biggest strength as a designer?

Boss ladies — take the Brand Clarity Quiz to discover the next 5 steps to propel your brand forward!

  1. Thanks for sharing these steps Bonnie! I’m hoping to configure some sort of survey for interior design clients and this is a good first step! Xoxo

Leave a Reply

Your email address will not be published. Required fields are marked *

My name is Bonnie – I’m a brand designer, strategist, and writer which all adds up to one eclectic conglomeration of qualities that enables me to serve you well! Past clients have dubbed me "the Joanna Gaines of brand design," and I've had more than a few call me a dream maker, a game changer, and a design wizard (my Harry Potter-loving heart didn't hate that one, let me tell you!). At the end of the day, I'm a big-hearted creative who will get teary-eyed as you share the heart behind your business; who will lose sleep over the perfect font pairings and color selections to bring your brand to life visually; and who will work tirelessly to empower, encourage, and equip you to share your work with the world intentionally. 

hi friend!

meet bonnie

create your dream brand

THROUGH MY FREE, 5-DAY EMAIL CHALLENGE

yes! send me the guide >

GET THE FREE 5-DAY CHALLENGE DELIVERED STRAIGHT TO YOUR INBOX AND START LEARNING TO LAY THE FOUNDATION FOR YOUR DREAM BRAND, ONE THAT INSPIRES AUTHENTIC CONNECTION WITH YOUR IDEAL CLIENTS AND TELLS YOUR STORY WELL!