Solved

Customize end user portal

  • 13 December 2021
  • 6 replies
  • 463 views

Badge

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

icon

Best answer by vschiaffino 20 December 2021, 22:41

View original

6 replies

Userlevel 1
Badge +3

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

Userlevel 1
Badge +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>

Badge

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.

Userlevel 1
Badge +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.

Userlevel 3
Badge +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.

Userlevel 1
Badge +3

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

Reply