> ## Knowledge Base Index
> Fetch the complete knowledge base index at: https://docs.simplebooklet.com/sitemap.xml
> Use this file to discover available pages before exploring further.
> Pure-Markdown content can be obtained by appending a '.md' suffix to the content URLs listed in the sitemap (without the trailing slash).

# Embed your Simplebooklet on a Webpage

# **Embed your Simplebooklet on a Webpage**

Easily display your Simplebooklet directly on your website or blog using an embed code. This keeps your audience on your site while they interact with your content — no extra tabs or redirects required.

|| Available on all plans.

## **How to Embed your Simplebooklet**

1. Open your **Dashboard** and select the Simplebooklet you want to embed.

2. Click the **Share** button.

![](https://storage.crisp.chat/users/helpdesk/website/-/b/a/9/a/ba9a701c45868800/share-button-crisp_1joyla4.png =906xauto)

3. Scroll down to **Embed on a Webpage** under the **Publish** section.

4. Click **Code** to open the Embed Code pop-up.

![](https://storage.crisp.chat/users/helpdesk/website/-/b/a/9/a/ba9a701c45868800/framegenericlight-2025-11-05t1_1n8nftp.png =451xauto)


## **Choose Your Display Settings**

### **Size Options**

From the **Size** dropdown menu, choose how your Simplebooklet will appear:

![](https://storage.crisp.chat/users/helpdesk/website/-/b/a/9/a/ba9a701c45868800/framegenericlight-2025-11-05t1_ws5l24.png =864xauto)

* **Original Size** – Keeps your booklet’s native dimensions.

* **Dynamic Fit** – Automatically fills the container it’s placed in.

* **Custom Width** – Set a specific width. The height will adjust automatically to maintain aspect ratio.

You can also manually edit the width and height values directly inside the embed code if needed.


### **Navigation Options**

Under **Navigation Options**, choose how the navbar will appear:

* **Candy Bar** – Displays a clean bottom navigation bar.

* **Minimalist** – Displays a compact bottom navigation button.

* **Disable Footer Navigation** – Removes the navigation bar entirely.

You can also customize navigation styles anytime under the **Design → Nav Layout** tab.


## **Add the Embed Code to Your Website**

1. Click **Copy** to copy the embed code.

2. Open your website editor.

3. Paste the code into an **Embed**, **HTML**, or **Custom Code** block.

For example:

* **Wix, Squarespace, WordPress** → Use an Embed or HTML block.

* **Blog platforms** → Switch to HTML view and paste the code.

4. Save and publish your page.

Your Simplebooklet will now appear as a fully interactive embed on your website.


## **Good to Know**

* Your website must support **iframes** for embeds to work.

* The embedded Simplebooklet has a **transparent background** by default, allowing it to blend seamlessly with your website design.

* Your analytics, updates, and link tracking remain tied to the original Simplebooklet.


## **How This Supports the Reader’s Journey**

Embedding your Simplebooklet strengthens the Attention and Immersion stages of the Reader’s Journey by allowing readers to explore your content without leaving your site. It reduces friction, improves professionalism, and keeps engagement within your own ecosystem.