Add any Org Chart to your application

Prerequisites

A web site or web application that displays HTML and allows iframe embedding
An account on The Org

Get started

Create a new Embed key

Choose an informative name for your embed key and click “Create”.

Embed keys vs. API keys

Embed keys are designed to be exposed to the public and can be embedded in your application HTML code. API keys are designed to be used in server-side code and should never be exposed to the public.

Create an API Key

Generate the embed url for your iframe or to use a link

The base url for the embed is:


GET https://embed.theorg.com/org-chart

The following query parameters are supported:

Parameter	Description	Required
`domain`	The company’s domain name (e.g. apple.com)	One of `domain` or `linkedInUrl`
`linkedInUrl`	The company’s LinkedIn URL	One of `domain` or `linkedInUrl`
`publicKey`	Your embed key from The Org	`true`

⚠️

In case no org chart is found the status code 404 (Not Found) will be returned.

Guides

Generate the embed code using a company domain

Embed The Org org chart


<iframe
    src="https://embed.theorg.com/org-chart?domain={company_domain}&publicKey={embed_key}"
    width="100%"
    height="500px"
    title="Org Chart"
/>

Handling missing org charts

Due to the nature of iframes it can be challenging to determine if the org chart is present on The Org and create an appropriate fallback for any errors.

One approach is to hide the iframe initially and add a additional javascript snippet. This snippet will request the embed url and determine wheter the iframe should be displayed or not:

Snippet to hide iframes when the org chart is not found


<iframe
    id="myIframe"
    width="100%"
    height="500px"
    style="display: none;"
></iframe>
 
<script>
    const iframe = document.getElementById('myIframe');
    const url = '{insert_embed_url_here}';
 
    fetch(url, { method: 'HEAD' }).then(response => {
        if (response.ok) {
            iframe.src = url;
            iframe.style.display = 'block';
        } else {
            // Include any fallback logic here
        }
    })
    .catch(error => {
        console.log('Fetch error:', error);
    });
</script>