Embed your Riddle quiz in Squarespace

Squarespace is one of the most popular website builders on the market today. The good news? It’s easy to embed your Riddle quiz or other formats in your Squarespace site – no coding required.

Let’s dive into and show how to do this.

The TL;DR version of this post?

Just make sure you turn on the ‘disable autoscroll’ in the ‘Publish’ step before you get your code.

Video tutorial: embedding your quiz on Squarespace

Embed your quiz in Squarespace – more info:

Squarespace is brilliant – they make it easy for non-coders and non-designers to make their own professional websites. However, any visual builder will create some challenges when it comes to embedding interactive content like a Riddle quiz iFrame.

Steps to embed your quiz:

1. Make a new Content Block on your Squarespace page, and select ‘Embed’ option.

2. Now click on the code symbol (<>) to open a spot where you can paste in your embed code.
3. (MOST IMPORTANT: Grabbing your quiz embed code) You’ll need to pop over to the ‘publish’ step in Riddle.
4. Turn ‘disable auto-scrolling’ on. (more info)
5. Select ‘Get code’ – and copy code.
6. Paste into your Content Block in your Squarespace page.

There you have it – that’s all you need to do, to get your Riddle quiz or other content to work seamlessly with your Squarespace site.

Why these steps?

Okay – let’s take a wee peak behind the scenes.

We designed Riddle quizzes to scroll inside the iFrame that’s embedded on any page. As a user scrolls down to view and select their answer, they’ll immediately get taken back up to the top for the next question.

Less scrolling, and a better user experience for folks – especially on smartphones.

Squarespace has a slight issue with that – they don’t like the ‘jump back to the top’ part of our embed code. If you use our code with no changes, the riddle jumps up and down a little bit – which is a bit irritating to your users.

Viewing your embedded Riddle quiz

Great – so now that you’ve added a quiz via your code block, you will be able to view a placeholder in your site.

Now, Squarespace gives you a chance to ‘safe preview’ your quiz. Don’t do that.

Alas, our little tweak to the code means that the best way to see your quiz in action is to take your quiz as a site visitor.

Any changes, you’ll just need to re-edit your Squarespace page and push things live again.

Wrapping things up

There you have it – all you need to do to embed your Riddle quiz on your Squarespace site.

Easy-peasy, right?

But please don’t hesitate to drop us a line if you have questions… you can get our cofounders or the rest of our team on support chat (we’re lightning fast to reply), or write a message at hello@riddle.com.