How to Create a Squarespace Website Quiz using Interact

About this Squarespace video tutorial

Email signups aren't working anymore, and we need new lead generation that doesn't clog up our customers' inboxes. Through Interact, I've built out a Squarespace Website Quiz that sends my site's visitors to the right services for their needs without the clutter and unnecessary promotions.

Timestamps

0:00 - Intro
0:45 - Building the Quiz
12:23 - Putting the Quiz on Your Squarespace Site

---

Want 20% off your new Squarespace subscription?

Subscribe to the Designing the Row® email list and get the exclusive code sent straight to your inbox. You’ll get email updates when new Squarespace tutorials are published, but you can unsubscribe at any time.

Unlock the code

Built with ConvertKit

---

How To Begin Creating Your Website Quiz

To begin, go to tryinteract.com and create an account if you don’t have one already. You can start for free to try it out. Once your account has been set up you’ll be brought to the dashboard.

Today I’ll go through how I built the interactive quiz that’s on the bottom of my website homepage right now and why I chose the decisions I did in making the quiz.

Building The Quiz

In the dashboard, click Create New Quiz, and from the start you have three options

• Start from Scratch

• Generate with AI

• Clone a Template

Pick Start from scratch as the whole point is to use Interact as a lead generator and right now leading with your own business expertise is the right move. You’ll see a question for the type of quiz you’d like to create with the following options

• Assessment

• Personality

• Scored

Today we’re doing a Personality type quiz.

What comes up first is the cover page, which I’m not going to put a great deal of thought into because I don’t care for them and will be bypassing it.

What you can do here is select your quiz colors, fonts, import your logo, and other important branding information and test the results against the cover page to make sure you like how it all looks.

Then skip “questions” for a bit and go towards “results” on the left hand side of the quiz builder. With personality type quizzes, having the results ready to go is very helpful when building the questions to reduce backtracking and unnecessary back-and-forth. Once you’ve decided what results to give people (and what service pages to send them to with those results), put the proper links in these pages and you’re good to go!

Now go to questions where you can place all the answers towards a specific result. Once you’ve written them, click on Edit Result Correlations and you can add the proper correlations which can involve multiple results.

Note about questions: I recommend using an odd number of questions just in case a user answers perfectly half and half between two results: giving them an easy answer to be funneled to is a big part of what’s working about these quizzes.

Click on lead generation and click the forms you want from prospective clients that fill out your quiz. I usually just use email address and first name, and you can customize your lead generation page or even toggle on a button to skip the lead generation forms being necessary to see results.

Once that’s done you can connect whatever accounts you hold your email lists in (I use Kit) and build out a small automation to add the information into the right place in your email lists.

Note: these surveys also have social share settings where the results can go to places like Facebook, LinkedIn, and X/Twitter. I don’t use this feature but depending on the type of survey you’re building it might be useful for your brand.

Once you’ve gone through all these steps, hit publish in the top-right corner of the page and get the quiz live!

Putting the Quiz on Your Squarespace Site

Once the quiz is published, click on ‘embed code’ and go to the iFrame code that should automatically be pulled up. Below it, under Embed Options, you’ll see a toggle to Disable Cover Page on Quiz. Click that to get the no-cover page look I use. Copy the code and simply add a Code Block onto your Squarespace site in the editor, click on the pencil to edit the block, and paste in the iFrame code!

Note: when I put these quizzes in, I add the code “<div align=“center”></div>” and paste the iFrame code in between the div brackets to make the quiz show up in the center of the content block how I like it.

This tutorial is part of a weekly series I’ve started at Designing The Row called Weekly Websites where I discuss how I’ve been updating this very website with the tools I’ve learned from my experience as a Squarespace designer. Check out the first post about common website content mistakes which is live now!

---

The latest Designing the Row tutorials…

---