Embedding a Foleon Doc on an external webpage using an i-frame
Copy for LLM
Copy page as Markdown for LLMs
View as Markdown
Open this page as Markdown
Open in ChatGPT
Get insights from ChatGPT
Open in Claude
Get insights from Claude
Connect to Cursor
Install MCP server on Cursor
Connect to VS Code
Install MCP server on VS Code

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.

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

🔍 Note: Make sure to update the 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.

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

🔍 Note: Make sure to update the value of the 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.

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