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
+3
I’m also looking for a way to change the text of these cards.
+3
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>
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.
+3
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.
+1
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.
+3
Unfortunately reordering the cards in this script doesn’t seem to have any effect.
+3
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.
+2
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.
+4
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!!
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 😀
+3
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
Do we need to add separate code in order to hide from there as well ?
Appreciate any help.Thanks
Hi
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
+4
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?
+1
+1
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.
+2
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.
+10
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)?
+1
Thanks for your help in advance!!
Hi
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>
+1
Thank you,
Enter your E-mail address. We'll send you an e-mail with instructions to reset your password.