# Embedding a Foleon Doc on an external webpage using an i-frame

Some situations require a Foleon Doc to be embedded within another website. This approach comes with pros and cons.

#### Pros:

- Keep visitors on your website while they check out your Doc content.
- No need to redeploy the main website when the content changes.


#### Cons:

- The Foleon Doc content cannot be attributed to the main website, affecting SEO performance.
- You need access to the HTML source code, or a custom code embed element in your CMS.


## The i-frame tag

This is the base HTML tag to embed the Foleon doc. The frame will have a static height, regardless of frame width, which can result in an extra srollbar within the frame. Use the `height` attribute to manually set the height of the frame.


```html
<iframe
        id="foleon-embed-1"
        src="https://mydomain.foleon.com/myproject/mydoc/"
        style="border:none; width:100%; height:700px;"
        allowfullscreen>
</iframe>
```

div
strong
🔍 Note:
 Make sure to update the 
code
src
 attribute to reflect your Foleon Doc's URL.

## Ensuring dynamic height

To make sure the height of the frame adjusts dynamically to any width (removing the extra scrollbar), we need to make sure the Foleon Doc relays its height to the Parent page. We do this using two scripts, one in the Foleon Doc, and another on the Parent page (usually underneath the i-frame tag).

#### Script to be placed in the Foleon Doc's Remarketing code:

Paste this script into the remarketing code field.


```html
<script>
  function setHeight() {
    let height = document.body.clientHeight;
    let target = "https://www.my-website.com/";
    window.parent.postMessage({
      type: "set-height",
      height: height
    }, new URL(target).origin);
  }
  window.onload = setHeight; window.onresize = setHeight;
  foleon("onPageChange", function () {setTimeout(function () {setHeight();}, 100);});
</script>
```

div
strong
🔍 Note:
 Make sure to update the value of the 
code
target
 variable to reflect the URL of the website where you are placing the i-frame.

#### Script to be placed on the Parent Page:

Place this script tag in the body of the parent page, underneath the i-frame tag.


```html
<script>
  const iframe = document.getElementById('foleon-embed-1');
  window.addEventListener('message', function(event) {
    if (event.origin !== new URL(iframe.src).origin) return;
    if (event.data.type === 'set-height') {
      let height = event.data.height;
      iframe.style.height = height + 'px';
    }
  }, false);
</script>
```