1. Creators
  2. Publish
  3. AMP Support

AMP Support

Riddle supports Accelerated Mobile Pages (AMP).

Want to embed your Riddle quiz into an AMP page? You’ll just need to copy 2 pieces of code into your page.

1) Add the Riddle AMP Script to the <head> section of your page

<script async custom-element="amp-riddle-quiz" src="https://cdn.ampproject.org/v0/amp-riddle-quiz-0.1.js">
</script>

2) Put the <amp-riddle-quiz> tag in the body of your page where you want to display the Riddle

<amp-riddle-quiz layout="responsive" width="600" height="400" data-riddle-id="140298">
</amp-riddle-quiz>

Please note that our AMP embed code needs you to set the height manually. Just enter the desired height into the code where it says height=”400″ in our example above. It might take a bit of trial and error to find the correct height, as that depends on the lengths of the questions and the size of your images in your Riddle.

3) Change the Riddle ID (140298 in the example above) to the ID of the Riddle you want to display.

To find your Riddle ID to to the “My Riddles” screen and click on the Riddle you want to use. The Riddle will open in a new window. In the URL of that new window you will see a URL like this:

https://www.riddle.com/showcase/140298/personality

Just copy the number right after /showcase/ – that is your Riddle ID (in our example – it’s 140298).

Using AMP with WordPress

Planning to put an AMP-enabled Riddle into your WordPress blog?

You’ll need to install an AMP Plugin first and configure it to serve the header script.

We recommend to install AMP for WP from Ahmed and Mohammed Kaludi. [While there is an official AMP plugin from Automattic (the company behind WordPress), the plugin lacks the ability to add a header script for AMP pages – which makes it completely unusable for Riddle.]

  • After installing the AMP plugin, follow the instructions and run through the installation wizzard.
  • Then go to the plugin settings -> Advanced Settings
  • Copy the script from 1) above into the head section (see screenshot):

AMP Settings for Riddle in Worpdress

  • Next go to a post or page where you want to add content for AMP.
  • Start the AMP Builder and scroll down to enable the Custom AMP Editor.
  • Paste the Riddle code as outlined above into the custom AMP editor – but make sure to use “Text” mode and not the “Visual” editor.
  • See screenshot below for an example:

AMP Editor for Riddle Quiz

Here’s a live example on our sample site Pastafun: http://pastafun.com/riddle-for-amp/amp/

Live AMP Example

And of course – if we can help with any AMP questions, just give us a shout at hello@riddle.com or on Riddle’s support chat.

******

Not a Riddle user yet? Try a free trial – no card needed.

Want to create your own quiz? Check out Riddle's quiz maker. | Or visit our blog for the latest quiz tips and best practices. | Imprint
Revoke consent