HTML Macro in Cloud vs. Data Center

In most cases, HTML macros migrated from Confluence Data Center can work without any changes. However, some macros rely on Data Center behaviour that Cloud doesn't allow, and these need small code changes. This page lists those differences and explains how to adapt your code, using the AI prompt built into HTML Macro.

Why Cloud behaves differently

In Data Center, HTML macros are rendered straight into the Confluence page. All macros on a page share one browser window, so they can read each other's variables, change the Confluence page, read the page URL and use Confluence's own JavaScript (such as AJS or jQuery).

In Confluence Cloud, app macros run in its own isolated, sandboxed iframe. This keeps your site secure, but it means each macro is a separate mini web page.

Limitations and workarounds

Example: macros that share data

In Data Center, these two macros on the same page worked together. In Cloud, the second macro can't see window.MY_CONFIG, so its list stays empty.

<!-- Macro 1 -->
<script>
  window.MY_CONFIG = { team: "Platform", links: ["https://example.com/a", "https://example.com/b"] };
</script>

<!-- Macro 2 -->
<ul id="links"></ul>
<script>
  window.MY_CONFIG.links.forEach(function (url) {
    document.getElementById("links").innerHTML += '<li><a href="' + url + '">' + url + '</a></li>';
  });
</script>

Fix: put the configuration inside the macro that uses it, and delete Macro 1 if nothing else needs it.

Alternatively, you can host the shared Javascript and CSS in a CDN and use the CDN links across all macros.

<ul id="links"></ul>
<script>
  var MY_CONFIG = { team: "Platform", links: ["https://example.com/a", "https://example.com/b"] };
  MY_CONFIG.links.forEach(function (url) {
    document.getElementById("links").innerHTML += '<li><a href="' + url + '" target="_blank">' + url + '</a></li>';
  });
</script>

Example: page URL parameters

In Data Center, this code showed a pop-up only when the page was opened with ?test=2025-11-12. In Cloud, window.location.search is always empty.

// Data Center
var params = new URLSearchParams(window.location.search);
var testDate = params.get("test"); // always null in Cloud
if (testDate) {
  showPopup(testDate);
}

Fix: set the test value in the macro. Leave it empty for normal use, so the macro behaves exactly as it did when no parameter was passed.

// Cloud: set a date while testing, e.g. "2025-11-12". Leave empty ("") for normal use.
var TEST_DATE = "";
if (TEST_DATE) {
  showPopup(TEST_DATE);
}

Adapt your code with the AI prompt

HTML Macro includes a ready-made AI prompt that explains the Cloud rules above to an AI assistant (Claude, ChatGPT, Gemini or similar). You can use it to convert existing Data Center code.

Step 1: Copy your existing code

1. Open the page in edit mode.

2. Select the HTML macro and click Edit (pencil icon).

3. Copy all code from the editor and keep a copy somewhere safe. You can also find the original code in the page history.

4. If the macro reads data from other macros on the same page, copy their code too.

Step 2: Copy the AI prompt

1. In the macro editor, click Generate with AI.

2. Click Copy Prompt, or Download .md to save it as a file.

Step 3: Ask the AI to convert your code

1. Open your AI assistant and paste the prompt.

2. At the very end, replace the line Now generate the code for: <describe what you want to build here> with a conversion request. Now convert the following code from Data Center so it works with HTML Macro in Confluence Cloud.

3. Paste your Data Center code in next line.

Step 4: Test and save

1. Paste the converted code into the macro editor and check the live preview on the right.

2. Click Save, publish the page and test it in view mode.

3. If it doesn't work, open the browser developer console (F12), copy the error messages and paste them back into the AI chat with: This error appears in the browser console. Please fix it.

Need help?

If a macro still doesn't work after following this guide, contact Narva support and include the original code and a screenshot.