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.
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.
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!
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.
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.
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!
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!
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: