If you signed up before Aug 9, 2021, please click Previous plans to view your applicable plans.

To your customers, your support portal comes with three tabs by default - Home, Solutions and Forums. In addition to removing any of them from view  you can come up with ideas to display more information to the users. One of the simplest ways to do this is to add an additional tab on the navigation bar. 



This tab could link to anywhere you want and can be used in different ways. Here are a few examples:
  • Creating a simple link back to your website - for e.g. an About tab taking users to your About page
  • Making a section of your support portal more prominent - for e.g. a News tab leading to your forum's announcements section
  • Anything you would like to showcase to your users on the top of each page. 

Setting it up is pretty easy. Before you proceed, please note that this tweak requires you to be on the Estate plan that comes with layout and page-level customization. You can go ahead try this out if you are on the Freshdesk trial. 

  1. Login to your support portal as an administrator.
  2. Go to the Admin tab, and click on Portals under Support Channels.
  3. Click on the Customize portal button on the right corner of the portal you are interested in customizing.
  4. Open up the Layout and Pages tab.
  5. Make sure you are inside the Portal Layouts section.
  6. Replace the code in the Header with the following (remove it completely and copy-paste from below)
    <header class="banner">
      <div class="banner-wrapper">
        <div class="banner-title">
          {{ portal | logo }}
          <h1 class="ellipsis heading">{{ portal.name }}</h1>
        </div>
        <nav class="banner-nav">
          {{ portal | welcome_navigation }}
        </nav>
      </div>
    </header>
             
    <nav class="page-tabs" >
      {% if portal.tabs.size > 0 %}
        <a data-toggle-dom="#header-tabs" href="#" data-animated="true" class="mobile-icon-nav-menu show-in-mobile"></a>
        <div class="nav-link" id="header-tabs">
          {% for tab in portal.tabs %}
          {% if tab.url %}
            <a href="{{tab.url}}" class="{% if tab.tab_type == portal.current_tab %}{% if  topic.id != forum topic id goes here %}active{% endif %}{% endif %}">
              {{ tab.label }}
            </a>
          {% endif %}
          {% endfor %}
          <a href="forum link goes here" class="{% if  topic.id == forum topic id goes here %}active{% endif %}">name of the tab goes here</a>

    <!-- more tabs go here -->
     
       </div>
      {% endif %}
    </nav>


  7. If you want to link the tab to an internal page in your portal, please make necessary changes to the highlighted sections. In this example, you will have to create a forum topic. You can paste the entire link of the topic into the href attribute. 
  8. Similarly, the topic id is found at the end of the URL, just before the title. Please refer to the following example. 
    https://support.freshdesk.com/solution/categories/71599/folders/142309/articles/83289-adding-a-new-tab
  9. Instead, if you are linking to an external page, you can remove the following code from the anchor tags:
    {% if  topic.id == forum topic id goes here %}active{% endif %}
  10. Similarly, you can add multiple tabs by adding more anchor tags to the code where it says <!-- more tabs go here -->.
  11. Save changes to your settings and click Preview. If there are any errors, please go through your code once again. 
  12. If everything looks okay, hit the Save and Publish button to finalize the changes.

Please note that in this example, we have used forum topics as landing pages for your tabs. You can also use a solution article or a folder here if you need to. In that case, you will have to replace the topic.id placeholders with respect to whatever kind of link you are using. Please refer to the Dynamic Placeholder API documentation for more information.