Skip to content

Use With Third Party Websites

This page guides you through how to setup iframe-resizer in a way that allows you to control how the library runs after it has been included on another party’s website. You can use iframe-resizer to either include third party content on your own site, or share you content in an iframe on other parties sites.

Include third party content on your site

When displaying a third party iframe on your own site. You just need to ask the provider to include the child package anywhere on each of their webpages that you are displaying in your iframe.

This can be either from your website, or jsDeliver. Self hosting this script has the advantage that you can upgrade to a future version without having to have the other party make changes to their site.

<script
async
src="https://your-site.com/node_modules/@iframe-resizer/child/index.umd.js"
></script>

The child package is designed to be a good guest on the sites that host it. As such it will not initialize until having first received a message from the parent page.

Sharing an iframe with third parties

This is a quick setup guide that details how to create a simple javascript file that you can share with third parties that wish to include you iframe on their own sites.

This approach simplifies the setup for your client sites and allows you to control the version of iframe-resizer in use on both the parent and child pages in the future, without having to go back to your clients and ask them to make changes to their sites.

License

Set the license key in your pages displayed in the iframe. This will need to be included alongside the child page javascript file.

window.iframeResizer = { license: 'xxxx' }

Create setup script

This code will create your iframe with the link to your content, then load and configure iframe-resizer.

load-iframe.js
; (function () {
// Options for iframe-resizer
const options = {
log: 'collapsed',
waitForLoad: true,
}
// URL of the site where the iframe content is hosted
const site = "https://your-domain.com";
// iframe configuration
const width = "100%"
const height = "100vh"
const content = "iframe-content.html"
// Path to the iframe-resizer parent script
const parentScript = "node_modules/@iframe-resizer/parent/index.umd.min.js"
// Create the iframe
const iframe = document.createElement("iframe")
iframe.src = `${site}/${content}`
iframe.style.width = width
iframe.style.height = height
// Load iframe-resizer parent script
const script = document.createElement("script")
script.src = `${site}/${parentScript}`
script.async = true
script.fetchPriority = "high"
script.onload = () => iframeResize(options, iframe)
script.onerror = function () {
console.error("Failed to load iframe-resizer library.")
}
// Insert iframe and script files after this script
document.currentScript.after(iframe, script)
})()

It is recommend that you minify this code using either Terser or UglifyJS.

Share the script

Once you have deployed the above script to your server, you can then ask external client websites to simply include the following on their page, at the location they wish to place the iframe.

<script async src="https://your-domain.com/load-iframe.js">

This will then create the iframe and configure iframe-resizer on their page.

Was this page useful?