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.

Install the Embeddable Org Chart

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: 

1. From the Settings (gear) menu, choose Apps.
2. On the Apps page, select the All apps tab.  
3. Navigate to the Embeddable Org Chart app in the list.
4. Select Install.
5. On the App details page, select Install.
6. Select Install App to configure the app (see below). 

Configure your Embeddable Org Chart

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:

1. From the Settings (gear) menu, choose Apps.
2. On the Apps page, navigate to the Embeddable Org Chart app in the Installed apps section.
3. Select Configure (gear icon).
4. 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.
   • Highlight Data - Whether to display your ChartHop organization by Department or Team.
   • Filter - Enter a custom filter to further specify the groups of people that display in the embeddable org chart. Learn more.
5. Copy the generated HTML in the HTML Source box. 
6. Paste the HTML onto your webpage to finish embedding your org chart.

Use the Embeddable 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.