Embed advanced

Fine-tune how your embedded Riddle behaves — control dimensions, scrolling behavior, lazy loading, and SEO indexing. These settings are useful when the default embed does not fit your page layout or you need to optimize page load performance.

  1. Go to the Publish section and click on Embed / Landing page.
    go to embed section
  2. Click on ADVANCED.
    go to embed advanced
  3. Enable Boost your SEO / Google ranking to include all your Riddle's text content (questions, answers, explanations) directly in the embed code as crawlable HTML.
    boost seo
    This makes your Riddle content indexable by search engines. Recommended for content-heavy quizzes on blog posts or landing pages where organic traffic matters.
  4. Enable Auto scroll to change the display of your Riddle.
    set up auto-scroll and sticky header
    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.
  5. Change the Max. width if you want to make your Riddle wider or narrower on the site where it is embedded.
    max width
    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.
    Please note: Resizing only works with JavaScript and CSS enabled.
  6. 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.
    set fixed height
  7. Enable Lazy load images to load images only when they are about to be displayed. Recommended for image-heavy Riddles (10+ images) to reduce initial load time.
    lazy load images
    When disabled, all images are loaded upfront before your audience can start — this ensures instant display but increases initial page weight.
  8. Enable Lazy load Riddle to only load the Riddle iframe when it scrolls into your audience's viewport. Recommended when the Riddle is placed further down on the page.
    lazy load Riddle
    When disabled, the Riddle loads immediately with the page — use this if the Riddle is above the fold or is the primary content.
  9. Enable No JavaScript to removed JavaScript from our embed code.
    no javascript
    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 disable CSS being embedded.
  10. Click on COPY and re-embed your Riddle.
    copy embed code again
    Riddles normally update automatically but this feature will change your original embed settings so you need to paste it again.