Embed HTML file

Aura enables users to seamlessly embed external HTML files into Confluence through the Aura - HTML macro, utilizing a custom script.

This technique is applicable only if the embedded file supports CORS.

To successfully embed an HTML file, you can implement the Aura - HTML macro alongside the following JS script. Replace the pathToFile with the actual file you want to embed:

// TODO: replace this with your own path
const pathToFile = "https://example.org/index.html";

async function loadExternalHTML(url) {
  try {
    const response = await fetch(url);
    if (!response.ok) {
      throw new Error(`Failed to load the HTML file: ${response.statusText}`);
    }

    const htmlContent = await response.text();
    document.body.innerHTML = htmlContent;

    const scripts = Array.from(document.body.querySelectorAll("script"));

    const loadScript = (script) => {
      return new Promise((resolve, reject) => {
        const newScript = document.createElement("script");
        newScript.src = script.src;
        newScript.async = false;
        newScript.onload = resolve;
        newScript.onerror = () =>
          reject(new Error(`Failed to load script: ${script.src}`));
        document.body.appendChild(newScript);
      });
    };

    for (const script of scripts) {
      if (script.src) {
        await loadScript(script);
        script.remove();
      }
    }

    for (const script of scripts) {
      if (!script.src) {
        try {
          eval(script.innerHTML);
          script.remove();
        } catch (err) {
          console.error("Error executing inline script:", err);
        }
      }
    }
  } catch (error) {
    console.error("Error loading external HTML:", error);
  }
}

loadExternalHTML(pathToFile);

Paste the script into the JS tab of the HTML macro