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
|
1 2 |
<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
|
1 2 |
<amp-riddle-quiz layout="responsive" width="600" height="400" data-riddle-id="140298"> </amp-riddle-quiz> |
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):
- 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:
Here’s a live example on our sample site Pastafun: http://pastafun.com/riddle-for-amp/amp/
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.