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
Step 1: Prepare the URLs
To embed your Foleon Doc in your website you will need to have the correct URLs in hand:
- Foleon Doc URL: The published Doc URL: https://www.foleon.com/industry/business-services/
-
Foleon Doc origin: This is the Foleon URL of the published Doc without the base path.
Example: The Foleon Doc origin for https://www.foleon.com/industry/business-services/ is https://www.foleon.com - Target origin: The website URL where you want to embed the Foleon Doc. From that URL https://www.mydomain.com/example-page the target origin is https://www.mydomain.com
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.