Customize end user portal

I’m also looking for a way to change the text of these cards.

This was absolutely perfect thank you. I am a little confused why this would be coded into the footer section.

I suppose Freshservice considers the card portion of the portal the footer.

If anyone knows how to reorder the cards, I’d love to hear how that’s done.

I could be wrong, but wouldn’t you just need to put the code in the order you want them to be?

Lie I said I could be wrong, but that is what I would try and see what happens.

Unfortunately reordering the cards in this script doesn’t seem to have any effect.

Thanks for this suggested solution.

Working with the Marina theme, it errors out with an error in the console

Uncaught ReferenceError: CARDS is not defined

As CARDS is capitalized, I suspect I am missing the definition of the cards array but I’m not sure what it should be. Any help would be appreciated. 

FYI - Portal GUI customization is on the roadmap this year.  I’m waiting until then to edit our portal as I too don’t have an HTML background.  

Thanks, it helped to customize the portal. But I am wondering is there any way to remove/disable any of the card? like don’t want to show ‘Approve Request’ card to anyone. Browsed some liquid scripts but not working. Any pointers.

Thanks!!

@PGaurav @Jayesh urath @V.Westberg @vschiaffino @Bex 

Hope I’m tagging the right people here, You can reorder the cards using the following code in the Footer section :

<script>
  var urlOrderMap = {
    '/support/tickets/new'       : 1,
    '/support/catalog/items/14'  : 2,
    '/support/catalog/items'     : 3,
    '/support/solutions'         : 4,
    'support/approvals/pending'  : 5
  }
  CARDS.map(function (card) {
    card.order = urlOrderMap[card.url];
  })
  CARDS.sort(function (c1, c2) {
    return c1.order - c2.order;
  });
</script>

If you want to remove a particular card : 

<script>
  var removeCardsUrl = ['/support/solutions', '/support/catalog/items'];
  CARDS = CARDS.filter(function(card) {
   return removeCardsUrl.indexOf(card.url) < 0;
  });
</script>

Feel free to tag me in case of queries 😀

@Ammar KB Thanks!! for your quick help. It works perfectly.

A decent solution for this, that was provided by Freshworks

The `portal.home_cards` will have all the card information we can override them with liquid.

<div class='row justify-content-center'>  
{%for card in portal.home_cards %}    
{% comment %} override based on index {% endcomment %}    
<span style='display:none'>{% increment card_index %}</span>    

{% assign label = card.label %}    
{% assign description = card.description%}    

{% comment %} override if index is 1 {% endcomment %}    
{%if card_index == 1 %}      
{% assign label = 'Browse FAQ' %}      
{% assign description = 'Browse our FAQs quickly' %}    
{% endif %}    

{% if card.show %}     
<div class='col-md-6 col-xl-3 mb-8'>        
<a class='card fw-horizontal' href='{{card.url}}' aria-label={{label}}>          <div class='col-3 px-0 my-auto text-center'>            
<div class='fw-category-icon'>              
{{ card.image }}            
</div>          
</div>          
<div class='card-body col-9'>            
<h2 class='mt-0 card-title fs-18 line-clamp-2'>{{label}}</h2>            
<p class='line-clamp-3'>{{description}}</p>          
</div>        
</a>      
</div>    
{% endif %}  
{% endfor %}
</div>

It should end up looking like this in the Portal Home page

I hope that helps - it did the trick for me.

Best wishes

Geirmund

@Ammar KB  - Though we have removed/hide the card  from main page but it still stays on the left hand side panel and at the bottom of the page like shown in below image. (in Freshworks Switcher panel)

Do we need to add separate code in order to hide from there as well ?

Appreciate any help.Thanks

Hi @PGaurav ,

Yes, Can you try this code and paste it in the Admin-->helpdesk Rebranding-->Customize Portal-->Stylesheets:

#emp-onboarding-list,#main-nav > div.main-nav-items > a.employee_onboarding.ficon-employee-onboarding{
  display:none !important;
}

This should help in removing the Onboarding Requests from both the areas. Hope this helps!

Thanks @Ammar KB. Kudos to you!

Is there a way to make one card bigger than the others so that it stands out?
For example, I want to make the New Ticket card bigger than any of the others.

Great code.  Why doesn’t it apply to the ‘New’ dropdown menu (top bar)?  Is that a different JS object to modify or do I need this in the header too?

@zebb.s - Did FreshService by chance give you a rough ETA on the GUI interface for Portal customization?

Anyone know how to determine what images are available to use with the cards.  I can see the images are .svg files and are located here:  https://assets3.freshservice.com/assets/portal_v2/  , but there is no list of what images are available from this repository.

I’m not sure unfortunately.  I thought it was going to be around this time but last I heard it might get bumped into 4th qtr.

thanks to this article I was able to change the texts on the cards using “CARDS.map(function (card)”.

Now I wonder how can this be achieved for the request-dropdown too.

And is there somewhere a hint where I can check all the functions available (like CARDS)?

@Ammar KB - Could you please confirm how can I add a new card to the portal home page?

Thanks for your help in advance!!

Hi @bsingh 

I hope this helps! This is a sample for adding 3 cards into the Support Portal, You may customize the url, content etc.. Thia needs to be pasted in the Footer Section of Layout & Pages:

<script>
  CARDS = CARDS.concat([
    {
      url: '/support/solutions/12',
      img: '/images/portal_v2/solutions.svg',
      title: 'Registration Process',
      content: 'Article about how to register'
    },
    {
      url: '/support/solutions/13',
      img: '/images/portal_v2/solutions.svg',
      title: 'Deletion Process',
      content: 'Article about how to delete your account'
    },
    {
      url: '/support/solutions/14',
      img: '/images/portal_v2/solutions.svg',
      title: 'Approval Process',
      content: 'Article about how to get approval for your registration request'
    }
  ]);
</script>

Thank you, @Ammar KB !