Quick Start Guide

Get up and running with HTML Macro for Confluence in just a few steps.

Overview

HTML Macro for Confluence

HTML Macro for Confluence lets you embed fully custom HTML, CSS, and JavaScript directly inside any Confluence page. Build rich interactive widgets, branded layouts, data visualisations, embedded content, and more — without leaving Confluence.

Prerequisites

  • Atlassian Confluence Cloud instance
  • App installed from Atlassian Marketplace
  • Confluence Space or Page edit permissions

Step 1: Install the App

Install HTML Macro for Confluence from the Atlassian Marketplace. See the Installation Guide for step-by-step instructions.

Step 2: Add the Macro to a Page

  1. Open a Confluence page in edit mode
  2. Type the slash command: 
    /html
  3. Select HTML Macro for Confluence from the dropdown
  4. The macro editor opens in a full-screen panel

Step 3: Write Your Content

The editor has three tabs — HTML, CSS, and JavaScript. Write your content across any combination of tabs and see it rendered live in the preview pane on the right.

Simple example:

<div class="card">
  <h2>Hello, Confluence!</h2>
  <p>This is custom HTML rendered inside a Confluence page.</p>
</div>

.card {
  background: #f4f5f7;
  border-radius: 8px;
  padding: 24px;
  font-family: -apple-system, sans-serif;
}

Step 4: Save

Click Save in the bottom toolbar. Your HTML is saved to the macro configuration and will render for every visitor to that page.

What's Next?

Need Help?