How to Embed a Decision Tree in Confluence

Add a live, interactive decision tree to any Confluence page. Your team can run the wizard inline — following troubleshooting steps, completing onboarding flows, or classifying incidents — without leaving their Confluence workspace.

→ Build your decision tree for free

What You Need Before You Start

• A decision tree published on DrawDecisionTree
• A Confluence page where you want the wizard to appear
• The HTML macro enabled in your Confluence space (Cloud only — see Step 2)

If you haven't built your decision tree yet, open the editor and follow the build guide.

Step 1 — Publish Your Decision Tree and Copy the Iframe Code

1. Open your tree in the Build / Edit page
2. Click Share & Embed (top-right)
3. Toggle Publish to make the tree public
4. Copy the Iframe Code — it looks like:

<iframe
  src="https://www.drawdecisiontree.com/embed/wizard/yourname/your-tree"
  width="100%"
  height="500"
  frameborder="0"
  allowfullscreen
></iframe>

Keep this snippet — you'll paste it into the Confluence HTML macro in Step 3.

Step 2 — Enable the HTML Macro (Confluence Cloud Only)

In Confluence Cloud, the HTML macro is disabled by default.

To enable it:

1. Go to Confluence Admin (cog icon, top right)
2. Navigate to Security → Allowlist or Configuration → HTML Macro
3. Enable the HTML macro for your site

This requires Confluence admin permissions. If you're not an admin, request this from your team's Confluence administrator.

On Confluence Data Center, the HTML macro is typically enabled by default.

Step 3 — Add the HTML Macro to Your Confluence Page

1. Open the Confluence page in edit mode
2. Type / to open the macro picker, then search for HTML
3. Select the HTML macro
4. In the macro editor, paste your iframe code
5. Click Save or Preview to see the result

The interactive decision tree wizard will appear embedded in the page. Readers can click through the wizard, answer questions, and see their outcome without leaving Confluence.

Setting the Right Height

The default height="500" works for most trees. Adjust the height in your iframe code to fit the depth of your tree:

Change the height value in the iframe code before pasting into the HTML macro:

<iframe src="..." width="100%" height="600" frameborder="0"></iframe>

Alternative: Using a Third-Party Embed App

If your Confluence instance doesn't support the HTML macro, you can use a Marketplace app:

• Embed by Laut.io — general-purpose iframe embed for Confluence Cloud
• Advanced Iframes — flexible iframe embedding with responsive sizing
• HTML for Confluence — adds HTML macro support if your admin prefers a controlled alternative

Install any of these from the Atlassian Marketplace, then use your DrawDecisionTree embed URL in their respective embed dialogs.

Example: Incident Classification in Confluence

A DevOps team's runbook Confluence space includes an "Incident Response" page. Instead of a nested decision flowchart image, the page embeds a live incident severity classification tree:

<iframe
  src="https://www.drawdecisiontree.com/embed/wizard/drawdecisiontree/incident-severity"
  width="100%"
  height="550"
  frameborder="0"
></iframe>

On-call engineers open the Confluence page during an incident, follow the wizard, and receive a severity classification and response protocol in under 60 seconds — with no need to interpret a static diagram.

Keeping the Tree Up to Date

When you update the decision tree in DrawDecisionTree, the Confluence embed reflects the change immediately — you don't need to update the Confluence page. This makes decision trees significantly easier to maintain than diagrams or tables embedded as static content.

Choosing the Right Embed View

For most Confluence use cases, the wizard view works best — it's focused and requires no interpretation.

Next Steps

• How to embed a decision tree in Notion
• How to embed a decision tree on a website
• Browse the public decision tree directory
• Build your first decision tree