DEV Community: Yamuno

5 Ways to Use HTML in Confluence Cloud (With Examples)

Yamuno — Fri, 25 Sep 2026 07:33:16 +0000

5 Ways to Use HTML in Confluence Cloud (With Examples)

Short answer: Confluence Cloud doesn't include an HTML macro. The one you may remember from Server and Data Center was never brought to Cloud, and even on Data Center it's disabled by default. In Cloud you have two options:

The built-in iFrame macro embeds another web page by URL. It can't run your own HTML, CSS or JavaScript, and many sites refuse to be embedded.
An HTML macro app from the Atlassian Marketplace adds a macro where you write your own code. It runs in a sandboxed frame, so it can't affect the rest of the page.

This guide uses HTML Macro+ for Confluence, which is free and runs on Atlassian Forge, but the ideas apply to any HTML macro. The code examples are split into HTML, CSS and JavaScript, matching the editor's three tabs.

What you want to do	Native Confluence Cloud	With an HTML macro
Style a section beyond the built-in panels	Limited to panels, colors and layouts	Any CSS inside the macro
Embed a video, map or design file	iFrame macro, if the site allows embedding	Your own iframe, wrapped in your own layout
Show an existing `.html` file	Attach it as a download	Render it on the page
Add interactive elements	Not possible	Any JavaScript, in a sandbox
Keep migrated Data Center HTML pages working	Shows "unknown macro"	Pages keep rendering

1. Style a section with custom CSS

When you need it: a landing page for your space, a styled call-out, a grid of link cards, or brand colors that the built-in panels don't offer.

One thing to know first: CSS in an HTML macro styles what is inside the macro, not the whole Confluence page. That's by design, because the macro renders in its own sandboxed frame. It means your styles can't break the Confluence UI, and Confluence's styles can't break yours.

HTML

<div class="cards">
  <a class="card" href="/wiki/spaces/ENG/pages/onboarding">
    <span class="card-kicker">Start here</span>
    <h3>Engineering onboarding</h3>
    <p>Accounts, tools and your first week.</p>
  </a>
  <a class="card" href="/wiki/spaces/ENG/pages/runbooks">
    <span class="card-kicker">On call</span>
    <h3>Runbooks</h3>
    <p>Step-by-step fixes for common incidents.</p>
  </a>
  <a class="card" href="/wiki/spaces/ENG/pages/architecture">
    <span class="card-kicker">Reference</span>
    <h3>Architecture</h3>
    <p>How our services fit together.</p>
  </a>
</div>

CSS

.cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 16px;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
.card {
  display: block;
  padding: 20px;
  border: 1px solid #dfe1e6;
  border-radius: 10px;
  color: #172b4d;
  text-decoration: none;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.card:hover {
  border-color: #0c66e4;
  box-shadow: 0 4px 12px rgba(9, 30, 66, 0.12);
}
.card-kicker {
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #0c66e4;
}
.card h3 { margin: 8px 0 4px; font-size: 17px; }
.card p { margin: 0; font-size: 14px; color: #44546f; }

Links inside the macro open through Confluence's own navigation, so internal /wiki/... links behave like normal page links.

2. Embed videos, maps and design files

When you need it: a product demo video next to the release notes, an office map on the "Getting here" page, a Figma prototype in the design spec.

The built-in iFrame macro works when the site allows embedding and you only need the embed itself. An HTML macro helps when you want the embed wrapped in your own layout, such as a responsive 16:9 frame with a caption, or several embeds side by side.

HTML

<figure class="embed">
  <div class="frame">
    <iframe
      src="https://www.youtube.com/embed/VIDEO_ID"
      title="Release 4.2 walkthrough"
      allowfullscreen
    ></iframe>
  </div>
  <figcaption>Release 4.2 walkthrough (6 minutes)</figcaption>
</figure>

CSS

.embed { margin: 0; }
.frame {
  position: relative;
  aspect-ratio: 16 / 9;
  border-radius: 10px;
  overflow: hidden;
  background: #091e42;
}
.frame iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}
figcaption { margin-top: 8px; font-size: 13px; color: #44546f; }

Replace VIDEO_ID with your video's ID. In HTML Macro+, unless your admin allows all domains, youtube.com must be on the domain whitelist; until it is, the frame shows a "Content blocked" placeholder. The same applies to google.com for Maps and figma.com for Figma. See security settings.

3. Show an existing HTML file on the page

When you need it: you already have HTML output from another tool, like a test coverage report, a notebook exported to HTML, a generated API reference or a one-page prototype. Attached to a page, it's just a download link that most readers never open.

HTML Macro+ includes an HTML from Attachment macro for this:

Attach the .html file to the Confluence page, or upload it from your computer in the macro.
Insert the HTML from Attachment macro and pick the file.
Publish. The file renders on the page, sized to its content, with the same security rules as any other macro.

When the report is regenerated, replace the attachment to show the new version, with no copying and pasting of generated code.

4. Add interactivity with JavaScript

When you need it: content that's easier to read when readers can switch or filter it, such as tabs for different operating systems, a filterable list, a calculator or a chart.

Here's a small tabbed panel. The same pattern works for any "show one of several" content.

HTML

<div class="tabs">
  <div class="tab-buttons" role="tablist">
    <button class="active" data-tab="mac" role="tab">macOS</button>
    <button data-tab="windows" role="tab">Windows</button>
    <button data-tab="linux" role="tab">Linux</button>
  </div>
  <div class="tab-panel active" id="mac">Install with Homebrew: <code>brew install our-cli</code></div>
  <div class="tab-panel" id="windows">Install with winget: <code>winget install OurCo.Cli</code></div>
  <div class="tab-panel" id="linux">Install with apt: <code>sudo apt install our-cli</code></div>
</div>

CSS

.tabs { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }
.tab-buttons { display: flex; gap: 4px; border-bottom: 1px solid #dfe1e6; }
.tab-buttons button {
  padding: 8px 14px;
  border: 0;
  border-bottom: 2px solid transparent;
  background: none;
  font-size: 14px;
  color: #44546f;
  cursor: pointer;
}
.tab-buttons button.active { color: #0c66e4; border-bottom-color: #0c66e4; font-weight: 600; }
.tab-panel { display: none; padding: 16px 2px; font-size: 14px; }
.tab-panel.active { display: block; }
code { background: #f1f2f4; padding: 2px 6px; border-radius: 4px; }

JavaScript

document.querySelectorAll(".tab-buttons button").forEach((button) => {
  button.addEventListener("click", () => {
    document
      .querySelectorAll(".tab-buttons button, .tab-panel")
      .forEach((el) => el.classList.remove("active"));
    button.classList.add("active");
    document.getElementById(button.dataset.tab).classList.add("active");
  });
});

For bigger examples, see how to embed interactive charts with Chart.js and how to build a status dashboard.

5. Keep migrated Data Center HTML pages working

When you need it: you're moving from Confluence Server or Data Center, and some pages were built with the HTML macro. After migration, those pages show an "unknown macro" error in Cloud.

HTML Macro+ recognizes both the Server/Data Center HTML macro and the Macro Toolbox for Cloud HTML macro. Once it's installed on your Cloud site, migrated pages render again without editing them one by one. You can then scan a space for the old macros, preview what will change, and convert them in bulk to the current macro. Pages stay live throughout.

Before migrating, check which HTML macros use external scripts or images. Those domains need to be whitelisted in Cloud, or the content will show as blocked.

HTML macro not working?

Most problems come down to a domain that isn't whitelisted, a script that runs before the page is ready, or restricted editor access. The troubleshooting guide walks through each fix.

Frequently asked questions

Can Confluence Cloud render HTML?
Not natively. Confluence Cloud has no HTML macro. You can embed other web pages with the iFrame macro, or install an HTML macro app to render your own HTML, CSS and JavaScript.

Why doesn't Confluence Cloud have an HTML macro?
Letting any editor run their own code on a page is a security risk, especially cross-site scripting. HTML macro apps handle this by rendering code in a sandboxed frame and letting admins control which external sites can load.

Can I paste HTML into the Confluence editor?
Pasting copied web content keeps much of its formatting, but pasting raw HTML code shows it as text. To have code rendered, put it in an HTML macro.

Is it safe to use JavaScript in Confluence Cloud?
It depends on the app. Look for sandboxed rendering, an admin-controlled domain whitelist, and editor permissions so only trusted people can change code. HTML Macro+ has all three, and runs on Atlassian Forge, so content stays inside Atlassian.

Does CSS in the macro change the rest of my Confluence page?
No. Styles apply only to the content inside the macro.

Try it

HTML Macro+ for Confluence is free on the Atlassian Marketplace. Start with the installation guide, then try any example above.

Install HTML Macro+ — free on the Atlassian Marketplace

What Confluence's Built-In PDF Export Can't Do

Yamuno — Wed, 23 Sep 2026 09:27:29 +0000

What Confluence's Built-In PDF Export Can't Do

Confluence's native PDF export is fine when you need one page as a quick PDF. The moment you need more than that, a set of pages, a branded document, or a consistent format, you run into its limits fast. This is an honest list of what the built-in export cannot do, so you can tell when you have outgrown it.

None of this is a knock on Confluence. The native export is a convenience feature, not a document tool. Knowing where it stops is the fastest way to decide whether you need something more.

It Exports One Page at a Time

This is the big one. Native export is built around a single page. There is no way to select several pages, export a parent page together with all of its children, or export a whole space to PDF in one action.

If you need to turn a 40-page documentation set into PDFs, native export means opening each page and exporting it individually, then dealing with 40 separate files. For anything beyond a handful of pages, that stops being practical.

No Cover Page

There is no option to add a title page, a logo, a subtitle, or a document date to the front of the export. The PDF starts straight at the page content. For an internal draft that is fine. For a document going to a client or an executive, the missing cover is the first thing people notice.

No Custom Headers, Footers, or Page Numbers

Native export gives you no control over headers and footers. You cannot add your company name, a document title, a confidentiality line, the export date, or page numbers. Everything a formal document usually carries in the margins is simply absent.

No Watermarks

There is no way to stamp a PDF with "DRAFT", "CONFIDENTIAL", or "FOR REVIEW". For teams that share documents externally or work under compliance rules, a watermark is often a requirement rather than a nicety, and native export does not offer one.

No Reusable Templates

Every native export is a one-off. There is no way to save a format and apply it again, so two exports of the same page a week apart can look different, and two people on the same team have no shared standard to work from. Consistency has to be enforced by hand, which means it usually is not.

No Table of Contents

A single-page native export has no navigation. There is no auto-generated table of contents built from your headings, which is exactly what a longer document needs to be readable once it is a PDF.

Limited Control Over Layout

Native export gives you no say over fonts, margins, line spacing, or page breaks. Wide tables and large images are handled with whatever defaults Confluence applies, and you cannot adjust them. When the output does not fit the page well, there is no setting to fix it.

When You've Outgrown Native Export

If you only ever export the occasional single page for your own use, the built-in export is genuinely all you need, and there is no reason to add an app.

You have outgrown it the moment any of these becomes true:

You need to export more than a few pages at once, or a whole space
The PDF is going to someone outside your team, so it needs a cover and branding
You are exporting for compliance or retention, so it needs watermarks, page numbers, and a repeatable format
You want every export to look the same, which means templates

That is the point where a dedicated export tool earns its place. PDF Exporter for Confluence adds exactly what the native export leaves out: bulk export of multiple pages, page trees, and whole spaces; cover pages, headers, footers, and watermarks; a table of contents; and reusable templates so every export is consistent. It runs on Atlassian Forge, so nothing leaves your instance.

For a step-by-step walkthrough, see How to Export Confluence Pages to PDF.

Getting Started

Install PDF Exporter for Confluence from the Atlassian Marketplace.

Full documentation is at /docs/pdf-exporter-for-confluence.

Questions? Reach out via our support portal.

How Compliance Teams Export Confluence Content to PDF

Yamuno — Wed, 29 Jul 2026 10:41:07 +0000

How Compliance Teams Export Confluence Content to PDF

Compliance teams deal with a recurring documentation challenge: processes, policies, and controls are maintained in Confluence (where they're easy to update and collaborate on), but auditors, regulators, and legal teams need point-in-time PDF snapshots they can review, sign off on, or attach to a submission.

Confluence's native PDF export works for basic cases but has no provisions for the requirements that matter in compliance contexts: consistent formatting across all exported documents, watermarks for draft and confidential status, a clear record of what was exported and when, and reusable templates that ensure every export looks the same regardless of who ran it.

This guide covers how to set up a compliant export workflow using PDF Exporter for Confluence.

The Core Requirements for Compliance Exports

Before configuring anything, it helps to be specific about what compliance exports actually need:

Consistency — every exported document should look the same. If an auditor compares two policy documents and they have different headers, different page layouts, or different cover pages, it raises questions about process.

Document identification — the PDF should identify itself: what it is, who produced it, what classification it carries (confidential, internal, public). This information should be in the header, footer, or cover page — not just in the filename.

Watermarks where required — draft documents under review must be marked as drafts. Confidential documents must be visibly marked. Documents that have been superseded should carry an "ARCHIVED" watermark.

Completeness — when a compliance submission requires a set of documents (all policies in a space, all runbooks for a system), the export should cover the complete set, not a manually assembled selection that could be incomplete.

Step 1 — Set Up Compliance Templates

Create dedicated templates for compliance use cases. Log into Confluence as an admin, go to Settings → PDF Exporter → Templates, and create the following:

Template 1: "Policy — Current"

For active, approved policies shared with auditors or regulators.

Cover style: Executive (minimal, formal)
Accent color: Company primary color
Logo: Company logo
Author: "Compliance Team" or department name
Header: Document title, centered
Footer (left): "Confidential — [Company Name]"
Footer (right): Page number (Page 1 of 10 format)
Watermark: Disabled
Table of contents: Enabled, depth 2
Page breaks: Before H1

Template 2: "Policy — Draft"

For documents under internal review before approval.

Same as "Policy — Current" except:
Watermark: Enabled, text "DRAFT", opacity 0.20
Subtitle: "For Internal Review Only"

Template 3: "Compliance Archive"

For historical snapshots being archived or submitted as evidence of past state.

Same as "Policy — Current" except:
Watermark: Enabled, text "ARCHIVED", opacity 0.15
Footer (left): "Archived — [Company Name] — [Date]"

Note: the footer date needs to be manually updated when creating each archive export, since templates don't have dynamic date fields.

Step 2 — Export Individual Policies

For exporting a single policy document:

Open the policy page in Confluence
Click ••• → Export to PDF
Select the appropriate template ("Policy — Current" for finalized, "Policy — Draft" for review)
Use the Preview option to verify the cover page, watermark, and footer before downloading
Download the PDF

The preview step is important for compliance exports — it takes 15 seconds and catches issues (wrong watermark status, missing logo) that would be unprofessional in a submission.

Step 3 — Export a Complete Policy Set

When an audit requires a complete set of documents — all security policies, all change management procedures, all GDPR-related documentation — use the space export to capture everything in scope.

From the Confluence global navigation, open Apps → PDF Exporter for Confluence
The page tree for the current space is displayed
Navigate the tree and select all pages in scope
Uncheck any pages that are internal working drafts not intended for the submission
Select the "Policy — Current" template
Export

The download is a ZIP file containing one PDF per page. The ZIP structure mirrors the Confluence page hierarchy — auditors can navigate it like a folder structure.

If the submission requires a single combined document rather than individual PDFs, export a parent page with all child pages included — the output is still individual PDFs per page, but they can be manually combined using any PDF tool if a single-file format is required.

Step 4 — Archive Snapshots

Compliance often requires preserving point-in-time snapshots of policies — what did the data retention policy say on January 1, 2026? The page in Confluence may have been updated since then.

The workflow for archive snapshots:

When a policy is approved, export it immediately using the "Policy — Current" template
Store the PDF in a designated archive location (shared drive, document management system)
When the policy is updated and re-approved, export the updated version and archive the previous one using the "Compliance Archive" template (which adds the ARCHIVED watermark)

This gives you a complete versioned record: the current approved policy in Confluence, and a series of archived PDFs showing the policy's state at each approval milestone.

Step 5 — Document the Export Process Itself

For audits where the reviewer may ask "how do you ensure the exported documents are accurate?", document the export process itself in Confluence:

Which templates are used for which document types
Who is authorized to run compliance exports
How and where archived PDFs are stored
The review/preview step that happens before each export

This process documentation can itself be exported to PDF using the same templates. An auditor asking "what's your document control process?" gets a PDF produced by the same process it describes.

Common Compliance Scenarios

SOC 2 audit preparation: Export all security policies (access control, change management, incident response, business continuity) using the "Policy — Current" template. The cover page identifies the document; the consistent header and footer identify the producing organization; the table of contents makes it navigable.

GDPR documentation submission: Export privacy policy, data processing agreements, and DPIA records. Use the "Policy — Current" template. Ensure the footer carries the confidentiality classification appropriate for GDPR documentation.

ISO 27001 evidence collection: Export control documentation, risk assessment records, and procedure documents. For evidence of past state ("what did your risk assessment look like during the audit period?"), use archived snapshots from the archive workflow above.

Legal hold: When content in Confluence becomes subject to a legal hold, export the relevant pages immediately using the "Compliance Archive" template and store them outside Confluence where they can be produced on request.

Install PDF Exporter for Confluence →

Read the documentation →

How to Bulk Import Markdown Files into Confluence

Yamuno — Thu, 23 Jul 2026 10:24:54 +0000

How to Bulk Import Markdown Files into Confluence

If you're migrating documentation from GitHub, GitLab, Notion, or a static site generator, you're probably looking at more than a handful of markdown files. Importing them one at a time into Confluence isn't viable at scale. This guide covers how to bulk import — dozens or hundreds of files at once — with the page hierarchy, images, and formatting preserved.

What "Bulk Import" Means in Practice

A bulk import takes a ZIP archive containing markdown files and a folder structure, and creates a matching set of Confluence pages with the same hierarchy. A folder in the ZIP becomes a parent page in Confluence. A markdown file becomes a Confluence page. Images referenced in the markdown are uploaded as attachments and linked correctly in the page content.

The result: a ZIP with 80 files becomes 80 Confluence pages in the right hierarchy without anyone touching each one individually.

Step 1 — Prepare Your Markdown Files

Install Markdown Importer for Confluence from the Atlassian Marketplace.

Before creating the ZIP, organize your markdown files in the folder structure you want reflected in Confluence:

docs/
├── getting-started.md
├── installation.md
├── configuration/
│   ├── basic-setup.md
│   ├── advanced-options.md
│   └── environment-variables.md
├── how-to/
│   ├── first-steps.md
│   └── common-tasks.md
└── reference/
    ├── api.md
    └── cli.md

Each folder will become a parent page in Confluence. The nesting can be as deep as you need.

File naming: The importer uses the markdown filename (without the .md extension) as the Confluence page title. Hyphens are replaced with spaces and the first letter is capitalized — getting-started.md becomes "Getting Started." If a file has a title field in its frontmatter, that takes precedence over the filename.

Step 2 — Add Frontmatter (Optional but Recommended)

YAML frontmatter at the top of each markdown file gives the importer more information to work with:

---
title: "Advanced Configuration Options"
---

# Advanced Configuration Options

Rest of the content...

If a title is present, the importer uses it as the Confluence page title. This lets you have descriptive filenames in the repo while setting human-readable titles in Confluence.

Other frontmatter fields are not processed by the importer but are preserved if you later export back to markdown.

Step 3 — Include Images in the ZIP

If your markdown files reference local images, include them in the ZIP alongside the markdown files:

docs/
├── getting-started.md          # references ./images/screenshot.png
├── images/
│   └── screenshot.png
└── reference/
    ├── api.md                  # references ../images/api-flow.png
    └── cli.md

Image references in the markdown should be relative paths:

![Screenshot](./images/screenshot.png)

The importer uploads the images as Confluence attachments and updates the references in the page content to point to the uploaded attachments. The relative path structure is resolved relative to the markdown file's location in the ZIP.

Step 4 — Create the ZIP Archive

On macOS or Linux:

cd /path/to/your
zip -r docs-import.zip docs/

On Windows (PowerShell):

Compress-Archive -Path .\docs\ -DestinationPath .\docs-import.zip

The ZIP should contain the root folder (docs/), not just the contents. This preserves the top-level folder name, which becomes the title of the root-level parent page if you're importing the whole tree.

If you'd rather the import start with the contents of the folder (not the folder itself as a parent page), zip the contents directly:

cd /path/to/your/docs
zip -r ../docs-import.zip .

Step 5 — Import the ZIP

Navigate to the Confluence page that should be the parent of the imported content
Click ••• (More actions) → Markdown Importer & Exporter
Click Upload and select your ZIP archive
Configure the import options:
- Page Hierarchy — enable this to create parent/child pages from the folder structure
- Overwrite existing pages — enable if you're re-importing and want to update pages that already exist
Click Import

A progress indicator shows pages being processed. For large imports (100+ pages), this may take a few minutes. The importer processes pages in small batches to avoid hitting Confluence API rate limits.

Step 6 — Import from the Global Apps Menu (Multiple Spaces)

If you're importing into multiple Confluence spaces in one operation, use the global access point instead of the page-level entry:

Click Apps in the Confluence global navigation
Select Markdown Importer & Exporter
Choose the target space and parent page from the dropdowns
Upload your ZIP and configure options
Import

Admins can use this to import documentation across multiple spaces without navigating to each target page individually.

Handling Large Imports

For very large imports (500+ pages), consider splitting the ZIP by section and importing in batches. This makes it easier to review the output after each batch and fix any issues before continuing.

After the first batch, check a few imported pages to verify:

Page titles are correct
Images are displaying (not showing broken links)
The hierarchy is correct in the page tree
Formatting (code blocks, tables, headings) rendered properly

If something is off, it's usually a consistent issue (like image paths being wrong) that you can fix across all remaining files before the next batch.

Common Issues

Broken image references: Usually caused by images being outside the ZIP or using absolute paths instead of relative paths. Fix the markdown to use relative paths and ensure images are inside the ZIP.

Wrong page titles: The filename is being used instead of frontmatter. Add title: frontmatter to the affected files.

Hierarchy not matching the folder structure: Page Hierarchy option was not enabled during import. Re-import with the option enabled — use "Overwrite" to update the existing pages.

Import stops partway through: Likely a rate limit from the Confluence API. Wait a few minutes and re-import the remaining files. Use "Overwrite" so already-imported pages are updated rather than duplicated.

Install Markdown Importer for Confluence →

Read the documentation →

How to Build a Custom Status Dashboard in Confluence

Yamuno — Sat, 18 Jul 2026 09:35:48 +0000

How to Build a Custom Status Dashboard in Confluence

Project status pages in Confluence often end up as paragraphs of text that nobody reads. A wall of prose with a last-updated date from three weeks ago doesn't communicate project health — it communicates that someone was busy when they wrote it.

A visual status dashboard that shows RAG indicators, progress percentages, and days until key milestones is faster to read and easier to maintain. This guide walks through building one using HTML Macro for Confluence.

What We're Building

A status dashboard with four components:

RAG status cards — one per workstream, color-coded by health
Progress bars — percentage complete for each initiative
Milestone countdown — days until the next key date
Metric tiles — key numbers at a glance

Each component is a separate HTML Macro on the page. You can use all four or just the ones that fit your context.

Component 1 — RAG Status Cards

A row of status cards, one per workstream. Color-coded: green = on track, amber = at risk, red = blocked.

<div style="display:flex; gap:16px; flex-wrap:wrap; font-family:sans-serif;">

  <div style="flex:1; min-width:180px; padding:20px; border-radius:12px; background:#f0fdf4; border:1px solid #86efac;">
    <div style="font-size:12px; font-weight:600; text-transform:uppercase; letter-spacing:0.08em; color:#15803d; margin-bottom:8px;">Backend API</div>
    <div style="display:flex; align-items:center; gap:8px;">
      <div style="width:12px; height:12px; border-radius:50%; background:#22c55e; box-shadow:0 0 6px #22c55e88;"></div>
      <span style="font-size:15px; font-weight:700; color:#1e293b;">On Track</span>
    </div>
    <div style="margin-top:8px; font-size:13px; color:#64748b;">Sprint 3 of 4 complete</div>
  </div>

  <div style="flex:1; min-width:180px; padding:20px; border-radius:12px; background:#fffbeb; border:1px solid #fcd34d;">
    <div style="font-size:12px; font-weight:600; text-transform:uppercase; letter-spacing:0.08em; color:#92400e; margin-bottom:8px;">Mobile App</div>
    <div style="display:flex; align-items:center; gap:8px;">
      <div style="width:12px; height:12px; border-radius:50%; background:#f59e0b; box-shadow:0 0 6px #f59e0b88;"></div>
      <span style="font-size:15px; font-weight:700; color:#1e293b;">At Risk</span>
    </div>
    <div style="margin-top:8px; font-size:13px; color:#64748b;">Design review delayed 3 days</div>
  </div>

  <div style="flex:1; min-width:180px; padding:20px; border-radius:12px; background:#fef2f2; border:1px solid #fca5a5;">
    <div style="font-size:12px; font-weight:600; text-transform:uppercase; letter-spacing:0.08em; color:#b91c1c; margin-bottom:8px;">Integrations</div>
    <div style="display:flex; align-items:center; gap:8px;">
      <div style="width:12px; height:12px; border-radius:50%; background:#ef4444; box-shadow:0 0 6px #ef444488;"></div>
      <span style="font-size:15px; font-weight:700; color:#1e293b;">Blocked</span>
    </div>
    <div style="margin-top:8px; font-size:13px; color:#64748b;">Waiting on vendor API access</div>
  </div>

</div>

To update a status: change #22c55e → #f59e0b → #ef4444 on both the dot color and the card background/border colors, and update the label and note text.

Component 2 — Progress Bars

Visual progress indicators for each initiative. The percentage is shown as a filled bar with a label.

<div style="font-family:sans-serif; max-width:560px;">

  <div style="margin-bottom:18px;">
    <div style="display:flex; justify-content:space-between; margin-bottom:6px;">
      <span style="font-size:14px; font-weight:600; color:#1e293b;">Backend API</span>
      <span style="font-size:14px; font-weight:700; color:#6366f1;">75%</span>
    </div>
    <div style="background:#e2e8f0; border-radius:99px; height:8px;">
      <div style="background:#6366f1; width:75%; height:8px; border-radius:99px;"></div>
    </div>
  </div>

  <div style="margin-bottom:18px;">
    <div style="display:flex; justify-content:space-between; margin-bottom:6px;">
      <span style="font-size:14px; font-weight:600; color:#1e293b;">Mobile App</span>
      <span style="font-size:14px; font-weight:700; color:#f59e0b;">48%</span>
    </div>
    <div style="background:#e2e8f0; border-radius:99px; height:8px;">
      <div style="background:#f59e0b; width:48%; height:8px; border-radius:99px;"></div>
    </div>
  </div>

  <div style="margin-bottom:18px;">
    <div style="display:flex; justify-content:space-between; margin-bottom:6px;">
      <span style="font-size:14px; font-weight:600; color:#1e293b;">Integrations</span>
      <span style="font-size:14px; font-weight:700; color:#ef4444;">20%</span>
    </div>
    <div style="background:#e2e8f0; border-radius:99px; height:8px;">
      <div style="background:#ef4444; width:20%; height:8px; border-radius:99px;"></div>
    </div>
  </div>

</div>

To update: change the width percentage on the filled div and the number in the label. Match the bar color to the RAG status from Component 1.

Component 3 — Milestone Countdown

A JavaScript countdown to the next key date.

<div style="font-family:sans-serif; display:inline-flex; align-items:center; gap:24px; padding:20px 28px; background:#f8fafc; border:1px solid #e2e8f0; border-radius:14px;">
  <div>
    <div style="font-size:12px; font-weight:600; text-transform:uppercase; letter-spacing:0.08em; color:#64748b; margin-bottom:4px;">Launch Date</div>
    <div style="font-size:14px; color:#1e293b; font-weight:500;">August 15, 2026</div>
  </div>
  <div style="display:flex; gap:16px; text-align:center;">
    <div>
      <div id="cd-days" style="font-size:40px; font-weight:800; color:#1e293b; line-height:1;">--</div>
      <div style="font-size:11px; color:#94a3b8; text-transform:uppercase; letter-spacing:0.06em; margin-top:3px;">Days</div>
    </div>
    <div style="font-size:32px; color:#e2e8f0; font-weight:300; padding-top:4px;">:</div>
    <div>
      <div id="cd-hours" style="font-size:40px; font-weight:800; color:#1e293b; line-height:1;">--</div>
      <div style="font-size:11px; color:#94a3b8; text-transform:uppercase; letter-spacing:0.06em; margin-top:3px;">Hours</div>
    </div>
  </div>
</div>

<script>
  var target = new Date("2026-08-15T09:00:00");
  function tick() {
    var diff = target - new Date();
    if (diff <= 0) {
      document.getElementById("cd-days").textContent = "0";
      document.getElementById("cd-hours").textContent = "0";
      return;
    }
    document.getElementById("cd-days").textContent = Math.floor(diff / 86400000);
    document.getElementById("cd-hours").textContent = Math.floor((diff % 86400000) / 3600000);
  }
  tick();
  setInterval(tick, 60000);
</script>

Change the date string in new Date("2026-08-15T09:00:00") to your actual milestone date.

Component 4 — Metric Tiles

Key numbers at a glance — open issues, completed stories, team size, or any other project metric.

<div style="display:flex; gap:16px; flex-wrap:wrap; font-family:sans-serif;">

  <div style="flex:1; min-width:140px; padding:20px; border-radius:12px; background:#fff; border:1px solid #e2e8f0; text-align:center;">
    <div style="font-size:36px; font-weight:800; color:#6366f1;">34</div>
    <div style="font-size:13px; color:#64748b; margin-top:4px;">Issues Closed</div>
  </div>

  <div style="flex:1; min-width:140px; padding:20px; border-radius:12px; background:#fff; border:1px solid #e2e8f0; text-align:center;">
    <div style="font-size:36px; font-weight:800; color:#22c55e;">12</div>
    <div style="font-size:13px; color:#64748b; margin-top:4px;">Open Bugs</div>
  </div>

  <div style="flex:1; min-width:140px; padding:20px; border-radius:12px; background:#fff; border:1px solid #e2e8f0; text-align:center;">
    <div style="font-size:36px; font-weight:800; color:#f59e0b;">3</div>
    <div style="font-size:13px; color:#64748b; margin-top:4px;">Blocked Items</div>
  </div>

  <div style="flex:1; min-width:140px; padding:20px; border-radius:12px; background:#fff; border:1px solid #e2e8f0; text-align:center;">
    <div style="font-size:36px; font-weight:800; color:#1e293b;">8</div>
    <div style="font-size:13px; color:#64748b; margin-top:4px;">Team Members</div>
  </div>

</div>

To update: change the number inside the large div and the label below it. Update the color to reflect the health of the metric if relevant (green for good, amber for concerning, red for problem).

Putting It Together

On the Confluence page, add four HTML Macro blocks stacked vertically:

RAG Status Cards at the top
Metric Tiles below
Progress Bars in the middle
Milestone Countdown at the bottom

Add a native Confluence "Last Updated" text or use the @date mention to timestamp the page. This tells readers whether the data is current.

Weekly update workflow: At the start of each week, open the page, click Edit, and update the RAG color/label in each card, the progress bar percentages, and the metric numbers. It takes 5–10 minutes and the page communicates project health clearly to anyone who opens it.

Install HTML Macro for Confluence — free on the Atlassian Marketplace

Jira Reporting for Product Managers: Charts, Metrics, and Dashboards

Yamuno — Tue, 14 Jul 2026 10:00:30 +0000

Jira Reporting for Product Managers: Charts, Metrics, and Dashboards

Product managers and engineering teams look at the same Jira data and need completely different things from it. Engineering wants sprint health, cycle time, and blocked issue counts. Product management wants feature progress, release readiness, customer-reported bug trends, and backlog composition.

Most Jira dashboards are set up by or for engineering teams. If you're a PM who has tried to get useful reporting out of Jira and ended up with a page full of gadgets that don't answer your actual questions, this guide is for you.

The Four Questions a PM Dashboard Should Answer

Before picking any chart, start with the questions:

What's the state of the current release? — Feature completion, open bugs, scope changes
What's the trend for customer-reported issues? — Bug volume over time, resolution rate
What does the backlog look like? — Priority distribution, backlog by product area
What shipped recently? — Completed features, closed bugs, release notes fodder

If your dashboard can answer these four questions without anyone opening a filter or running a query, it's doing its job.

Chart 1 — Release Progress Bar

The question: How far along are we in the current release?

Setup:

Chart type: Bar (stacked)
Filter: fixVersion = "Your Release Name"
Group by: Status
Show: To Do, In Progress, In Review, Done as stacked segments

A stacked bar with one bar showing all four statuses tells you at a glance: how much is done, how much is in flight, and how much hasn't started. When the Done segment is 80%+ of the bar with a week left in the release, you're in good shape. When To Do still represents 40% with the release date looming, you have a scope problem.

JQL filter:

project = YOURPROJECT AND fixVersion = "v2.4" AND issueType in (Story, Bug, Task)

Chart 2 — Customer-Reported Bug Trend

The question: Is the volume of customer-reported bugs stable, increasing, or decreasing?

Setup:

Chart type: Line
Filter: label = "customer-reported" (or however your team tags customer bugs)
X-axis: Week or month
Y-axis: Issue count created in that period

This chart is most useful over a 90-day window. A stable horizontal line means your product quality is consistent. An upward trend after a release means the release introduced regressions. A downward trend is good news — though confirm it's not just a drop in reporting.

If your team doesn't use a consistent label for customer-reported issues, this is the right time to establish one. The reporting value is significant.

Chart 3 — Feature vs. Bug Ratio in the Backlog

The question: Is the backlog dominated by one type of work?

Setup:

Chart type: Pie or donut
Filter: Open issues in the project
Group by: Issue type

For a product team, the ideal ratio depends on the product maturity stage. A new product might be 80% features and 20% bugs. A mature product with a large install base might be 50/50. What you're watching for is a trend — if the bug proportion grows every quarter, quality investment is falling behind.

This is also useful for product strategy conversations: when engineering says they need a "bug bash sprint," this chart gives you the data to support (or challenge) the request.

Chart 4 — Backlog by Priority

The question: How much of the backlog is urgent?

Setup:

Chart type: Bar (horizontal)
Filter: Open issues in backlog
Group by: Priority

A priority bar chart shows how the backlog breaks down by Critical, High, Medium, and Low. The ratio matters: a backlog that's 30% Critical and 40% High is telling you that your priority labels have inflated to the point of meaninglessness, or that there's genuinely too much urgent work and the team can't keep up.

Review this chart before each quarterly planning cycle. If the High bar keeps growing despite the team working on High-priority issues, capacity is mismatched with demand.

Chart 5 — Completed Work by Area

The question: What shipped this quarter, and in which product areas?

Setup:

Chart type: Bar
Filter: status = Done AND updated >= -90d
Group by: Label (product area labels) or Component

This chart is a retrospective view of where the team's output went. If you have labels for product areas ("auth," "billing," "reporting," "mobile"), a bar chart of completed issues by label shows what got attention. It's a useful starting point for "was this the quarter we said we'd focus on X?" conversations.

Also useful for release notes compilation — filter to the release's fixVersion and group by issue type to see what categories of work shipped in that release.

Setting Up the PM Dashboard

Create a dedicated Jira dashboard for product management. Don't share the sprint team's dashboard — the audiences and refresh cadences are different.

Recommended layout — three columns:

Left column	Center column	Right column
Release progress (bar)	Customer bug trend (line)	Backlog by priority (bar)
Feature vs. bug ratio (pie)	Completed by area (bar)	(empty or a filter results table)

Add a date range selector at the top if Charts for Jira supports a shared filter — change the range and both time-based charts update together.

Share it: Add the Confluence team, the engineering manager, and any design leads as viewers. A shared dashboard replaces the "can you pull the Jira report for the leadership update?" request with a link they can check themselves.

What Good Jira Reporting Looks Like

The sign that your dashboard is working: you open it in a meeting, look at it for 30 seconds, and can answer questions from it without typing a single JQL query. If you're still exporting to spreadsheet to get the answer you need, the dashboard isn't answering the right questions yet.

Start with the release progress chart and the bug trend. Those two alone are more valuable than most Jira dashboards that have eight gadgets.

Install Charts for Jira Dashboard →

How to Add a Cover Page to Confluence PDF Exports

Yamuno — Wed, 08 Jul 2026 10:21:04 +0000

How to Add a Cover Page to Confluence PDF Exports

Confluence's built-in PDF export produces the page content and nothing else. No title page, no table of contents, no company logo — just the raw content starting at the top of page one. For internal drafts that's workable. For anything going to a client, a stakeholder, or an external auditor, a document that starts abruptly with content and no cover page looks unfinished.

PDF Exporter for Confluence adds a cover page option with six built-in styles, full branding control, and a live preview so you can see exactly how the cover looks before exporting.

This guide covers how to set it up.

Prerequisites

Install PDF Exporter for Confluence from the Atlassian Marketplace. Cover page configuration is done through the template system, which requires Confluence admin access.

Step 1 — Open the Template Editor

Go to Confluence Settings (gear icon, top-right)
In the left sidebar, click PDF Exporter
Click Templates
Either create a New Template or click the edit (pencil) icon on an existing one

Step 2 — Enable the Cover Page

In the template editor, find the Cover Page section and toggle it to enabled.

Once enabled, the cover page configuration expands to show:

Cover style selector
Accent color picker
Subtitle field
Author field
Logo upload

A live preview on the right side of the editor updates as you make changes.

Step 3 — Choose a Cover Style

Six built-in styles are available:

Style	Best for
Classic	General-purpose documents, internal wikis
Corporate	Client-facing deliverables, formal proposals
Modern	Product documentation, technical guides
Executive	Board reports, executive summaries
Bold	Internal team reports, product launches
Minimal	When you only need the title with no decoration

Click through the styles in the selector — the preview updates immediately so you can compare them without saving.

Recommendation for client-facing documents: Corporate or Executive. Both have a restrained, professional look that works across industries. Avoid Bold for external documents — it's visually strong but can feel informal in a business context.

Step 4 — Set the Accent Color

The accent color controls the decorative elements on the cover: the color bar in Corporate style, the accent line in Executive style, the overlay block in Modern style, and so on.

Click the color field and enter your hex value. Use your company's primary brand color.

If you don't have a specific brand color, #1e40af (dark blue) or #1d4ed8 (medium blue) works well for most professional contexts. Avoid very light colors — they disappear against a white background on some cover styles.

Step 5 — Add Your Logo

Click Upload Logo and select your company logo (PNG, JPG, or SVG). The logo appears on the cover page alongside the document title.

Logo tips:

Use a horizontal logo variant if available — it fits better in most cover layouts
PNG with a transparent background looks cleanest against the cover page background
SVG scales perfectly at any size

The logo is stored per template, so you upload it once and it appears on every export using this template.

Step 6 — Configure Subtitle and Author

Subtitle: Optional text displayed below the document title. Use this for:

Version numbers ("Version 2.3 — April 2026")
Confidentiality notice ("Confidential — Not for External Distribution")
Document type ("Technical Specification")

Author: Optional name displayed on the cover. For team-produced documents, use a team or department name ("Solutions Engineering," "Product Team") rather than an individual's name — it ages better and is more appropriate for documents that will be revised over time.

Step 7 — Save and Test

Click Save. The template is now available to all users on the instance.

To test it:

Open any Confluence page
Click ••• → Export to PDF
Select your template from the dropdown
Click Preview (don't export yet — preview first)
Check the cover page in the preview modal

The preview shows the actual cover with your logo, accent color, and the Confluence page title as the document title. If anything looks off — logo too large, color doesn't match, subtitle missing — go back to the template and adjust.

How the Cover Page Interacts with the Rest of the PDF

The cover page is always the first page. It does not count in page numbering — if you have page numbers enabled, they start from "1" on the first content page after the cover.

If you also have a table of contents enabled, it appears after the cover page and before the content — the standard structure for a professional document.

[Cover Page]
[Table of Contents]  ← if enabled
[Content Pages]      ← page numbers start here

Exporting Without a Cover Page (When Needed)

Sometimes you want a clean export without a cover — a raw content dump for internal review, or a quick single-page export that doesn't need a title page.

The easiest approach is to keep a second "No Cover" template (or use the built-in Default template) for these cases. Users select the right template at export time based on what the document needs.

Install PDF Exporter for Confluence →

Read the documentation →

How to Migrate from Notion to Confluence (Step-by-Step Guide)

Yamuno — Fri, 03 Jul 2026 10:38:34 +0000

How to Migrate from Notion to Confluence

Teams migrate from Notion to Confluence for different reasons — Atlassian ecosystem consolidation, enterprise SSO requirements, tighter Jira integration, or simply an organizational decision after a company merger. Whatever the reason, the migration path is more practical than it looks.

Notion exports your content as markdown (or HTML). Confluence can import markdown. The gap between those two facts is what this guide covers: what the export gives you, what needs cleanup, and how to get everything into Confluence cleanly.

Step 1 — Export Your Notion Workspace to Markdown

In Notion:

Open Settings & Members → Settings
Click Export all workspace content
Choose Markdown & CSV as the export format
Enable Include subpages and Create folders for subpages
Click Export and download the ZIP

The export produces a ZIP with:

One .md file per Notion page
Subpages nested in folders matching the page hierarchy
Images saved as local files (usually in a folder alongside each page)
Database tables exported as .csv files

Step 2 — Understand What Transfers Well and What Doesn't

Transfers cleanly:

Text content, headings, paragraphs
Bold, italic, inline code
Bulleted and numbered lists
Code blocks with language tags
Images (as embedded files)
Basic tables

Needs manual attention:

Notion databases — exported as CSV, not as Confluence pages. Plan to recreate these as Confluence tables or use a Jira integration for structured data
Toggle blocks — exported as regular text; the expand/collapse behavior is lost
Notion-specific embeds (YouTube, Figma, etc.) — exported as plain URLs, not embedded. You'll need to re-embed them in Confluence
Linked databases and relations — not preserved in markdown export
Comments and mentions — not included in the export

For a large workspace, do a test export and import of a small section first to understand what the output looks like for your specific content before committing to a full migration.

Step 3 — Clean Up the Exported Markdown

Before importing, a few cleanup steps save time:

Remove Notion IDs from filenames. Notion appends a unique ID to every file and folder name (e.g., Engineering Wiki a3f2c1b4d5e6.md). You can strip these with a script or a bulk rename tool. The Markdown Importer uses the filename as the Confluence page title, so cleaner names give you cleaner page titles.

# macOS/Linux — remove Notion IDs from .md filenames
for f in *.md; do
  newname=$(echo "$f" | sed 's/ [a-f0-9]\{32\}\.md$/.md/')
  [ "$f" != "$newname" ] && mv "$f" "$newname"
done

Convert CSV databases to markdown tables. For Notion databases that you want in Confluence as pages (not Jira issues), convert the CSV to a markdown table:

# Quick CSV to markdown table conversion (Python)
python3 -c "
rows = list(csv.reader(open(sys.argv[1])))
print('| ' + ' | '.join(rows[0]) + ' |')
print('| ' + ' | '.join(['---'] * len(rows[0])) + ' |')
for row in rows[1:]:
    print('| ' + ' | '.join(row) + ' |')
" your-database.csv

Organize the folder structure. Notion's export mirrors its page hierarchy as nested folders. Review the structure and reorganize if needed — the folder structure becomes the Confluence page hierarchy.

Step 4 — Import into Confluence

Install Markdown Importer for Confluence from the Atlassian Marketplace.

For a small migration (up to 20–30 pages):

Open the target Confluence page (where the imported pages should live)
Click ••• → Markdown Importer & Exporter
Select your cleaned-up markdown files or the ZIP archive
Enable Page Hierarchy to preserve folder structure as Confluence parent/child pages
Click Import

For a large migration:

Use the ZIP upload option. Zip your cleaned-up Notion export folder (after stripping IDs and reorganizing) and upload it as a single archive. The importer processes the entire folder tree and creates the Confluence page hierarchy in one operation.

If you're migrating multiple Notion workspaces or sections to different Confluence spaces, you can target different parent pages and spaces in separate import operations.

Step 5 — Handle Images

Notion's markdown export embeds images as relative file paths:

![Screenshot](./Screenshot_2025-03-14.png)

Markdown Importer reads the ZIP archive and uploads images as Confluence attachments, replacing the relative paths with Confluence attachment references automatically. This works when you import via ZIP — the images need to be inside the ZIP alongside the markdown files.

If you're importing individual .md files without a ZIP, images won't transfer automatically — you'll need to upload them to Confluence and update the image references manually.

Step 6 — Post-Import Cleanup

After the import, walk through the imported pages:

Check page titles. The importer uses filenames as titles. If you missed some Notion IDs in the cleanup step, some pages will have IDs in their titles — rename them in Confluence.

Re-embed external content. Notion embeds for YouTube, Figma, Loom, or other services come through as plain URLs. Add Confluence macros or HTML Macro embeds to restore the embedded experience where it matters.

Review tables. Notion tables with select, multi-select, or date columns export as text — the structured data type is lost. Verify these look reasonable in Confluence or recreate them using Confluence's table macro.

Update internal links. Links between Notion pages are relative paths in the export and may not resolve correctly after import. Run a search in Confluence for notion.so URLs to find any that were hardcoded, and update them to Confluence page links.

What to Expect at Scale

For a workspace with 200–500 pages, the full migration — export, cleanup, import — typically takes a day of dedicated effort. Larger workspaces benefit from dividing the work by Notion workspace section and importing incrementally rather than all at once.

The most time-consuming part is usually the post-import cleanup: reviewing imported pages, fixing database content, and re-embedding media. Budget more time for this than for the import itself.

Install Markdown Importer for Confluence →

Read the documentation →

How to Track Jira Issues with Charts and Graphs

Yamuno — Tue, 30 Jun 2026 11:11:57 +0000

How to Track Jira Issues with Charts and Graphs

Jira stores detailed data about every issue — status, assignee, priority, type, labels, sprint, creation date, resolution date. The challenge isn't getting the data into Jira. It's getting anything useful out of it without building a spreadsheet report from scratch every week.

This guide covers the most practical chart setups for tracking Jira issues — what to visualize, how to configure it, and what to look for in the output.

Getting Started

Charts - Reports and Graphs for Jira Dashboard adds chart gadgets to Jira dashboards. Install it from the Atlassian Marketplace, then add a gadget to any Jira dashboard by clicking Add gadget → Charts for Jira Dashboard.

Each gadget is configured independently — choose the chart type, data source (project, JQL query, or label filter), grouping, and visual options.

1. Status Distribution — Where Is Everything Right Now?

The most immediate question for any sprint or project is: how many issues are in each status?

Chart type: Bar (horizontal)
Group by: Status
Filter: Current sprint or open issues in the project

A horizontal bar chart with one bar per status — To Do, In Progress, In Review, Done — gives you the snapshot at a glance. When "In Review" is twice as wide as "In Progress," you know reviews are backing up.

For a kanban team without sprints, filter to "all open issues" and group by status. The relative bar lengths show your work in progress distribution and immediately reveal if one column is accumulating more than expected.

2. Assignee Workload — Is Work Distributed Evenly?

Chart type: Bar (vertical or horizontal)
Group by: Assignee
Filter: Open issues in current sprint or project

This chart answers the question that comes up in every sprint planning meeting: is the work actually balanced? One bar per team member, height representing open issue count.

The useful insight isn't just the current distribution — it's the pattern over multiple sprints. If the same one or two people consistently have the highest bars, that's a structural problem worth addressing, not a one-sprint anomaly.

Refinement: Add a second dataset for "In Progress" issues only (by adding a JQL filter status = "In Progress"). Now you can see not just who has the most assigned, but who is actively working on the most issues simultaneously — which is a better signal for overload.

3. Priority Breakdown — Where Are the Critical Issues?

Chart type: Pie or bar
Group by: Priority
Filter: Open issues in the project

A priority pie chart shows the proportion of Critical, High, Medium, and Low issues in your backlog. This is most useful for bug tracking and escalation management.

If you're watching this chart over time (check it at the start of each sprint), a growing "Critical" slice is an early warning sign that something in your triage process or product isn't working. A shrinking "High" slice alongside increasing "Critical" might mean labels are being inflated.

Practical use: Share this chart in your sprint retrospective. If the team sees that 40% of issues tagged Critical are consistently de-prioritized, the label is losing meaning — worth a conversation.

4. Issue Type Distribution — What Kind of Work Are We Doing?

Chart type: Pie or donut
Group by: Issue type
Filter: Issues created in the last 30 days, or current sprint

Jira issue types (Bug, Feature, Task, Story, Spike, Tech Debt) tell you the composition of what the team is actually working on. If your roadmap says "feature development sprint" but the chart shows 60% bugs, you have a planning alignment issue.

This chart is most useful at the project or team level, not the sprint level — one sprint's composition can be an anomaly. The 30-day or 90-day view shows the actual pattern.

5. Sprint Progress — Are We on Track to Complete?

Chart type: Bar (grouped or stacked)
Group by: Status
Filter: Current sprint

A grouped bar chart with two bars — "Completed" and "Remaining" — is a straightforward sprint progress view. Set it up at sprint start and check it mid-sprint. The relative bar heights tell you immediately whether you're ahead, on track, or behind.

For a more nuanced view, use a stacked bar grouped by status: a single bar per sprint with segments for To Do, In Progress, In Review, and Done. This shows not just completed vs. remaining, but where the remaining work is sitting.

JQL for current sprint:

project = YOURPROJECT AND sprint in openSprints()

6. Label-Based Tracking — Custom Dimensions

Jira labels are underused for reporting. If your team uses consistent labels — "customer-request," "regression," "tech-debt," "blocked" — you can build charts that filter to those labels.

Example: A bar chart filtered to label = "customer-request" grouped by status shows how many customer-requested issues are open vs. in progress vs. done. This is the chart that goes in a customer success update without you needing to manually compile a list.

Example: A count of label = "blocked" issues over time (if you're logging blocked state via label) reveals whether your impediment rate is stable or trending up.

Building a Dashboard Around These Charts

A practical dashboard for a sprint team: three gadgets on one board.

Gadget	Chart	Data
1	Status distribution (bar)	Current sprint issues
2	Assignee workload (bar)	Open issues, current sprint
3	Priority breakdown (pie)	Open bugs in the project

That's enough to run a 15-minute sprint check-in without opening any Jira filters. Everyone looks at the same charts, asks questions from the same data, and the meeting moves faster.

Add a date filter at the top of the dashboard and make it the single control that drives all three gadgets. When stakeholders ask "what did we do last month," you change the date range and the answer is visible immediately.

Install Charts for Jira Dashboard →

Exporting Confluence Documentation for Clients: A Practical Guide

Yamuno — Wed, 24 Jun 2026 10:52:41 +0000

Exporting Confluence Documentation for Clients

Most Confluence documentation is written for internal audiences — people who have access to the instance and can navigate the space directly. But plenty of documentation ends up going to people who don't have Confluence access: clients receiving a project handover, stakeholders reviewing a technical spec, partners getting onboarded, or auditors requesting documentation exports.

Confluence's built-in PDF export exists, but it produces bare output: no cover page, no custom headers, no watermarks, and no way to save a consistent format so the next export looks like this one. For internal drafts that's fine. For a client deliverable, it's not.

This guide covers how to export professional, consistently formatted PDFs from Confluence for external distribution using PDF Exporter for Confluence.

The Setup: Admin Creates a Template, Users Apply It

The key to consistent output across a team is templates. An admin creates a "Client Deliverable" template once in Confluence Settings. After that, any team member exporting for a client selects that template and gets the same cover page, header, and formatting — without touching any configuration themselves.

Admin step (one time):

Go to Confluence Settings → PDF Exporter → Templates → New Template
Name it "Client Deliverable"
Configure it as described below
Save

User step (every export):

Open the Confluence page or parent page to export
••• → Export to PDF
Select "Client Deliverable" template
Choose scope (single page, page tree, or space)
Export and download

Recommended Template Settings for Client-Facing PDFs

Cover Page

Enable the cover page. For client deliverables, Corporate or Executive style works best:

Corporate — left-aligned with a solid color accent bar, professional and structured
Executive — minimal with a thin accent line, suits formal proposals and executive-level documents

Set the accent color to your company's primary brand color (hex). Upload your company logo. Add a subtitle field — "Prepared for [Client Name]" or "Confidential — [Date]" — as a manual step per export.

Header

Enable the header with your company name or document series title, centered. This appears on every content page and reinforces the source of the document even when pages are printed individually.

Footer

Add page numbers (right-aligned) and a confidentiality notice (left-aligned):

Confidential — [Company Name]                                       Page 1 of 10

This combination is standard for client-facing documentation in most professional services contexts.

Watermark

For documents that are drafts or under review, enable the watermark with "DRAFT" at 0.15 opacity. Remove it from the template (or create a separate "Client Draft" template) when the document is final.

Enable for any multi-page export. Set depth to 2 (H1 and H2). This is especially important for handover packages and technical specs where clients need to navigate to specific sections.

Page Breaks

Enable "Break before H1" so each major section starts on a new page. For longer documents, also enable "Break before H2."

Common Export Scenarios

Project Handover Package

A handover package typically spans multiple Confluence pages — architecture overview, runbooks, configuration guides, contact lists. Export the entire section as a page tree:

Navigate to the parent page of the handover section
••• → Export to PDF
Select the page tree — uncheck any internal-only pages you don't want in the client copy
Select "Client Deliverable" template
Export — downloads as a ZIP with each section as a separate PDF

Alternatively, if you want a single combined PDF, check all pages under one parent. The exporter bundles them in page tree order.

Technical Specification

A single-page export is appropriate for a spec document or proposal:

Open the spec page
••• → Export to PDF
Select "Client Deliverable" template
Export — single PDF download

If the spec has an H1-level structure with multiple major sections, the table of contents and page breaks make it easy to navigate without Confluence access.

Compliance Documentation Export

For regulatory submissions or audit requests, use a separate "Compliance Archive" template with:

Executive cover style
Watermark: "ARCHIVED" or "CONFIDENTIAL" at 0.2 opacity
Footer: department name and export date
No table of contents unless required by the submission format

Create this template with watermark enabled by default so it's never accidentally omitted on a compliance export.

Recurring Status Report

If you export a weekly or monthly status report page to send to a client, the template eliminates the manual formatting step entirely. Update the Confluence page with new content, export with the "Client Deliverable" template, and the output is ready to send. The cover page, header, and formatting are consistent every time without any effort.

Space Export for Full Documentation Sets

For clients receiving a complete documentation set (e.g., a full product documentation space), use the space export:

From the global Apps menu, open PDF Exporter for Confluence
The page tree for the current space is displayed
Select all pages or deselect internal-only pages
Apply the template
Export — downloads as a ZIP of PDFs matching the space hierarchy

This is useful for project completion handovers, vendor certifications, or any situation where the client needs a complete copy of a documentation space they won't have ongoing access to.

Before You Send

Before the PDF goes to the client:

Use the Preview option in the exporter to verify the cover page, header, and first few pages look correct
Check that the subtitle on the cover page reflects the correct client name or document version
Confirm the watermark is absent if the document is final (or present if it's still a draft)
Open the downloaded PDF to verify the table of contents links work and the page numbering is correct

The preview step takes 30 seconds and catches the issues — wrong accent color, missing logo, leftover watermark — that would otherwise be visible to the client.

Install PDF Exporter for Confluence →

Read the documentation →

How to Manage Confluence Attachments at Scale

Yamuno — Sat, 20 Jun 2026 10:34:44 +0000

How to Manage Confluence Attachments at Scale

Confluence storage fills up in a predictable way. Teams upload screenshots, export files, and old versions of diagrams. Pages get reorganized or deleted. The attachments stay. After a year or two, a significant portion of your Confluence storage is files that are no longer referenced by any page — orphaned attachments that cost storage budget without serving any purpose.

Cleaning this up manually is impractical at any scale. This guide covers how to audit and manage Confluence attachments systematically using Advanced Attachment Manager for Confluence.

The Core Problem: Unused Attachments

An unused attachment is a file that was uploaded to Confluence but is no longer referenced anywhere in page content. This happens when:

A page is deleted but its attachments remain
An image is uploaded, replaced by a newer version, and the old version is left
A file is attached to a page during a draft but never embedded in the final content
Content is migrated from one space to another and the source attachments are left behind

Confluence's native attachment view shows you files per page. It doesn't have a cross-space view, doesn't flag unused files, and doesn't support bulk operations. Advanced Attachment Manager does.

Step 1 — Find Unused Attachments

Open Advanced Attachment Manager from the Confluence global navigation: Apps → Advanced Attachment Manager.

The first filter to apply: Usage Status → Unused. This surfaces every attachment in the selected scope (page, space, or instance-wide) that isn't currently referenced by any page content.

For most Confluence instances that haven't been audited recently, this list is longer than expected. Sort by File Size (descending) to see the biggest storage consumers first — a handful of large video files or exported PDFs often account for a disproportionate share.

Step 2 — Filter Down to What's Safe to Delete

Not every unused attachment should be deleted. Some are referenced in archived pages. Some are version history that someone may need to reference. Apply additional filters to narrow to what's clearly safe:

Filter by file type: Images and exported PDFs are the most common orphans. Filter to Images or Documents to work through the most common cases first.

Filter by upload date: Files uploaded more than 12 months ago and never used are strong candidates for deletion. Set the upload date range to filter out recent uploads.

Filter by uploader: If a departed team member uploaded most of the unused files, filtering by uploader gives you a focused list to review.

Use shift-click and ctrl/cmd-click to select individual files, or Select All after applying filters to select the entire filtered result set.

Step 3 — Download Before Deleting (When Uncertain)

For any batch where you're not 100% confident, use Bulk Download before deleting. This downloads all selected files as a ZIP archive to your local machine.

Bulk Download is also useful for migration and archival purposes — before decommissioning a Confluence space, download all attachments to preserve them outside Confluence.

Step 4 — Bulk Delete

With the files selected:

Click Delete Selected
Review the confirmation dialog — it shows the count and total size being freed
Confirm the deletion

Deletions are logged to the audit trail immediately. If you delete something that turns out to be needed, check the audit log first to confirm what was removed, then check if it can be recovered from Confluence's trash.

Step 5 — Review the Audit Log

Every action taken in Advanced Attachment Manager — views, downloads, deletions — is recorded in the audit log. Access it from the app sidebar.

The audit log shows:

Action type (deleted, downloaded, viewed)
File name and size
Space and page the file was attached to
User who performed the action
Timestamp

This is important for compliance-sensitive environments: you have a complete record of what was removed, by whom, and when.

Scheduling Regular Cleanups

Attachment management is most effective as a recurring process rather than a one-time cleanup. A quarterly cadence works for most teams:

Filter to unused attachments uploaded more than 90 days ago
Sort by size, work through the top 50 by size
Bulk delete the clearly obsolete ones
Download and archive anything uncertain

After two or three cycles, the backlog of orphaned files is small enough that the quarterly review takes 15–20 minutes instead of hours.

Space-Level vs. Instance-Level Audits

Advanced Attachment Manager supports two scopes:

Space-level: Scope the view to a specific Confluence space. Useful for space owners doing routine maintenance on their own space.

Instance-level: Confluence admins can view attachments across the entire instance. This is the right starting point for a storage audit — see total consumption by space, identify which spaces are the biggest consumers, and then drill into each one.

A Note on Storage Recovery

After bulk deletion, Confluence doesn't immediately reclaim storage — deleted files go to Confluence trash first. A Confluence admin needs to empty the trash to release the storage.

Go to Confluence Administration → Trash → Empty Trash. After emptying, the storage reduction is reflected in your instance's storage usage.

Install Advanced Attachment Manager for Confluence →

How to Embed Interactive Charts in Confluence with HTML Macro

Yamuno — Tue, 16 Jun 2026 12:56:22 +0000

How to Embed Interactive Charts in Confluence with HTML Macro

Confluence is where a lot of teams track project status, document KPIs, and share team metrics. But when it comes to actually visualizing that data, the options are limited. You can paste a static image (which goes stale), use a third-party integration (which requires a separate subscription), or accept that your Confluence page just won't have charts.

HTML Macro for Confluence opens a fourth option: embed Chart.js directly inside a Confluence page. The charts are interactive (hover for tooltips, click to toggle series), render instantly, and live alongside your documentation — no external service required.

This guide covers four chart types with copy-paste code for each.

Before You Start

Install HTML Macro for Confluence from the Atlassian Marketplace. It's free and runs on Atlassian Forge.

Security note: The examples below load Chart.js from a CDN (cdn.jsdelivr.net). Your Confluence admin needs to add that domain to the HTML Macro whitelist. Go to Confluence Settings → HTML Macro → Security Settings and add https://cdn.jsdelivr.net to the allowed domains.

Once that's done, add the macro to any Confluence page (Insert → Macro → HTML Macro), paste the code, and use the live preview to verify it before saving.

Bar Chart — Team Metrics or Sprint Data

Good for: comparing values across categories — issues by status, story points per sprint, bugs per team member.

<canvas id="barChart" width="700" height="350"></canvas>
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script>
  new Chart(document.getElementById('barChart'), {
    type: 'bar',
    data: {
      labels: ['To Do', 'In Progress', 'In Review', 'Done'],
      datasets: [{
        label: 'Issues',
        data: [12, 8, 5, 34],
        backgroundColor: ['#94a3b8', '#3b82f6', '#f59e0b', '#22c55e'],
        borderRadius: 6,
      }]
    },
    options: {
      responsive: false,
      plugins: {
        legend: { display: false },
        title: {
          display: true,
          text: 'Issue Status — Sprint 42',
          font: { size: 15, weight: '600' },
          color: '#1e293b',
        }
      },
      scales: {
        y: {
          beginAtZero: true,
          grid: { color: '#f1f5f9' },
          ticks: { color: '#64748b' }
        },
        x: {
          grid: { display: false },
          ticks: { color: '#64748b' }
        }
      }
    }
  });
</script>

Replace the labels and data arrays with your actual values. Each label maps to the corresponding data value by index.

Line Chart — Velocity Trend or Weekly Progress

Good for: showing trends over time — sprint velocity, bug discovery rate, weekly active users, anything with a time axis.

<canvas id="lineChart" width="700" height="350"></canvas>
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script>
  new Chart(document.getElementById('lineChart'), {
    type: 'line',
    data: {
      labels: ['Sprint 37', 'Sprint 38', 'Sprint 39', 'Sprint 40', 'Sprint 41', 'Sprint 42'],
      datasets: [{
        label: 'Story Points Completed',
        data: [41, 38, 45, 52, 49, 55],
        borderColor: '#6366f1',
        backgroundColor: 'rgba(99, 102, 241, 0.08)',
        borderWidth: 2,
        pointBackgroundColor: '#6366f1',
        pointRadius: 4,
        fill: true,
        tension: 0.3,
      }]
    },
    options: {
      responsive: false,
      plugins: {
        legend: { position: 'top' },
        title: {
          display: true,
          text: 'Sprint Velocity — Last 6 Sprints',
          font: { size: 15, weight: '600' },
          color: '#1e293b',
        }
      },
      scales: {
        y: {
          beginAtZero: false,
          grid: { color: '#f1f5f9' },
          ticks: { color: '#64748b' }
        },
        x: {
          grid: { display: false },
          ticks: { color: '#64748b' }
        }
      }
    }
  });
</script>

Pie Chart — Issue Type or Priority Distribution

Good for: showing how a total is distributed — issue types, budget allocation, time spent by category. Keep it to five segments or fewer.

<canvas id="pieChart" width="500" height="400"></canvas>
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script>
  new Chart(document.getElementById('pieChart'), {
    type: 'pie',
    data: {
      labels: ['Bug', 'Feature', 'Task', 'Tech Debt', 'Spike'],
      datasets: [{
        data: [18, 32, 25, 14, 11],
        backgroundColor: [
          '#ef4444',
          '#6366f1',
          '#3b82f6',
          '#f59e0b',
          '#94a3b8',
        ],
        borderWidth: 2,
        borderColor: '#fff',
      }]
    },
    options: {
      responsive: false,
      plugins: {
        legend: { position: 'right' },
        title: {
          display: true,
          text: 'Open Issues by Type',
          font: { size: 15, weight: '600' },
          color: '#1e293b',
        }
      }
    }
  });
</script>

Doughnut Chart — Goal Progress or Completion Status

Good for: showing a single metric against a target — sprint completion, budget consumed, onboarding progress.

<div style="position:relative; width:400px; margin:0 auto;">
  <canvas id="doughnutChart" width="400" height="400"></canvas>
  <div style="position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); text-align:center; font-family:sans-serif;">
    <div style="font-size:36px; font-weight:700; color:#1e293b;">72%</div>
    <div style="font-size:13px; color:#64748b;">Complete</div>
  </div>
</div>
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script>
  new Chart(document.getElementById('doughnutChart'), {
    type: 'doughnut',
    data: {
      datasets: [{
        data: [72, 28],
        backgroundColor: ['#6366f1', '#f1f5f9'],
        borderWidth: 0,
        cutout: '78%',
      }]
    },
    options: {
      responsive: false,
      plugins: {
        legend: { display: false },
        tooltip: { enabled: false },
      }
    }
  });
</script>

Change the 72 and 28 values (they must add to 100) and update the center label to match.

Multi-Dataset Line Chart — Compare Two Teams or Products

When you want to compare two data series on the same time axis:

<canvas id="multiLineChart" width="700" height="350"></canvas>
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script>
  new Chart(document.getElementById('multiLineChart'), {
    type: 'line',
    data: {
      labels: ['Week 1', 'Week 2', 'Week 3', 'Week 4', 'Week 5', 'Week 6'],
      datasets: [
        {
          label: 'Team Alpha',
          data: [12, 19, 15, 22, 18, 25],
          borderColor: '#6366f1',
          backgroundColor: 'transparent',
          borderWidth: 2,
          pointRadius: 4,
          tension: 0.3,
        },
        {
          label: 'Team Beta',
          data: [8, 14, 20, 17, 24, 21],
          borderColor: '#22c55e',
          backgroundColor: 'transparent',
          borderWidth: 2,
          pointRadius: 4,
          tension: 0.3,
        }
      ]
    },
    options: {
      responsive: false,
      plugins: {
        legend: { position: 'top' },
        title: {
          display: true,
          text: 'Weekly Issues Resolved',
          font: { size: 15, weight: '600' },
          color: '#1e293b',
        }
      },
      scales: {
        y: { beginAtZero: true, grid: { color: '#f1f5f9' } },
        x: { grid: { display: false } }
      }
    }
  });
</script>

Tips for Production Use

Hard-code the data for now. Chart.js in Confluence can't call your Jira API or database — the data lives in the HTML. If your metrics change weekly, treat the Confluence page as a weekly snapshot: update the arrays when you update the commentary.

Use width and height attributes directly on <canvas>. Don't rely on responsive: true inside Confluence — the macro iframe has fixed dimensions and responsive sizing can behave unexpectedly.

Each chart needs a unique id. If you put multiple charts on the same page, give each canvas a different id (barChart, lineChart, etc.) to avoid conflicts.

Test in the live preview before saving. HTML Macro's side-by-side preview shows you exactly what Confluence page visitors will see — including CDN scripts loading.

A Note on the CDN Whitelist

Your admin needs to whitelist https://cdn.jsdelivr.net in HTML Macro's security settings for the Chart.js scripts to load. If the charts appear blank, that's the most common cause. Check the browser console for a CSP error and confirm the domain is in the allowlist.

For environments where all external CDNs are blocked, you can paste the minified Chart.js source directly into the <script> tag — it's about 60KB minified, which is manageable.

Install HTML Macro for Confluence — free on the Atlassian Marketplace