--- title: Embed your Org Chart on a webpage slug: embed-your-org-chart-on-a-webpage docTags: createdAt: 2022-08-19T19:02:54.000Z --- 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. :::hint{type="warning"} 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. ::: ![](https://api.archbee.com/api/optimize/zxjhb7-DqnuzAP-lru1l3-4EQqbHQQotS_WdhDuf-Qq-20241008-133024.png "Embedded Org Chat Example") # Embedded Org Chart Setup :::hint{type="warning"} This feature is currently in Alpha. Be one of the first customers to try it! Please share any feedback with the ChartHop team. ### How to setup a Alpha Feature 1. Contact [ChartHop support](mailto\:support@charthop.com) or your CSM if you have one. They can activate the feature for you. 2. Read below for setup instructions and context on how the feature will work. ::: To use the embedded org chart: 1. Toggle the feature on withing **Admin > Labs**. 2. Select **Admin** from the left sidebar. 3. On the **Admin** menu, select the** Core Views** page.   4. Navigate to the **Embedded Org Chart **header. 5. Press the **Activate** button to generate an embed code 6. Select **Configure **to setup and preview 7. Use the **Copy** button to copy the embed code and add it to your website. 8. If you have any issues, press "Rotate token" to refresh the embed code. ![](https://api.archbee.com/api/optimize/zxjhb7-DqnuzAP-lru1l3-DLw1TYfVga7oewzOwxUWE-20241008-131558.png) ### Configuring the Embedded Org Chart 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. ![](https://api.archbee.com/api/optimize/zxjhb7-DqnuzAP-lru1l3-H9SvU4iKo3de5u0VeQ9b2-20241008-132020.png) # Legacy 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. Select **Apps & Bundles** from the left sidebar. 2. On the **Apps** page, select the** Availible 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. Select **Apps & Bundles** from the left sidebar. 2. On the **Apps** page, navigate to the **Embeddable Org Chart** app in the **Installed apps** tab. 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](https://docs.charthop.com/departments) or [Team](https://docs.charthop.com/teams). - **Filter** - Enter a custom filter to further specify the groups of people that display in the embeddable org chart. [Learn more.](https://docs.charthop.com/filtering) 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. ![Embeddable org chart preview](https://api.archbee.com/api/optimize/CXAjUAezd9VEEVQBIYmdw/SQ-Nwb4RYmg5bMUUdnZvh_embedorgchart.png) :::hint{type="info"} [Packages](https://www.charthop.com/pricing/)**: **Basic | **Headcount Planning** | **Compensation Reviews** | **Performance** | **Engagement** ::: :::hint{type="info"} ****[Roles:](https://docs.charthop.com/user-roles-and-permissions) Owner | Technical owner :::