Skip to content
iframe-resizer

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?