> ## 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).

# Add Custom Code

# Add Custom Code

Adding custom code to your Simplebooklet allows you to integrate third-party widgets, embedded forms, or other interactive elements that enhance the functionality of your booklet. Follow the steps below to add and customize code within your Simplebooklet.

|| Available on all plans.

### How to Add Custom Code

1. Open your **Dashboard** and scroll to the Simplebooklet where you want to add custom code.

2. Click the **Edit** tab.

![](https://storage.crisp.chat/users/helpdesk/website/-/b/a/9/a/ba9a701c45868800/edit-tab-dashboard-crisp_yodfgk.png)

3. Select the page where you want to add the custom code.

4. In the left-hand toolbar, click the **Code** button.

![](https://storage.crisp.chat/users/helpdesk/website/-/b/a/9/a/ba9a701c45868800/framegenericlight-2025-05-16t1_yplsj0.png)

5. From the menu that appears, click **Embed / iFrame Code**.

![](https://storage.crisp.chat/users/helpdesk/website/-/b/a/9/a/ba9a701c45868800/framegenericlight-2025-05-16t1_1fq98nc.png)

6. Paste your custom code into the provided text box.

![](https://storage.crisp.chat/users/helpdesk/website/-/b/a/9/a/ba9a701c45868800/framegenericlight-2025-05-16t1_1a5srnx.png)

7. Once you’ve entered the code, click **Save** to add it to your booklet.

![](https://storage.crisp.chat/users/helpdesk/website/-/b/a/9/a/ba9a701c45868800/save-crisp_yqnjia.png)

9. To adjust the placement of the embedded code, click on the element and use the Element Editor to resize and reposition it as needed.

![](https://storage.crisp.chat/users/helpdesk/website/-/b/a/9/a/ba9a701c45868800/framegenericlight-2025-05-16t1_rcu3ba.png)

10. Preview your booklet to ensure that everything works as expected.

![](https://storage.crisp.chat/users/helpdesk/website/-/b/a/9/a/ba9a701c45868800/preview-eye-button_crh8q1.png)

11. Your custom code is now successfully embedded and ready to be interacted with!