there is a story behind every book

Embedded excerpts using iframes

Because Jellybooks DISCOVERY is purely HTML and JS-based, it's perfectly possible for any site owner to embed any excerpt into any webpage they maintain, without any involvement with Jellybooks.

Basic example

Instructions

  1. Obtain the URL for your excerpt via the DISCOVERY Partner Portal, eg https://www.jellybooks.com/cloud_reader/excerpts/my-sister-the-serial-killer_9781786495976-ex/L3Leb.
  2. Decide on the width and height for the excerpt
  3. Use the following iframe HTML snippet: <iframe width="350" height="550" src="{EXCERPT_URL}" loading="lazy"></iframe>

Note that the content within the iframe is independent to the page hosting the iframe, therefore will not vary according to the size of the iframe.

Fill parent container

It's common for a webpage to already have an element that is sized to a pre-determined size. Rather than duplicating the values, you can specify the iframe to fill the parent container's width and height via the iframe attributes.

Fill parent container with CSS

It's common for a webpage to already have an element that is sized to a pre-determined size. Rather than duplicating the values, you can specify the iframe to fill the parent container's width and height.

Resizing to continuously fill container

In the above examples, although the iframe filled the container, the container was always a fixed size. If the container is more dynamic, e.g., varies according to browser window size, then the examples above will still fill the container as expected. This is demostrated in the following snippet:

However, it's not a pleasant user experience therefore we recommend trying to use fixed iframe sizes where possible.

Two-page spreads

The Jellybooks Cloud Reader will display two-page spreads if the screen is wide-enough.

Here's an example of a fixed-layout (FXL) book set with a fixed-sized iframe set at 900x600:

<iframe src="https://www.jellybooks.com/cloud_reader/excerpts/flora_9780241526712-ex/L3Leb" loading="lazy" width="900" height="600"></iframe>

Here's an example of a reflowable book set with a fixed-sized iframe set at 900x600: