We’re big fans of Squarespace – they’ve created easy to use tools to build beautiful websites in just minutes, even if you don’t know how to code. But the as with all visual site builders, it poses some challenges when embedding third party code – such as using embed code for a Riddle.

The good news is you will only need to make a small change to the code before you paste it into the code box on Squarespace.

Just follow these steps and your Riddle will look great on Squarespace:

Squarespace - add code block

To add a Riddle to your Squarespace page, first add a Code Block to your design.

Squarespace - add embed code with small change

Now comes the most important step.

Copy the standard embed code from the Riddle publish dialogue and paste it into the code block.

Then add the highlighted text as shown in the image to the left.

The text to add is: data-auto-scroll=”false”

This little change is all it takes to make sure Squarespace plays nicely with the Riddle embed code.

(The technical back story? Normally, our Riddles just scroll inside their little frame so that, after answering a question, the reader is taken to the top of the next one. We put this in for a better user experience – so that your users don’t have to scroll up to the top if you have a lot of answer options.)

However, Squarespace has trouble with this part of our embed code. Without this change, the screen jumps up and down a tiny little bit between the questions. It’s not a deal breaker but annoying enough that we wanted to show you this little workaround.

Squarespace - Riddle preview in edit mode

After you added the code block, you will see a visual representation of the Riddle in your site. Squarespace will give you an option to enter safe mode to preview the full Riddle.

We don’t think this will work though. The only way to see the Riddle in action is to preview the entire site as a visitor. But it’s easy enough to make any changes, then push them live again.

(Please note – this preview limitation might be due to me using a free Squarespace trial instead of a paid account.)

Squarespace - Riddle live preview

Preview your site as a visitor to see the Riddle in action.

It works great and with our little fix in the embed code – it will be a smooth experience for all of your users.

Whew! That’s all there is to it – we hope you enjoy your new Riddle-enriched Squarespace site.

If you have any questions about how to get this fix to work, please just drop us a line at hello@riddle.com.