How to Embed your Interact Quiz Behind a Button on Squarespace

This post may contain affiliate links. We may receive a commission for purchases made through these links (at no cost to you, of course! 🙂)

Hey guys! Today I’m going to show you exactly how I embed my Interact quiz on my Squarespace website behind a button.

So when you click on the button it will instantly turn into the Interact quiz, you don’t have to navigate away to a different page.

I got this awesome design idea from Jenna Kutcher’s site!

And here’s a live example of how it would work:

If you’re not sure what Interact is, or if you’re looking for more general information on how you embed your Interact quiz into your Squarespace site, then make sure to check out the (very) full post and video I did on this topic that covers the basics of embedding your Interact quiz on your Squarespace site.

This post is specifically about creating a quiz that shows instantly after the button is clicked.

This guide is for Squarespace, but because it’s custom coded you could probably do it in most website builders! 

So, yes, it’s custom coded and it’s not the most simple piece of copy and paste code, so if you have no coding experience I’ll do my best to explain, but if it’s too much for you, I would probably just recommend using this similar style but just adding a regular button instead, and linking out to your quiz in a new window with the basic Interact share link, instead of coding it to be embedded into one page. It has a really similar effect and it’s much easier. You can check out the full tutorial for that in the previous post!

But if you’re up for the challenge, then let’s dive in!

---

You will need 3 sets of code:

1. Your embed code

2. Your button code and script

3. Custom CSS for the button style

---

Embed Code

This code will have your Interact Quiz embed code inside of it. Paste that where it says PUT YOUR QUIZ SCRIPT HERE

<div id="QuizDiv"style="display:none;">
PUT YOUR QUIZ SCRIPT HERE
</div>

• You can find your Quiz embed code on your Interact dashboard. If you’re not sure where to find that, or what settings or code to use, see this post.

• Make sure to not alter any other parts of the code.

• Head to your Squarespace site and click the + icon where you want your quiz to go, and add a Code Block

• Paste in your full code, it should look something like this:

• Click away from the code block and save your page changes

Button Code and Script

This code is for your button and the script to make the code work. You’ll want to replace the text “Take the quiz now!” with whatever text you want on your button. Be careful not to change anything else!

<input type="button" id="quiz-button" value="Take the quiz now!" onclick="showDiv()"/>

<script>
function showDiv() {
document.getElementById('QuizDiv').style.display = "block";                  
document.getElementById('quiz-button').style.display = "none";}
</script>

• Update your button text

• Make sure to not alter any other parts of the code.

• Head to your Squarespace site and click the + icon where you want your button to go, and add a Code Block

• Paste in your full code, it should look something like this:

• Click away from the code block and save your page changes

Now the button and quiz should be working!

Please note that you can actually combine your Embed code and Button code and Script all into one code block. I’ve presented it in two separate code blocks to keep things more organized but if you’re confident to combine it all into one, you might find that works with your design better.

---

Custom CSS for the Button

The last part is to add CSS for your button. In this code you can change the colors and fonts to make the button match the website better.

#quiz-button {
background-color: #000;
color: #fff;
padding: 20px 20px;
width: 100%;
text-transform: uppercase;
border: 0px;
letter-spacing: 1px;
}

• Copy the full code above

• Go to Design > Custom CSS

• Paste the code into your CSS editor (if you have other CSS in there just paste it after)

• You’ll see instantly that this updates your button style

• From here you can adjust all of the settings in bold and customize your button however you like!
  

Ok! That’s how to embed an Interact quiz behind a button in Squarespace! I hope that was helpful and not too complicated. You can take these codes and customize them however you like to make them work for your website!

If you liked this post, Pin it to Pinterest! 👇🏻