How to Embed Interact Quiz in Squarespace

Heads up! This post contains affiliate links which means I may earn a small commission if you purchase using my link. This comes at no additional cost to you. My chips and salsa fund thanks you from the bottom of my heart… err, stomach?

When it comes to growing your online business your email marketing list is one of the best assets you can possibly have. But to grow an engaged list, you need an equally engaging and enticing lead magnet, or a gift, or an ethical bribe as it's called now.

Being in an online business space for 10 years I have found that one of the most effective ways to build your email list is to use a quiz. Quizzes can reveal a lot about your ideal audience; and they can also help point your audience and your subscribers to the right offers in your business, which increases the likelihood of them converting from leads and subscribers into paid clients and customers.

When it comes to building your online quiz, Interact is one of my favorite, absolute favorite tools, to build a fun and engaging quiz. So in today's video, I wanted to show you how you can embed the Interact quiz or a quiz built with Interact into your Squarespace website.

If you're new around here my name is Ana Lea and I'm all about simplifying the tech in your online business helping you create a website that converts as well as content that attracts and converts your ideal audience.

If that's something you're interested in, definitely hit that subscribe button so that you can get notified about each and every new video that I post; and with that said let's dive into the tutorial.

How to Embed Interact Quiz Into Squarespace

Okay, so I'm here in my Interact dashboard, and as you can see I have a quiz that I've created. And now I want to grab the code that I need to embed it into my Squarespace website. So obviously, you're going to need a page on your website where the quiz is going to go.

But before we do that, we are going to click on share and embed and then you have several options. First of all, you have the share link which is great if you want to embed your quiz anywhere on your website.

For example, just link it with a button or a text link; and I'll show you this option after I've shown you how to actually add the quiz itself. So we have that option.

So after the share link, then we have the embed code. This is basically the code that we want to use to embed on a page on our website. And for this option you want to select the JavaScript option, and then there are several options that you can configure here. 

So first of all, you have  the option to auto resize the embed to fit the quiz content; and for that you must use the JavaScript embed. So this is what we are going to use, and basically that will make the quiz just respond to the quiz content itself. 

You can also set a custom embed size if you want. You can decide to open the quiz in a new tab on mobile devices, and you can disable the cover page on the quiz. When disabled, the quiz will begin on the first question, and they will no longer see the part that tells them what the quiz is about and has the button “take the quiz.” 

So for this, what I am going to do is I'm going to toggle this on open quiz a new tab on mobile devices, and I'm also going to disable the cover page on the quiz, and then I'm going to copy the code, and then I'm going to go to the page that I've already made on my website for the quiz.

Then, I'm going to add a code block to the page where I want to embed the quiz and delete the default text block because we don’t need it. 

In the code block, I'm going to click the pencil icon to edit it, and delete the dummy text. I’ll add a div that is center aligned, to make sure that the quiz itself is displaying in the center of the page and paste the code that Interact gives me. I’ll save the page and if you’ve followed these steps, you’ll be able to see the quiz embedded on your site.

So now, let’s explore other options.

Adding Interact Quiz With An Announcement Bar

The first thing you need to do is make sure that your quiz is activated, and then there are several options here that you can configure. 

You can configure the background color of the tab, the text on the announcement bar, the button color itself, and whether you want to trigger the quiz in a pop-up or open the quiz in a new tab. Then you can set the position, whether it should push the web page content down, or if it should have fixed positioning. 

Then you can also preview the announcement bar, and if you toggle this  little box on, then this will only show the pop-up when a visitor is on certain pages. So for example, if you have products to sell you could set this to appear only on your products pages and have a quiz “which t-shirt matches your personal style”, or something like that.

Then you can set the rules on which pages the quiz should show up. So I'm going to uncheck this, and then let's see how we can show it as an announcement bar. I have also set it up here, so that it appears in a new browser tab that takes us to the page where we have the quiz itself embedded. 

So I'm going to copy this code and then I'm going to go into Settings -> Advanced -> Code injection, and then I'm going to paste it into the header code. Keep in mind that you need to be on a Business or Commerce plan to use the code injection feature. So I'm going to click save, and as soon as the page refreshes; you can see that the announcement bar appears; and if they click the button, they are taken to the page where we have the quiz.

Displaying Interact Quiz As A Popup In Squarespace

Similarly we have the pop-up option, which again; you need to make sure that the quiz is active, and then you can customize how the pop-up looks, then you will have to copy this code and basically add it in the code injection injection section. 

So instead of this announcement bar, we can set up the pop-up; and once we refresh the page, as you can see the quiz now pops up as a pop-up on our website.

So those are the options that you have for embedding the Interact quiz on your Squarespace website. 

Using The Share Link Option To Integrate Interact And Squarespace

Another option, as I've mentioned before, is you can share this link. This is useful if you want to share the quiz with a button. 

So let's say that we want to add it to an about page. So I'm here on an about page, that obviously needs to be built out but; I just want to show you quickly how you can add it with the text link. So I'm going to add a blank section and we're going to say take my awesome quiz, and then we are going to turn that into a link. 

Now you have two options here, if you've already embedded the quiz on your website with the embed method that I showed you earlier, where you embed it on a page; then for the link all you really have to do is just link to that page. 

So all I really have to do is start typing… forward slash and then the name of the page, and then link to that page and click apply. 

But if you want to link straight to the Interact’s page, you can copy this link, and then you create a link on your page and you paste that link in, click apply and then click save. 

Once somebody clicks that link, they will be taken to the page on Interact, where they can take the quiz. 

So it is up to you which method you want to use. Personally I would keep them on my website, but if for whatever reason you just want to link to their page this is how you would do it with the text based link. 

You can achieve a similar functionality by using a button. So you'd click on add a button, and for text you can say take my awesome quiz; and then under link, click the cogwheel icon -> click on web address and paste that link in, set it to open up in a new window and then click save -> click done, save your changes; and again once they click that, they will be taken straight to the Interact website to take the quiz.

So that is another option that you have for adding the Interact quiz to your website. 

That's it, that is how you can embed a quiz that you've created with Interact into your own Squarespace website. 

Final Thoughts

As you can see, embedding your Interact quiz into Squarespace is super simple and you have several options to choose from. If you’re wanting to create a quiz for your business, I highly recommend Interact so be sure to check them out.

Read these too: