You can set up and control advanced settings for your Riddle embed.
- Go to the PUBLISH step and click on Embed / Showcase.
- Click on ADVANCED.
- Enable Boost your SEO / Google ranking to get more traffic to your site.
Your embed code will include all the text from your Riddle, including questions, answers, and explanations. This will be readable by Google and will help boost your site's SEO ranking.
- Enable Auto scroll to change the display of your Riddle. Riddles normally jump back to the top after each question. If this is not working for your website, you can try this option.
- Enable Use a 'sticky' header on your site if your Riddle appears under a header bar on your site. This ensures your Riddle is pushed down that amount so it will always appear below it and be fully visible to your audience.
- You can then enter a height into the Auto scroll offset field.
We recommend starting with 150px and adjusting as needed. Or you can also measure the height of your menu bar in pixels. Chrome has some free extensions like this one. Alternatively, start with 150px and adjust as needed.
- Change the Max. width if you want to make your Riddle wider or narrower on the site where it is embedded.
We recommend 640px.
Our standard embed code will resize automatically for smartphones and tablets. For example, if you set your max width to 1200px (almost full page), your Riddle will still resize automatically to smaller screens.
- Enable Set fixed height if you want to make your Riddle taller or shorter on the site where it is embedded. You can then enter an iframe height and select the unit from the dropdown menu.
- Enable Lazy load images to load images 'just in time' before they reach your audience.
When it is disabled, all your Riddle images are loaded before letting your audience start the Riddle.
- Enable Lazy load Riddle to only load your Riddle when it is actually visible to your audience (recommended). This speeds up your page's load times.
When it is disabled, the Riddle loads every time the page loads.
Riddle embed codes work in 99% of all web tools but this can help if you are still having issues. The downside is your Riddle will not resize automatically to smaller screens.
- Enter the height and select the unit from the dropdown menu.
- Enable No CSS to deactivate CSS being embedded.
- Click on COPY and re-embed your Riddle.
Riddles normally update automatically but this feature will change your original embed settings so you need to paste it again.