Skip to main content

I have been looking for a solution to change the look for my end user portal. It appears that my HTML is missing the key elements to change the look of my buttons. I would also like to change what they say. 

Fresh Service PRO - Trial (contract paid for Dec 31 activation)

 

Side note - if anyone has code they would like to share I would love to see what could be done

Here is how to edit cards:

Go to Admin > Helpdesk Rebranding > Customize Portal > Layout & Pages. 

Then with “Portal Layout” selected, paste the script below into the bottom of the Footer section. 

Note, I have provided code for only two of the cards, if you would like to edit the other cards, copy one of the if statements and provide the url of the card you’d like to edit. You can get the card’s url by right clicking it and getting the link. Also, if you don’t want to change the card’s image, you can just remove the card.img lines from the script.

<script>
  CARDS.map(function (card) {
    if (card.url == '/support/tickets/new') {
      card.title     = 'Here is where you specify the card title text';
      card.content    = 'Here is where you specify the card subtext';
      card.img        = 'https://www.enter_an_image_URL_here.png';
    }
    if (card.url == '/support/catalog/items') {
      card.title     = 'Here is where you specify the card title text';
      card.content    = 'Here is where you specify the card subtext';
      card.img        = 'https://www.enter_an_image_URL_here.png';
    }
  });
</script>


@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 = urlOrderMaprcard.url];
  })
  CARDS.sort(function (c1, c2) {
    return c1.order - c2.order;
  });
</script>

 

If you want to remove a particular card : 

<script>
  var removeCardsUrl = t'/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 😀

 


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!


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


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


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(t
    {
      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>


Thanks @Ammar KB. Kudos to you!


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


Here is how to edit cards:

Go to Admin > Helpdesk Rebranding > Customize Portal > Layout & Pages. 

Then with “Portal Layout” selected, paste the script below into the bottom of the Footer section. 

Note, I have provided code for only two of the cards, if you would like to edit the other cards, copy one of the if statements and provide the url of the card you’d like to edit. You can get the card’s url by right clicking it and getting the link. Also, if you don’t want to change the card’s image, you can just remove the card.img lines from the script.

<script>
  CARDS.map(function (card) {
    if (card.url == '/support/tickets/new') {
      card.title     = 'Here is where you specify the card title text';
      card.content    = 'Here is where you specify the card subtext';
      card.img        = 'https://www.enter_an_image_URL_here.png';
    }
    if (card.url == '/support/catalog/items') {
      card.title     = 'Here is where you specify the card title text';
      card.content    = 'Here is where you specify the card subtext';
      card.img        = 'https://www.enter_an_image_URL_here.png';
    }
  });
</script>

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


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!!


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.  


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.


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

 


@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 ?

 

left panel view

 

bottom of the page

Appreciate any help.Thanks


Hi @Anssi Salminen,

Really apologize for the delay,

You can copy the below code:

 

 <a href = "www.google.com"
               role  = "menuitem"
               class = "{{menu.class}} {{menu.src}}"
               {{conditional_attribute menu.external_image 'target' '_blank'}} >
                <span>Go to Google</span>
            </a>

and paste it in the Header section of the Admin-->Helpdesk Rebranding-->Customize Portal-->Layout & Pages:

Just after {{/each}}. I’ve left the image section blank, You just need to include the Img url there within the code snippet.

 

 

Hope this helps! Happy Holidays 😀


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.


Hi!

Any ideas or scripts on how to add more links to the navigation hamburger to the top left corner? There was a good script earlier in this thread for hiding things but I would like to add all my service items as links in the navigation as well  :) 

@Ammar KB 
 



 


Thank you, @Ammar KB !

 


Anyone know how you can ALWAYS show the “Did you find this article Helpful” that appears at the bottom of Articles?  Right now, if you click “No” you can fill out a ticket, but the Did you find…. piece disappears on that article.  I would like for it to show regardless if I have already clicked No in the past.  Working with an HR group, so needs are a little different.  I understand why this would disappear on an IT Ticket, but we need the ability to answer No each time we review all the articles.


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

 

Thanks for your help in advance!!


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)?


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

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.


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.


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


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?


Reply