How to Add Organization Chart in Weebly Site?

You may have lot of requirement to display structured content in a tree format in Weebly site. It could be an organization chart or a Sitemap of your site which you want to showcase to the users. Though Weebly does not offer any default apps or elements, you can easily add organization chart in Weebly site.

Related: How to add charts in WordPress site?

Add Organization Chart in Weebly

There are two ways you can add organization chart in Weebly site:

1. Using custom CSS
2. Embed Google chart

We will explain both option in detail.

1. CSS Organization Chart

Below is an example of simple organization chart you can add to a Weebly site with CSS / HTML code.

Features of the CSS Organization Chart

Some of the features of the chart are:

• Move mouse over any box to highlight the structure below that hierarchy.
• You can add any number of hierarchy levels both horizontally and vertically.
• Connectors will be automatically added for all levels of the tree.
• You can customize the color and fonts.
• Link each content box to individual page on your site or link to external site.

How to Add CSS Organization Chart Tree in Weebly Site?

There are three steps in this process:

• Preparing your chart structure and content.
• Adding CSS code (base code reference from thecodeplayer.com)
• Adding HTML code

Step 1 – Preparing Chart Content

The first step is to prepare the structure along with how many levels of hierarchy is needed for you. You also need to have an idea of the font size, colors required for your chart.

Step 2 – CSS Code

If you want to add the chart on one or few pages of your site then add the below CSS code under “Pages > Select the Page > SEO Settings > Header Code“.

If you want to add the chart on many pages then it is recommended to add the CSS code  under “Theme > Edit CSS / HTML > Assets > main.less“. Learn more on how to edit source CSS in Weebly site.

<style type="text/css">
.org-chart ul {
padding-top: 20px; 
position: relative;
transition: all 0.5s;
-webkit-transition: all 0.5s;
-moz-transition: all 0.5s;
}
.org-chart li {
float: left; text-align: center;
list-style-type: none;
position: relative;
padding: 20px 5px 0 5px; 
transition: all 0.5s;
-webkit-transition: all 0.5s;
-moz-transition: all 0.5s;
}
.org-chart li::before, .org-chart li::after{
content: '';
position: absolute; top: 0; right: 50%;
border-top: 1px solid #ccc;
width: 50%; height: 20px;
}
.org-chart li::after{
right: auto; left: 50%;
border-left: 1px solid #ccc;
}
.org-chart li:only-child::after, .org-chart li:only-child::before {
display: none;
}
.org-chart li:only-child{ padding-top: 0;}
.org-chart li:first-child::before, .org-chart li:last-child::after{
border: 0 none;
}
.org-chart li:last-child::before{
border-right: 1px solid #ccc;
border-radius: 0 5px 0 0;
-webkit-border-radius: 0 5px 0 0;
-moz-border-radius: 0 5px 0 0;
}
.org-chart li:first-child::after{
border-radius: 5px 0 0 0;
-webkit-border-radius: 5px 0 0 0;
-moz-border-radius: 5px 0 0 0;
}
.org-chart ul ul::before{
content: '';
position: absolute; top: 0; left: 50%;
border-left: 1px solid #ccc;
width: 0; height: 20px;
}
.org-chart li a{
border: 1px solid #ccc;
padding: 5px 10px;
text-decoration: none;
color: #666;
font-family: arial, verdana, tahoma;
font-size: 11px;
display: inline-block;
border-radius: 5px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
transition: all 0.5s;
-webkit-transition: all 0.5s;
-moz-transition: all 0.5s;
}
.org-chart li a:hover, .org-chart li a:hover+ul li a {
background: #c8e4f8; color: #000; border: 1px solid #94a0b4;
}
.org-chart li a:hover+ul li::after, 
.org-chart li a:hover+ul li::before, 
.org-chart li a:hover+ul::before, 
.org-chart li a:hover+ul ul::before{
border-color: #808080;
}
</style>

Step 3 – Adding HTML

Drag and drop an “Embed Code” element on the page where you want to add the organization chart and add the below code inside the “Embed Code” element.

<div class="org-chart">
<ul><li>
<a href="#">General Manager</a>
<ul><li>
<a href="#">Manager</a>
<ul><li>
<a href="#">Executive</a>
</li></ul></li><li>
<a href="#">Manager</a>
<ul><li>
<a href="#">Executive</a>
</li><li>
<a href="#">Executive</a>
<ul><li>
<a href="#">Employee</a>
</li><li>
<a href="#">Employee</a>
</li><li>
<a href="#">Employee</a>
</li></ul></li><li>
<a href="#">Executive</a>
</li></ul><li>
<a href="#">Manager</a>
<ul><li>
<a href="#">Executive</a>
</li></li></ul></li></ul>
</div>

The chart may not be showing on the Weebly editor, publish your site and then the chart should be looking as shown in the above example. Replace # with the URLs you want to link or just remove the anchor tags if you don’t want to link. You can also customize according to your need by adding more levels, changing the colors, fonts, etc.

Warning: Due to the width of the chart, it may not be fitting in mobile devices. You can hide the chart on mobile devices and show listed text or an image instead.

2. Adding Google Organization Chart

Other simple way is to embed Google chart code to add organization chart in your Weebly site. You can add any number of levels and add links to individual titles. Below is how the Google organizational chart will look like.

Go to Google charts page and copy the code for organization chart. The process of embedding on Weebly site needs to be done in two steps – adding script and adding HTML.

Add Script for Chart

Copy the below script code which is also available in Google Organization chart page.

    <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
    <script type="text/javascript">
      google.charts.load('current', {packages:["orgchart"]});
      google.charts.setOnLoadCallback(drawChart);

      function drawChart() {
        var data = new google.visualization.DataTable();
        data.addColumn('string', 'Name');
        data.addColumn('string', 'Manager');
        data.addColumn('string', 'ToolTip');

        // For each orgchart box, provide the name, manager, and tooltip to show.
        data.addRows([
          [{'v':'Mike', 'f':'Mike<div style="color:red; font-style:italic">President</div>'},
           '', 'The President'],
          [{'v':'Jim', 'f':'Jim<div style="color:red; font-style:italic">Vice President</div>'},
           'Mike', 'VP'],
          ['Alice', 'Mike', ''],
          ['Bob', 'Jim', 'Bob Sponge'],
          ['Carol', 'Bob', '']
        ]);

        // Create the chart.
        var chart = new google.visualization.OrgChart(document.getElementById('chart_div'));
        // Draw the chart, setting the allowHtml option to true for the tooltips.
        chart.draw(data, {'allowHtml':true});
      }
   </script>

You have to paste the script code under footer section of your Weebly page.

• Login to Weebly account and edit the site in which you want to add the chart.
• When you are in Weebly editor, go to “Pages” section and select the page.
• Click on “SEO Settings” option and paste the code in “Footer Code” section.

Adding HTML Code

Add the below HTML code on the page using “Embed Code” element.

<div id="chart_div"></div>

Publish your site to see the chart in action.

Note: Follow the instructions on Google charts page to understand how to customize the chart. Basically each box contains name, manager and tooltip to be displayed on hover and you can add styles and HTML tags using <div> element to any of the box.

Final Words

We hope one of the above methods fit your site’s layout and help you to add organization chart. Remember to adjust the color and other parameters as per your need.