Add a quiz to your Squarespace website in a few easy steps.

Need to create your own quiz for Squarespace? Interact integrates seamlessly with Squarespace and is a super easy-to-use quiz builder for generating leads and recommending products. Create a quiz for Squarespace now

Login to Squarespace and click on "Pages"

We recommend creating a new page for your quiz and naming it "Quiz" or in my case I'm naming it "Nutrition Quiz" since I'm creating a nutrition quiz. Choose "Blank Page"

Once the quiz page loads in, click "Edit" in the top left corner

Then click "Add Section" and choose "Add Blank +" on the option menu that comes up

You can then click the "+" sign within the section to add content

From the options menu that comes up, select "Embed"

In the dialogue box that comes up, click the </> icon, it will say "Embed Data" when you hover over it

Now go over to your interact dashboard and click "Share & Embed" on your quiz you want to add into your Squarespace page

In the box that comes up, click on "Embed Code" on the left sidebar, toggle on the 'Use custom embed size" and set the width to 1,500, then click "Copy Code" no need to edit any settings here.

Alternatively you can embed with Javascript, the benefit with Javascript is the quiz will auto-resize based on the height of a quiz question. Follow the same method except click the "Javascript" tab, you'll still want a custom size with width of 1,500.

Paste into the Squarespace code embed box

You can see below that I pasted in the iFrame code from Interact into the Squarespace code block html editor. If it was a success you’ll see the quiz preview pop up on the page in real time, if not then double check your code to make sure it pasted in correctly. Our Javascript code can work with Squarespace as long as your site does not utilize "ajax loading", this feature can conflict with Javascript content. More on that here: https://support.squarespace.com/hc/en-us/articles/115000253288-Ajax-loading. Something to note, when using Javascript embeds on Squarespace, a preview of the quiz will not be viewable in the editor (image of what this looks like below).

iFrame embed

Use iframe for quizzes that don't have a lot of change in height.

Javascript embed (Won't show preview)

Use Javascript if your quiz will fluctuate in height because the Javascript will auto-resize based on how tall each question is

Click "Edit Section" to open the options for how your quiz will show up

Then set the settings as follows. Section height is M, width is M, and alignment is centered

Note: If you don't see this option, you can add <center> before your embed code and </center> after it to center the quiz on the page.

Preview your quiz on mobile and desktop to make sure everything functions as desired. If you have questions while building your quiz we have support experts on our live chat and community to troubleshoot your Squarespace quiz setup

Create a popup promotion for your quiz, link to your quiz page

Need to create a quiz for your Squarespace site? Interact has you covered, with the easiest-to-use quiz builder fully compatible with Squarespace. Create a quiz with interact now