How to use the custom offset

We’ve added our ‘custom offset’ feature, so your quiz always displays perfectly to every user.

These days, many websites have a ‘sticky’ or always visible top menu bar – that is present no matter how far down the page you scroll.

This can cause issues with embedding a quiz – because your site’s header bar will overlap the quiz, and your audience will have to scroll down after each questions.

But fear not – there’s an easy fix.

We added a ‘custom offset’ feature for just this situation.

Simply enter the height of your site’s menu bar in pixels – and your quiz will be pushed down that amount, so it will always appear below it.

Take a look at this Dr. Who example from Penguin Random House – the quiz sits below their menu bar. (They could actually optimize this by increasing the offset by another 10 pexels or so.)

No muss, no fuss.

Offset your quiz

• Measure height of your menu bar in pixels (Chrome has some free extensions like this one.)
• Enter that number in the custom offset field in Riddle
• Copy code and reembed (Riddles normally update automatically – but this feature will change your original embed settings, so you need to paste it again.)

Other embed and sharing options

Don’t forget to check out and try our other ’embed’ options.

• Click on the ‘publish’ step
• Then ’embed’

Beyond our custom offset, you’ll find great quiz publish features like:

• Lazy loading of images – to make your quizzes load faster
• Custom quiz width – want your Riddle quiz to be full screen? Adjust the width – like this Choice Hotels personality test using 1200px wide embed codes.
• Disable autoscroll – to prevent unnecessary ‘jumps’ to the top of each quiz after each question

Any questions? Just ask us!

That’s just scratching the surface. If you have any questions about our custom offset, or anything quiz-related, just ask us on support chat.

We’re big quiz geeks – and love to help out!