Customize Freshervice User Portal

 Posted on 2021-08-10

It is possible to customize almost all of the user portal but you better know what you are doing. Otherwise you may end up like me, spending way more time than you ever should on customizing this damn portal.

Let’s hope this one helps you, otherwise feel free to reach out to me on Twitter.

Page Header

Place a variation of the below at Admin > General Settings > Helpdesk Rebranding > Requester Portal Branding > Customize Portal > Layout And Pages > Portal Pages > General Pages > Portal Home

<script>
  $("#home-page-container #hero-banner .hero-banner-container>h2").text("May the odds be ever in your favor");
</script>

Cards

You can customize icon, title and sub title of the cards on the user portal home page by inserting custom JavaScript at the bottom of the body element. It is even possible to remove cards completely.

Title, Sub Title, icon

Place a variation of the below at Admin > General Settings > Helpdesk Rebranding > Requester Portal Branding > Customize Portal > Layout And Pages > Portal Layout > Footer

<script>
  CARDS.map(function (card) {
      if (card.url == '/support/solutions') {
        card.title = 'Custom Title';
        card.content = 'Custom Sub Text';
        card.img = 'https://example.org/your-icon.svg';
      }
      if (card.url == '/support/tickets/new') {
        card.title = 'Custom Title';
        card.content = 'Custom Sub Text';
        card.img = 'https://example.org/your-icon.svg';
      }
      if (card.url == '/support/catalog/items') {
        card.title = 'Custom Title';
        card.content = 'Custom Sub Text';
        card.img = 'https://example.org/your-icon.svg';
      }
      if (card.url == '/support/approvals/pending') {
        card.title = 'Custom Title';
        card.content = 'Custom Sub Text';
        card.img = 'https://example.org/your-icon.svg';
      }
      if (card.url == '/support/employee_onboarding/new') {
        card.title = 'Custom Title';
        card.content = 'Custom Sub Text';
        card.img = 'https://example.org/your-icon.svg';
      }
  });
</script>

Remove Specific Cards

Simply add the link of all cards you want to remove to removeCardsUrl and place at Admin > General Settings > Helpdesk Rebranding > Requester Portal Branding > Customize Portal > Layout And Pages > Portal Layout > Footer

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

Change Styles

/* Background of the cards area */
#home-page-container #cards-banner {
  background-color: #990000;
}

/* Background and font color of the cards */
#home-page-container #cards-banner .card {
  background: green;
  color: black;
}

Page Styles

  • Add page styling
freshservice