Embed your Foleon Doc on a website

Embed a Foleon Doc directly on a site page, and keep visitors on your website while they check out your Doc content.

⚠️ If you need help with implementing the steps below, reach out to your IT support team.

 

 

Step 1: Prepare the URLs

To embed your Foleon Doc in your website, you will need to have the correct URLs in hand:

Step 2: Add the script to your Foleon Doc

In the Editor, go to Menu > Doc Settings Marketing, and add the following script to the remarketing code field.

Replace [[Target origin]] with the prepared URL.

<script>
function setHeight() {
  var height = document.documentElement.scrollHeight;
  window.parent.postMessage({
    type: 'set-height',
    height: height
  }, '[[Target origin]]');
};
window.onload = setHeight;
window.onresize = setHeight;
</script>

 

Step 3: Add the script to your website

Add the script below to your website to make the embed work.

Replace [[Foleon Doc origin]] and [[Foleon Doc URL]] in the script above with the prepared URLs.

 <div id="embed-container">
   <iframe src="[[Foleon Doc URL]]" width="100%" height="700" frameBorder="0"
id="embed-iframe"></iframe>
</div>
<script>
   window.addEventListener('message', function(event) {
     if (event.origin !== '[[Foleon Doc origin]]’) return;
     if (event.data.type === 'set-height') {
       var height = event.data.height;
       var iframe = document.getElementById('embed-iframe');
       iframe.style.height = height + 'px';
     }
   }, false);
</script>

 

💡 Every time you republish your Doc in the Editor, this allows for real-time updates to your embedded Docs, ensuring that your website visitors always have access to the latest information.

Best practices

  • Turn off full height in Block Settings. The iFrame will not know the height of the screen, and this will cause conflicts.
  • We suggest using a single-page Doc instead of multiple pages. Then turn off the navigation bar – you've already got one on your website.
  • Remove the page scroll button. The iFrame doesn’t know the end of the screen to position the button correctly.
  • In Project Settings > Security Settings, make sure the security profile is set to 'Default' on your. Headers such as X-Frame-Options will block embedding.
  • Make sure your canonical URL is set to where you are implementing the iframe.