Articles on: Share

Why can’t visitors scroll past my embedded Simplebooklet?

If visitors can't scroll your web page when their cursor is over an embedded Simplebooklet, you can fix it by wrapping your embed code in a short script. The script lets the page scroll normally until a visitor clicks the Simplebooklet to read it, so your embedded document doesn't get in the way of the rest of your page.

Embedding is available on all paid plans: Basic, Pro, Business and Enterprise.

Why does this happen?

An embedded Simplebooklet sits in an iframe, which works like a window on your page. When a visitor's cursor is inside it, the iframe takes over scrolling, and the page underneath stops scrolling until the cursor moves outside the booklet. This is how iframes work in every browser, so it can't be changed inside Simplebooklet.

How do I fix it with a script wrapper?

The script wrapper keeps the Simplebooklet inactive, so scrolling passes through to your page, until a visitor clicks on it. After that click, the Simplebooklet works as normal. Clicking anywhere outside it hands scrolling back to the page.

Get your embed URL:
1. On your Dashboard, click Share on your Simplebooklet.
2. Under Get it in front of readers, click Embed, then choose Code.
3. In the embed code, copy the web address inside src='...'. It starts with https://simplebooklet.com/embed.php.
Replace your current embed code on your website with the code below.
Replace YOUR-SIMPLEBOOKLET-EMBED-URL with the embed URL you copied.
Save your page and test it: scroll past the Simplebooklet, then click it and flip a page.

<div class="booklet-wrapper-page">
  <iframe src="YOUR-SIMPLEBOOKLET-EMBED-URL" width="100%" height="625" frameborder="0"></iframe>
</div>

<style>
  /* Allow scrolling over the embed by default */
  .booklet-wrapper-page iframe {
    pointer-events: none;
  }
  /* Enable interaction after the visitor clicks the booklet */
  .booklet-wrapper-page.active iframe {
    pointer-events: auto;
  }
</style>

<script>
  (function () {
    const wrapper = document.querySelector('.booklet-wrapper-page');
    if (!wrapper) return;
    document.addEventListener('click', function (e) {
      if (wrapper.contains(e.target)) {
        wrapper.classList.add('active');
      } else {
        wrapper.classList.remove('active');
      }
    });
  })();
</script>

To make your Simplebooklet taller or shorter on the page, change height="625" to the height you want, in pixels.

What if I can't add custom code to my website?

Some website builders, such as Wix, Squarespace and Elementor, don't let you add custom scripts. You have two options:

Add space around the embed. Leave at least 40px of margin below and beside your Simplebooklet, so visitors have room to move their cursor off it and scroll the page.
Link to your Simplebooklet instead. Add a button or link that opens your Simplebooklet in a new tab. This avoids the scrolling issue completely.

If you need help adding the script, contact your web developer.

Common questions

Will the script change how my Simplebooklet looks?

No. It only changes when the Simplebooklet responds to scrolling and clicks. It looks the same on your page.

Do visitors need to click before they can read my Simplebooklet?

They need to click once before they can flip pages or use its links. Until then, scrolling moves the page instead of the Simplebooklet.

Updated on: 09/10/2026

Was this article helpful?

Thank you!