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.
If you don’t like written instructions, skip to the end of this post to watch our video help on how to add a Riddle quiz to a Squarespace site.
To add a Riddle to your Squarespace page, first add a new Content Block to your page. From the Content Block selection, choose the “Embed” option.
Next, instead of entering a URL click on the </> symbol to open a new window where you can paste the Riddle standard embed code.
Now comes the most important step.
Make sure to generate the embed code on Riddle with the option “Disable auto-scrolling” enabled.
Enabling this option prior to generating the embed code will add this little piece of code to the embed code: 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.
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.
Unfortunately, even the safe preview does not properly size the Riddle frame to show all the content. Just ignore that for now. 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.
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 firstname.lastname@example.org.