Question

Customizing navigation menu and cards in the support portal

  • 25 April 2022
  • 8 replies
  • 942 views

We have been trying to make some small adjustments to our support portal and are struggling with the content in the side navigation menu and cards. None of my team, myself included, are versed in HTML so we’ve been doing all of this in a sort of reverse engineered manner.

Before going further, I should note that we are on the Growth plan, which has a more limited scope of customization.

So far, we’ve used scripts in the footer as outlined in this post to change the content of our cards while retaining their ability to display based on the level of access the requestor has. However, we have not been able to change the order in which the cards are listed. From what I can gather, I believe that this is controlled by the array that is referenced but I have not found where that lives.

 

As for the navigation menu, I believe that we can apply the same/similar kind of script in the header to change these items, but I’m not sure what elements need to be changed/referenced for this to work.

 

 


8 replies

Userlevel 1
Badge +1

I would love to know how to do this as well.

Userlevel 3
Badge +4

@GeauxTigers @J.Van 


For example, if you want to change the text of the service catalog in the bar, try the following code in page lay out
 



<script>
setTimeout(function() {
jQuery('.catalog.ficon-service-catalog').html('IT Requisition').change()

}, 300);
</script>

Feel free to reach out if you were looking for something else.. happy to help
 

Userlevel 1
Badge +1

@Jayesh urath thank you so much for that insight.

I don’t want to hijack the conversation, but can you tell me if it is possible to restrict visibility of the service catalog card and menu entry to certain requester groups?

If this is not possible, can I just hide the card and menu entry completely?

Userlevel 3
Badge +4

@GeauxTigers 

I saw your post where the requester groups are based on email address domain.
If that is the case, we can get the current logged in user’s email check if its an internal employee or not based on that we can display the menu options, only caveat is, the API key of an agent is required to perform this, which will be exposed in the end user portal, which can be seen if they use developer tools in chrome.

if the portal is behind an SSO, then it shouldn't be much of an issue as the users wont be able to bypass the SSO authentication, if you are fine with that, I will give you the code to hide the elements.

Please let me know your thoughts.

Cheers
J
 

Userlevel 1
Badge +1

@Jayesh urath 

 

We do not currently have SSO enabled, but if it will allow us to hide elements based on their email, I am certainly willing to configure that option.  Please provide the code.  Thank you so very much for your time and your help!

Userlevel 3
Badge +4

@GeauxTigers 

Pleasure is mine mate :)

I found a better option there is a liquid that we can use which seems to do a better job.

{% unless portal.user.email contains 'freshdesk.com' %}

Let me do some testing and get back to you, if this works as I expected, your use case will be easily achievable.

 


 

Userlevel 1
Badge +1

@Jayesh urath 

You are amazing

@GeauxTigers @J.Van 


For example, if you want to change the text of the service catalog in the bar, try the following code in page lay out
 



<script>
setTimeout(function() {
jQuery('.catalog.ficon-service-catalog').html('IT Requisition').change()

}, 300);
</script>

Feel free to reach out if you were looking for something else.. happy to help
 



@Jayesh urath 
Any ideas on if I could add more objects in the navigation bar? I have an idea to add all my service categories listed in the navigation bar and perhaps also including the service items in the navigation bar.

Much appreciate your help.

Reply