Embedding
iframe
Embed a talent tree with a plain HTML iframe — no JavaScript required
The simplest embedding option. No JavaScript, no build step — just an HTML tag.
Embed URL format
https://reallifetalenttree.com/embed/{username}/{slug}
The embed page renders the talent tree without the platform navigation or footer — clean for iframes.
Basic usage
<iframe
src="https://reallifetalenttree.com/embed/your-username/your-tree-slug"
width="100%"
height="600"
style="border:none;"
title="My Talent Tree"
></iframe>
Responsive container
Wrap the iframe in a container to make it fill its parent width at a fixed aspect ratio:
<div style="position:relative; width:100%; padding-bottom:56.25%; height:0; overflow:hidden;">
<iframe
src="https://reallifetalenttree.com/embed/your-username/your-tree-slug"
style="position:absolute; top:0; left:0; width:100%; height:100%; border:none;"
title="My Talent Tree"
></iframe>
</div>
Notes
- The embed page respects the tree's custom colors (background, text color) set in the builder.
- The tree must be published — draft trees return a 404 from the embed URL.
- The
/embed/route hasframe-ancestors: *in its CSP, so it can be embedded from any origin.