Embed your Org Chart on a webpage
You can use the Embeddable Org Chart app to create a public, searchable version of your ChartHop org chart that you embed on any webpage that supports inline frames. For example, you can add your org chart to your company intranet.
Users don't need a ChartHop account to view and interact with an embedded org chart.
The embeddable org chart displays all people, jobs, and groups in your org, but it doesn’t contain a change history, personal contact information, or any sensitive data.
To use the embedded org chart:
- Toggle the feature on withing Admin > Labs.
- Select Admin from the left sidebar.
- On the Admin menu, select the Core Views page.
- Navigate to the Embedded Org Chart header.
- Press the Activate button to generate an embed code
- Select Configure to setup and preview
- Use the Copy button to copy the embed code and add it to your website.
- If you have any issues, press "Rotate token" to refresh the embed code.
To configure the embedded org chart, click the Configure button.
You can configure the:
- Size of the embed: Width and Height in pixels
- Default zoom level
- What data to highlight
- A default filter — Useful if you want to start with a highlight of one department or a subgroup of people.
- A person or job to focus the org chart on initially. (Optional)
Press Preview to see how the configuration would look.
Before you can embed your org chart on a webpage, you need to install the Embeddable Org Chart app from ChartHop to generate your embeddable org chart.
To install the Embeddable Org Chart app:
- Select Apps & Bundles from the left sidebar.
- On the Apps page, select the Availible apps tab.
- Navigate to the Embeddable Org Chart app in the list.
- Select Install.
- On the App details page, select Install.
- Select Install App to configure the app (see below).
You can configure the settings of your embeddable org chart to determine how and what information it displays when it is embedded. For example, you can determine the display size as well as specific information (such as department or team) to highlight within the embeddable org chart.
Once you’re done configuring, you can then paste the generated HTML onto your webpage to embed it.
To configure your embeddable org chart:
- Select Apps & Bundles from the left sidebar.
- On the Apps page, navigate to the Embeddable Org Chart app in the Installed apps tab.
- Select Configure (gear icon).
- Configure the following settings:
- Width - Width of the embeddable org chart (in pixels). Defaults to 800 pixels.
- Height - Height of the embeddable org chart (in pixels). Defaults to 500 pixels.
- Zoom - The default zoom level of the embeddable org chart. Defaults to 0.8.
- Filter - Enter a custom filter to further specify the groups of people that display in the embeddable org chart. Learn more.
- Copy the generated HTML in the HTML Source box.
- Paste the HTML onto your webpage to finish embedding your org chart.
The embeddable org chart is a public-facing version of your ChartHop Org Chart with much of the same functionality.
You have the ability to search by person, job, department, team, or location. You can also zoom, change the orientation of the org chart, and click and expand on different employee nodes to explore and move throughout your organization.
Depending on how the embeddable org chart is configured, each employee node will highlight either the employee’s department or team.
Roles: Owner | Technical owner
