> For the complete documentation index, see [llms.txt](https://docs.dynamicmockups.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.dynamicmockups.com/mockup-editor-sdk/embed-in-bubble.io.md).

# Embed in bubble.io

Detailed step-by-step guide is as follows.

### 1. Add an HTML element to your page wherever you want to embed the editor

<figure><img src="https://1410134351-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FXeuL34FauPTZ6yb0wAep%2Fuploads%2FQCGJ5SivcSLMOUeAg2Bo%2Fimage.png?alt=media&amp;token=17021559-e1cb-4fd0-ba98-2a732dee66ab" alt=""><figcaption></figcaption></figure>

### 2. Use the embeddable shortcodes provided in the [Dynamic Mockups dashboard](https://app.dynamicmockups.com/mockup-editor-embed-integrations)

<mark style="color:red;">**Important:**</mark> You must select the option to "*Display as an iFrame*" for your HTML element. (see image below)

<figure><img src="https://1410134351-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FXeuL34FauPTZ6yb0wAep%2Fuploads%2Fp7AyyZiQdJFJBg8V6oaR%2Fimage.png?alt=media&amp;token=d583ae5a-fa79-4b11-a700-396255a7dae3" alt=""><figcaption></figcaption></figure>

### 3. Preview your page, and you should see the embedded iFrame.

<figure><img src="https://1410134351-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FXeuL34FauPTZ6yb0wAep%2Fuploads%2FmUZWeSJlc8Kf0BN5ztjJ%2Fimage.png?alt=media&amp;token=4a304a94-0755-42c9-b6d0-ab6c92e3d361" alt=""><figcaption></figcaption></figure>