> ## Documentation Index
> Fetch the complete documentation index at: https://docs.yamuno.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Quick Start Guide

> Install HTML Macro for Confluence and embed your first HTML widget in minutes

# Quick Start Guide

## Installation

1. Go to the [Atlassian Marketplace](https://marketplace.atlassian.com/apps/1670180315/html-macro-for-confluence-free?hosting=cloud\&tab=overview)
2. Search for **"HTML Macro for Confluence"**
3. Click **"Get it now"** and select your Confluence Cloud instance
4. Complete the installation

## Add the Macro to a Page

1. Open any Confluence page in edit mode
2. Type `/HTML Macro` in the page body
3. Select **"HTML Macro for Confluence"** from the suggestions
4. The editor opens in a side panel

## Write Your First Widget

The editor has three tabs — **HTML**, **CSS**, and **JS**. Write your code across tabs and see the output update in real time on the right.

**Example — a simple styled card:**

```html theme={null}
<div class="card">
  <h2>Hello from HTML Macro!</h2>
  <p>This renders inside Confluence.</p>
</div>
```

```css theme={null}
.card {
  background: #f0f4ff;
  border-left: 4px solid #504DC4;
  padding: 16px 20px;
  border-radius: 6px;
  font-family: sans-serif;
}
h2 { margin: 0 0 8px; color: #1E1B4B; }
p  { margin: 0; color: #444; }
```

5. Click **Save** on the Confluence page — visitors see the rendered output

## Use an External Library

To use a CDN library (e.g. Chart.js):

1. Ask your Confluence admin to whitelist the CDN domain in **Settings → HTML Macro → Security**
2. Include the script tag in your HTML:

```html theme={null}
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<canvas id="myChart"></canvas>
<script>
  new Chart(document.getElementById('myChart'), {
    type: 'bar',
    data: { labels: ['A','B','C'], datasets: [{ data: [10,20,15] }] }
  });
</script>
```

## Next Steps

* [Configure CSP security modes](/html-macro-for-confluence/how-to-and-features/security)
* [Restrict editor access to specific users](/html-macro-for-confluence/how-to-and-features/admin-guide)
* [See all features](/html-macro-for-confluence/how-to-and-features)