Skip to main content
content...

Embed your Foleon Doc on a website

Permanently deleted user
  • Updated

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.

In this article

Types of Embeds

One-Pager Embed

A one-pager embed integrates your Foleon Doc into your webpage as a single, scrollable section. This approach is ideal for landing pages or presentations that don’t require extensive navigation.

Benefits of a one-pager embed:

  • Seamless integration: The Foleon Doc becomes part of your webpage, providing a unified design.
  • No double scrolling: The embed removes the need for extra scrollbars on the page.
  • Streamlined navigation: Visitors use only your website's navigation, keeping it simple.

One-Pager Limitations:

  • No parallax: Parallax scrolling is not supported.
  • No full-height blocks: Elements set to full height won't display as intended.
  • No page scroll buttons: Navigation buttons designed to scroll to different parts of the Foleon Doc won’t work.
  • No overlays: Overlays aren’t supported.

⚠️ Ensure you disable any unsupported settings in your Foleon Doc to prevent it from breaking when embedded.

Multi-Page Embed

A multi-page embed allows you to include the entire Foleon Doc as-is, complete with its native navigation and functionalities.

Benefits of a multi-page embed:

  • Full functionality: All features of the Foleon Doc, including overlays, page scroll buttons, and parallax effects, are supported.

Limitations of a multi-page embed:

  • Multiple scroll bars: Embedding the full Doc can result in duplicate scrolling—one for your website and another for the embedded content.
  • Duplicate navigation: Your website's navigation and the Foleon Doc's built-in navigation may clash visually.
  • No deep linking: Users cannot directly navigate to a specific page within the embedded Doc.

Choosing the Right Embed Type

Consider the goals of your webpage and the user experience you wish to create:

  • Use a one-pager embed for streamlined, single-purpose designs where functionality limitations won't interfere.
  • Use a multi-page embed when full Foleon Doc functionality is essential, and you can manage the visual impact of multiple scroll bars and navigation menus.


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.

In the script above, replace [[Foleon Doc origin]] and [[Foleon Doc URL]] 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. Otherwise, the iFrame will not know the screen's height, causing conflicts.
  • We suggest using a single-page Doc instead of multiple pages. Then turn off the navigation bar — you already have 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.

 

Powered by Zendesk