> ## 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 a Code Hotspot

# Add a Code Hotspot to your Simplebooklet

Adding a code hotspot to your Simplebooklet allows you to link to a custom embed or iframe code from any web service. This feature is perfect for integrating third-party tools, surveys, widgets, or other custom content into your booklet. Follow these steps to set up your code hotspot.

|| Available on all plans.

### How to Add a Code Hotspot to your Simplebooklet

1. Open your **Dashboard** and scroll to the Simplebooklet you want to add a link hotspot to.

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 hotspot.

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

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

5. From the drop-down menu, select **Code**.

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

6. Paste your embed or iframe code into the provided box.

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

7. Once you've pasted your code, click the **Save** button. Your hotspot will now be added to the page.

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

8. Click on the hotspot to resize and reposition it using the **Element Editor**.

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

| In the Edit Tab, your hotspot will appear with orange outlines and icons. However, once you preview your booklet or share it, viewers will not see these orange outlines or icons. The hotspot will still be interactive, but the visual indicators will be hidden. These hotspots will briefly flash when the page is first opened to help viewers identify them as clickable, but the outlines will not remain visible. To make the clickable areas more obvious, consider adding an icon or website text below your hotspot to signal to users that it's a clickable link.

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

10. Your code hotspot is now added and ready to be interacted with!

| If you want to change any settings for your hotspot later, just click on the small orange box to the left of the hotspot. This will allow you to access the settings and make any necessary adjustments