Custom HTML, CSS & JavaScript Macro

Easy add any HTML, CSS & JS to your Confluence pages

Marketplace

Custom HTML, CSS & JavaScript Macro is available in Atlassian Marketplace

Support

Looking for support?
You can submit request on our portal: click here.

Usage

Autocomplete

While editing page start typing {cus and choose form auto-complete Custom Code Macro HTML CSS JS Advanced or Custom Code Macro HTML CSS JS.

Macro picker

Click + and Other Macros (or Ctrl+Shift+A). Select Visuals & images category and choose Custom Code Macro HTML CSS JS Advanced or Custom Code Macro HTML CSS JS.

Normal & Advanced Mode

Difference between macro types

Normal mode

Content of normal macro will be included inside body element. If your content is <p>My Content<p> then final result is:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 <!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Macro View</title> <script src="https://connect-cdn.atl-paas.net/all.js"></script> </head> <body> <p>My Content<p> </body> </html>

Advanced mode

You content will be be returned in response to display view as is. So you have to include valid HTML page. You are responsible of loading https://connect-cdn.atl-paas.net/all.js.

It is required to load all.js. If you will not load this JS then Confluence will not know if page was loaded successfully and you will see App is not responding. Wait or cancel?

 

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 <!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Custom Macro</title> </head> <body> <!-- This is required by Confluence. It will notify Confluence --> <!-- that this page is loaded and also will load JavaScript API to communicate with Confluence: --> <!-- Check more on: https://developer.atlassian.com/cloud/confluence/about-the-javascript-api/ --> <script src="https://connect-cdn.atl-paas.net/all.js"></script> <!-- Example Code --> <script> var flag = AP.flag.create({ title: 'Successfully created a flag.', body: 'This is a flag.', type: 'success', actions: { 'actionkey': 'Click me' } }) </script> </body> </html>

Macro height

You are responsible for setting proper macro height.

Confluence page need to know size of the content inside macro. One way is to use class='ac-content' on main element of the page. This works fine when content is static and it is not modified after page is loaded. When page content is complex or it is dynamic you should update height with API.

Example of class='ac-content' in normal mode:

1 <p class='ac-content'>My Content<p>

Example of API call:

1 2 3 4 5 6 7 8 9 /* Width is ignored by Confluence in our case. This macro will be expanded to available width */ let width = null; let height = pageHeight(); AP.resize(width, height) function pageHeight() { return document.documentElement.getBoundingClientRect().height; }

 

bellow <script></script> section should be added at the end of your HTML block, only then height will be properly adjusted.

 

In normal mode:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 <p>My Content<p> <script> /* Width is ignored by Confluence in our case. This macro will be expanded to available width */ let width = null; let height = pageHeight(); AP.resize(width, height) /* To make it work with External Share for Confluence Macro, HTML height will be properly adjusted on shared pages */ let url = new URL(window.location); let macroId = url.searchParams.get("macroId"); let message = { "docHeight": height, "macroId": macroId }; window.parent.postMessage(JSON.stringify(message), '*'); function pageHeight() { return document.documentElement.getBoundingClientRect().height; } <script>

and in advanced mode:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 <!doctype html> <html lang="en"> <head>[...]</head> <body> My content <script> /* Width is ignored by Confluence in our case. This macro will be expanded to available width */ let width = null; let height = pageHeight(); AP.resize(width, height); /* To make it work with External Share for Confluence Macro, HTML height will be properly adjusted on shared pages */ let url = new URL(window.location); let macroId = url.searchParams.get("macroId"); let message = { "docHeight": height, "macroId": macroId }; function pageHeight() { return document.documentElement.getBoundingClientRect().height; } <script> </body> </html>