Skip to main content

I’ve been racking my brain around this. We use Freshservice for our internal staff and therefore require all users to log in before submitting tickets. Recently, we started using custom cards to make specific URL redirects more readily accessible to our staff.

What I couldn’t figure out is how to hide these custom cards from the non-logged in users. Here is what it now looks like for both logged in and non-logged in users as well as the custom code we used to accomplish this. Mind you, I’m not a coder and used Copilot to accomplish this so there might be a better way, but this allowed us to accomplish what we needed:

Logged In User

 

Non-Logged In User

Insert this where your logic begins for {{#each cards}} on the Portal Home page:

     {{#if portal.logged_in}}
<section
id="cards-banner"
class="banner-{{cards.length}}"
data-ce="true"
data-ce-type="section"
data-ce-subtype="cards"
data-ce-id="cards-banner"
data-ce-template-name="home"
data-card-template="2"
style="background-color: #e6e6e6;"
>
{{#each cards}}
<a
href="{{url}}"
class="card"
{{conditional_attribute external_image 'target' '_blank'}}
data-ce="true"
data-ce-type="card"
data-ce-subtype="default"
data-ce-template-name="home"
data-ce-children-editable="true"
role="{{role}}"
aria-label="{{aria-label}}"
data-ce-custom={{ternary isCustom "true" "false"}}
data-ce-id={{ternary ceId ceId (concat "default-card-" (toString @index))}}
>
{{image src=img alt="" role="presentation" class="elem-inline-mid"}}
<div class="elem-inline-mid card-text">
<h3 data-ce-translation="{{titleTranslationPath}}">
{{title}}
{{#if external_image}}
{{image src="/images/portal_v2/open-in-new-tab.svg" alt=(translate "portal.aria.external") class="external-link"}}
{{/if}}
</h3>
<p data-ce-translation="{{contentTranslationPath}}">
{{content}}
</p>
</div>
</a>
{{/each}}
</section>
{{else}}
<section
id="cards-banner"
class="banner-{{cards.length}}"
data-ce="true"
data-ce-type="section"
data-ce-subtype="cards"
data-ce-id="cards-banner"
data-ce-template-name="home"
data-card-template="2"
style="background-color: #e6e6e6;"
>
{{#each cards}}
{{#unless isCustom}}
<a
href="{{url}}"
class="card"
{{conditional_attribute external_image 'target' '_blank'}}
data-ce="true"
data-ce-type="card"
data-ce-subtype="default"
data-ce-template-name="home"
data-ce-children-editable="true"
role="{{role}}"
aria-label="{{aria-label}}"
data-ce-custom="false"
data-ce-id={{ternary ceId ceId (concat "default-card-" (toString @index))}}
>
{{image src=img alt="" role="presentation" class="elem-inline-mid"}}
<div class="elem-inline-mid card-text">
<h3 data-ce-translation="{{titleTranslationPath}}">
{{title}}
{{#if external_image}}
{{image src="/images/portal_v2/open-in-new-tab.svg" alt=(translate "portal.aria.external") class="external-link"}}
{{/if}}
</h3>
<p data-ce-translation="{{contentTranslationPath}}">
{{content}}
</p>
</div>
</a>
{{/unless}}
{{/each}}
</section>
{{/if}}

 

Insert this on your custom stylesheet to create the conditional ruling to check if logged in:

#cards-banner.logged-out .custom-card {
display: none !important;
}

.custom-card {
/* any styles you added just for visibility control */
}

 

Join the Community or User Group to Participate in this Discussion