Full Integration Example

A complete example that combines iframe resizer, URL syncing, and the Helpcenter API events into a single integration.

This script embeds your Helpcenter in an iframe and keeps the host page URL in sync with navigation inside the Helpcenter. This means your users can copy and share deep links to specific categories and articles, even though the content is served from an iframe.

What it does

1. Loads the Helpcenter based on the current URL — if a user visits https://customer.se/faq/category/1, the iframe loads https://customer.imbox.wiki/category/1
2. Resizes the iframe dynamically — uses iframe resizer so the iframe matches the content height
3. Syncs URL on navigation — when a user clicks a link inside the Helpcenter, the host page URL updates to match (e.g. /faq/category/1)
4. Scrolls to top on page load — when the Helpcenter navigates to a new page, the host page scrolls to the top

Configuration

Update these three values to match your setup:

Variable	Description
iframeTarget	CSS selector for the container element where the iframe will be inserted
hostUrl	The full URL of the page on your site where the Helpcenter is embedded
helpcenterUrl	Your Imbox Helpcenter URL

Code

<div id="imbox-helpcenter-container"></div>

<script src="https://cdn.imbox.io/helpcenter/shared/iframesizer.min.js"></script>
<script>
  ;(() => {
    const iframeTarget = "#imbox-helpcenter-container"
    const hostUrl = "https://customer.se/faq"
    const helpcenterUrl = "https://customer.imbox.wiki"

    const hostPath = new URL(hostUrl).pathname.replace(/\/$/, "")
    const currentPath = window.location.pathname

    // Extract the sub-path after baseUrl's path, e.g. /faq/category/26 -> /category/26
    const subPath = currentPath.startsWith(hostPath)
      ? currentPath.slice(hostPath.length)
      : ""

    // Create iFrame
    const container = document.querySelector(iframeTarget)
    const iframe = document.createElement("iframe")
    iframe.id = "imbox-helpcenter"
    iframe.src = helpcenterUrl + subPath
    iframe.style.cssText = "width:1px;min-width:100%;border:none;"
    container.appendChild(iframe)

    // Activate iframe resizer
    iFrameResize({}, "#imbox-helpcenter")

    // On internal navigation in helpcenter we also want to update host domain url
    window.addEventListener("message", (event) => {
      if (event.data.type === "@IMBOX/onHelpcenterLinkClick") {
        const href = event.data.payload.href
        const hcPath = new URL(href).pathname
        const newUrl = hostPath + hcPath
        window.history.pushState(null, "", newUrl)
      }

      // Scroll host page to the top on navigation
      if (event.data.type === "@IMBOX/onHelpcenterPageLoad") {
        window.scrollTo({ top: 0 })
      }
    })
  })()
</script>