How to Embed a Decision Tree in Your Website
DrawDecisionTree lets you embed fully interactive decision trees into any website, wiki, or documentation portal using a simple iframe code snippet.
→ Build a decision tree to embed
How Embedding Works
Once you've built your decision tree in the editor, click the Embed button in the top right corner. This generates an iframe snippet you can paste into any HTML page.
The embedded tree is fully interactive — users can click through questions and see their outcome, all within your website.
Embed Views
You can choose which view to embed:
Wizard View
A step-by-step guided walkthrough. Users see one question at a time and click answers to progress. Best for end-user facing tools like support guides and product selectors.
Path View
Shows all questions at once with real-time elimination. Users click answers and see outcomes narrow down. Best for analytical or technical audiences.
Tree View
A full tree diagram showing the entire decision structure. Best for documentation and overview purposes.
Where to Use Embedded Decision Trees
- Knowledge bases — Add troubleshooting wizards to your help centre
- Product pages — Help customers find the right product or plan
- Internal wikis — Embed classification guides for team reference
- Documentation — Add interactive examples to technical docs
- Landing pages — Let visitors self-qualify or self-segment
Customization
The embedded decision tree automatically adapts to the width of its container. You can control the iframe dimensions using standard HTML attributes:
<iframe
src="https://www.drawdecisiontree.com/embed/t/drawdecisiontree/incident-severity"
width="100%"
height="600"
frameborder="0">
</iframe>
Programmatic and AI Access
In addition to iframe embedding for human users, every published tree is accessible as machine-readable JSON via the Decision Tree API. This enables a third integration pattern beyond the wizard and iframe: programmatic execution in AI pipelines, automation tools, and backend applications.
GET https://www.drawdecisiontree.com/api/t/{publisher}/{slug}
An AI agent can fetch this endpoint, traverse the DAG against a set of inputs, and receive the outcome code — executing the decision logic without rendering a visual widget at all. This is the pattern used when decision trees serve as the deterministic decision layer in an LLM-based pipeline.
→ Full API reference and code examples
→ How AI agents use decision trees in production
Getting Started
- Build your decision tree in the editor
- Click Embed to generate the snippet
- Copy the iframe code
- Paste it into your website's HTML
DrawDecisionTree vs Competitors for Embedding
When it comes to embedding decision trees, the differences between DrawDecisionTree and alternatives like Lucidchart or Draw.io are significant.
DrawDecisionTree vs Lucidchart Embed
Decision tree generator vs Lucidchart for embedding: Lucidchart allows you to embed diagrams in websites — but the embed is a static image or a non-interactive diagram viewer. Users can see the decision tree but cannot click through it.
DrawDecisionTree's embed produces a fully interactive wizard. Users make selections, and the tool routes them automatically to outcomes. The embedded widget behaves identically to the hosted version — animated transitions, real-time elimination, and full interactivity are all preserved in the embed.
DrawDecisionTree vs Draw.io Embed
Decision tree maker vs Draw.io for embedding: Draw.io can export decision tree diagrams as static images (PNG, SVG) for embedding. Like Lucidchart, the result is a visual reference, not an interactive tool.
DrawDecisionTree's embed is a live decision engine. The distinction matters most in user-facing contexts: a support guide embedded as a static image requires users to read and self-navigate; a DrawDecisionTree embed guides them through the logic automatically.
Plain Text to Decision Tree Feature
One of the key advantages when embedding DrawDecisionTree is the speed from idea to live embed. The ability to instantly draw decision trees from plain text means:
- Write your decision logic in the DSL editor (minutes, not hours)
- Test with the wizard and path view (real-time feedback as you type)
- Click Embed to generate the iframe code
- Paste the snippet into your website
The entire workflow — from first keystroke to live embed on a production website — can be completed in under an hour for a simple decision tree. There is no design handoff, no export-and-upload cycle, and no separate hosting setup.
Where to Use Embedded Decision Trees
Embedded decision trees work in any context where users need structured guidance to reach an outcome:
Knowledge base and help centres: Replace static troubleshooting articles with interactive wizards that ask users what's wrong and guide them to the right resolution.
Product and pricing pages: Guide visitors through a recommendation flow — "Tell us about your needs and we'll suggest the right plan" — embedded directly on the page.
Internal wikis and Confluence pages: Embed classification guides, policy wizards, and eligibility checkers where team members already work.
Documentation portals: Add interactive decision support to technical documentation so developers can quickly determine which API, SDK, or approach is right for their use case.
Onboarding flows: Guide new users or employees through role assignment, access provisioning, and orientation tracks with a step-by-step embedded wizard.
Landing pages: Let prospects self-qualify by running through a product fit assessment before speaking with sales.
E-commerce product selectors: Help customers find the right product from a large catalogue by answering questions about their needs and budget.
Compliance and eligibility checkers: Embed policy decision tools on HR portals, benefits pages, or regulatory guidance sites.
Troubleshooting Embedded Trees
The embed is not showing: Verify that the iframe URL is correct and that the embedding page allows iframes. Some CMS platforms block iframes by default — check your platform's security settings.
The embed is too small or too large: Adjust the width and height attributes on the iframe tag. Use width="100%" for a responsive embed that fills the container width.
The wizard is cut off: Increase the height attribute. Decision trees with many questions may need 600–800px of height to display comfortably without internal scrolling.
The tree is loading a different example: The embed URL includes the tree content or a file reference. If the URL is correct but the wrong tree is showing, verify that the correct tree was active when you generated the embed code.
Users reach the end but see no outcome: This indicates a missing outcome definition in the DSL. Open the editor, check that every answer references a defined outcome or a valid next question, and regenerate the embed.
Advanced Embedding Options
View mode selection: The embed URL can specify which view to show — wizard, path, or tree. Choose the view that best fits the context. Wizard mode is best for guided end-user experiences; path mode is better for technical or analytical audiences.
Responsive sizing: Use width="100%" and set a minimum height to ensure the embed works across screen sizes.
Multiple trees on one page: Each tree has a unique embed URL, so you can embed multiple different decision trees on a single page — for example, a support page with one tree for hardware issues and another for software issues.
Styling the container: Wrap the iframe in a styled container div to add borders, shadows, rounded corners, or background colors that match your site's design:
<div style="border-radius: 12px; overflow: hidden; border: 1px solid #e2e8f0; box-shadow: 0 2px 8px rgba(0,0,0,0.08);">
<iframe
src="https://www.drawdecisiontree.com/embed/t/drawdecisiontree/incident-severity"
width="100%"
height="600"
frameborder="0">
</iframe>
</div>
→ Build your decision tree to embed
→ Browse embeddable trees in the public directory
→ Publish your embedded tree to the directory