Real Life Talent Tree
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 has frame-ancestors: * in its CSP, so it can be embedded from any origin.

On this page