Skip to main content

I’ve been working on my portal on Freshservice, and I wanted to do this: show two custom cards to logged off users and two default cards (raise a ticket and service request) to logged in users. 

I’m trying to use this code on footer, since I was able to hide the other cards from here.

 

<div class="clearfix">
  {{#unless portal.copyrights}}
    {{> portal_copyrights}}
  {{/unless}}
</div><script data-ce-id="default-cards-script">
                CARDS = {"text":"Soluções","src":"ficon-knowledge-base","url":"/support/solutions","class":"solution","img":"/images/portal_v2/solutions.svg","title":customTranslate("portal.card.solution.title"),"titleTranslationPath":"portal.card.solution.title","content":customTranslate("portal.card.solution.desc"),"contentTranslationPath":"portal.card.solution.desc","order":1,"show":true,"visibilityCondition":"PORTAL.logged_in || FEATURES.solutions_enabled","isHidden":true},{"text":"Tickets","src":"ficon-tickets","url":"/support/tickets/new","class":"ticket","img":"/images/portal_v2/incident.svg","title":customTranslate("portal.card.incident.title"),"titleTranslationPath":"portal.card.incident.title","content":customTranslate("portal.card.incident.desc"),"contentTranslationPath":"portal.card.incident.desc","order":2,"type":"card","show":true,"visibilityCondition":"PORTAL.logged_in || FEATURES.incident","isHidden":false},{"text":"Catálogo de serviços","src":"ficon-service-catalog","url":"/support/catalog/items","class":"catalog","img":"/images/portal_v2/service_catalog.svg","title":customTranslate("portal.card.service_request.title"),"titleTranslationPath":"portal.card.service_request.title","content":customTranslate("portal.card.service_request.desc"),"contentTranslationPath":"portal.card.service_request.desc","order":3,"show":true,"visibilityCondition":"FEATURES.service_catalog","isHidden":false},{"url":"/support/approvals/pending","img":"/images/portal_v2/approvals.svg","title":customTranslate("portal.card.approvals.title"),"titleTranslationPath":"portal.card.approvals.title","content":customTranslate("portal.card.approvals.desc"),"contentTranslationPath":"portal.card.approvals.desc","show":true,"visibilityCondition":"FEATURES.service_catalog","order":4,"type":"card","isHidden":true},{"text":"Solicitações de integração","src":"ficon-employee-onboarding","url":"/support/employee_onboarding/new","class":"employee_onboarding","img":"/images/portal_v2/employee_onboarding.svg","title":customTranslate("portal.card.onboard.title"),"titleTranslationPath":"portal.card.onboard.title","content":customTranslate("portal.card.onboard.desc"),"contentTranslationPath":"portal.card.onboard.desc","order":5,"type":"card","show":true,"visibilityCondition":"FEATURES.onboarding","isHidden":true},{"text":"Solicitações de desligamento","src":"ficon-employee-offboarding","url":"/support/employee_offboarding/new","class":"employee_onboarding","img":"/images/portal_v2/employee_offboarding.svg","title":customTranslate("portal.card.offboard.title"),"titleTranslationPath":"portal.card.offboard.title","content":customTranslate("portal.card.offboard.desc"),"contentTranslationPath":"portal.card.offboard.desc","order":5,"type":"card","show":true,"visibilityCondition":"FEATURES.offboarding","isHidden":true},{"text":"Solicitações de mudança","src":"ficon-changes","url":"/support/changes/new","class":"change","img":"/images/portal_v2/change.svg","title":customTranslate("portal.card.change.title"),"titleTranslationPath":"portal.card.change.title","content":customTranslate("portal.card.change.desc"),"contentTranslationPath":"portal.card.change.desc","order":6,"type":"card","show":false,"visibilityCondition":"FEATURES.change","isHidden":false},{"text":"Visualizar projetos","src":"ficon-project_mgmt","url":"/a/project_management/projects","class":"project-management","img":"/images/portal_v2/new-project-management.svg","title":customTranslate("portal.project_management"),"titleTranslationPath":"portal.project_management","content":customTranslate("portal.project_management_desc"),"contentTranslationPath":"portal.project_management_desc","order":7,"show":false,"visibilityCondition":"FEATURES.project_management","external_image":"/images/portal_v2/open-in-new-tab.svg"},{"url":"","img":"https://assets17.freshservice.com/a/assets/images/portal-designer/card-images/employee_onboarding-e4903e4598ecd234f02624968eedab95.svg","titleTranslationPath":"portal.card_title_8f37afe8-6667-41f7-8e3b-610cfdfa34ad","contentTranslationPath":"portal.card_desc_372e2cf4-d94e-4e3c-bdaf-c34834a91bdd","title":customTranslate("portal.card_title_8f37afe8-6667-41f7-8e3b-610cfdfa34ad"),"content":customTranslate("portal.card_desc_372e2cf4-d94e-4e3c-bdaf-c34834a91bdd"),"isCustom":true,"ceId":"cca2fe74-361a-406d-8c76-6b3b33b65ec4","isHidden":false},{"url":"","img":"https://assets17.freshservice.com/a/assets/images/portal-designer/card-images/employee_offboarding-266a2d39dd42052480798bbae8383093.svg","titleTranslationPath":"portal.card_title_3f75b6fd-53b5-46f3-bf5e-edf8ee20d34e","contentTranslationPath":"portal.card_desc_566bd724-b43c-446c-8c1b-37cbca7279d2","title":customTranslate("portal.card_title_3f75b6fd-53b5-46f3-bf5e-edf8ee20d34e"),"content":customTranslate("portal.card_desc_566bd724-b43c-446c-8c1b-37cbca7279d2"),"isCustom":true,"ceId":"927c8558-9b0d-413c-8b15-aeeece8b77d2"}];
            </script> 

You may create the cards and instead of using the footer script you may hide them in the:

Rebranding page : Home & Login > Portal Home

The approach would go as follow

HOME PAGE DESIGNER

Step1: Create all the Cards.

Step2: Manage your Card translation & Description.

Step3: Set the URL for your cards as needed.

 

HOME & LOGIN

Step1: Go to “Portal Home”

Step2: Input your code for your environment. The important part here is to make sure you have a section that you can use {{#if portal.logged_in}} , for the card you want to be displayed

Step3: Include a section for the card you don’t want to be displayed when the user is logged in.

For example:

{{#if portal.logged_in}}
  <style>
   
/* Hide the "Connexion / Login" card when logged in */
    #cards-banner a.carddaria-label="guest-login-card"] { display: none !important; }
  </style>
{{else}}
  <style>
   
/* Logged OUT: hide all cards except the "Connexion / Login" card */
    #cards-banner .card { display: none !important; }
    #cards-banner a.card aria-label="guest-login-card"] { display: inline-flex !important; }
  </style>
{{/if}}


Reply