Pages 2.0 | Organization Chart Widget

This article details the Organization Chart Widget and how to manage it.

Pages 2.0 refers to the new version of Happeo Pages, released on April 2, 2025. All Happeo accounts created from this date onward use the new page editor by default.

What is the Organization Chart Widget?

The Organization Chart widget is a page widget designed to visually represent and navigate a company's hierarchical structure. It allows users to see the relationships between employees, clearly displaying managers and their respective subordinates.

Organizations can leverage this widget to improve internal communication and streamline onboarding processes. New employees can quickly grasp the company's structure and understand their role within it.

For more information about adding widgets to your page, please see this article.

How to use the Organization Chart Widget

First, navigate to a page with an Organization Chart Widget.

1. Initiate interaction: Begin by clicking on the Organization Chart widget to activate it.
2. Panning: Move around the chart by clicking and dragging your mouse in any direction.
3. Zooming: Adjust the zoom level by scrolling with your mouse wheel or using your touchbar.
4. Expanding/collapsing subordinates: Reveal or hide a manager's subordinates by clicking the arrow icon located next to their name.
5. Ascending the hierarchy: To view a manager's superior, click the upward-pointing arrow located above their name.
6. View profile: Click on a user's name to open their individual profile.

How to display a user’s organization chart

1. Navigate to a page and click the edit icon at the top-right corner.
2. Add an Organization Chart Widget to your page. Learn more.
3. Click the Select user button at the center of the widget.
4. Choose between:
   1. Search for a user – Display a specific user’s organization chart.
   2. Show the visiting user’s profile – Display the visiting user’s organization chart.
5. If you selected “ Search for a user”
   1. Scroll through or type the user’s name in the search bar. You can also search by department or skills.
   2. Click on the user you want to add.
   3. Click Select.

How to manage the Organization Chart Widget

To manage the Organization Chart Widget:

1. Navigate the page group where the widget resides.
2. Click the pencil icon at the top right of the page to open the page editor.
3. Hover your mouse over the widget until it is highlighted in blue, and click on it.
4. Select the settings(gear) icon at the top right of the widget.
5. A new window will open where you can adjust the widget's settings. You can switch between the Configure and Styles tabs to adjust what is displayed and how the content is displayed.

Configure

• Widget header – Add a header to the widget. Once toggled, you can type the widget’s header in the text field that appears above the widget.

Styles

• Background color– Select the background color of the section. The colors available to you will depend on what the system default is and the brand style you are using.
• Padding–Adjust the amount of background visible behind the widget. You can set a value between 0px and 100px. A larger value will show more of the background, making the section header and content appear smaller. A smaller value will minimize the background visibility, making the widget appear larger. Adjust the slider to fine-tune the amount of padding.
• Round corners–Round the corners of the widget between the values 0px and 100px. A larger value will make the widget corners appear rounder, whereas a lower value will make them appear sharper.

More information about widgets

To read more about widgets and how to resize, copy, and delete them, please refer to this article.