Custom HTML, CSS & JavaScript Macro
Watch for changes
Easy add any HTML, CSS & JS to your Confluence pages
Marketplace
Custom HTML, CSS & JavaScript Macro is available in Atlassian Marketplace
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:
<!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?
<!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:
<p class='ac-content'>My Content<p>
Example of API call:
/* 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:
<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:
<!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>
Support
Looking for support?
You can submit request on our portal: click here.