Tip: How to Show/Hide HTML content based on user tags

Sometimes you want to hide or display/show specified content on a ZenDesk template page (e.g., home_page.hbs) to only certain users. This can be done by adding some basic code snippets to a few ZenDesk theme files. Below are two examples... how to hide content based on user TAGS and the second example is how to hide content based on user ORGANIZATIONS.

...

Here's an example of a CTA bar that we are currently hiding from all users that do not have the tag "ticket-access" associated with their user account: https://codepen.io/jord8on/pen/bGqmLeR

...

Make content visible or hidden based on User Tags
---------------------------------

For this example (which was our actual use case) let's say you wanted to add a section at the bottom of your help center that was only visible to users who had a specific tag associated with their account.

1. Visit https://[your_Guide_HelpCenter_URL]/theming/workbench
2. Find and click the "Customize" button for your current/Live theme (more instruction)
3. Click the "Edit Code" button in the bottom, right corner of the screen
4. Open up the following three files, where you can scroll to the bottom of the file and add the respective code snippets...

(1) home_page.hbs

<div class="ticket-access">
<h2>Can't find what you're looking for?</h2>
<a class="btn btn--primary" href="https://YOUR_SUPPORT_URL/hc/en-us/requests/new" target="_blank">
Submit a ticket
</a>
</div>

(2) script.js

if (HelpCenter.user.tags=="ticket-access"){
$("div.ticket-access").show();
}

(3) style.css

div.ticket-access {
display: none;
}
.submit-a-request {
display: none !important;
}

The class .submit-a-request will remove the "submit a request" link from the top navigation/menu bar. ツ 

Once these snippets have been added, anything you choose to put within the "ticket-access" div (in this use case) will be only visible to users who have the "ticket-access" tag associated with their account.

...

Make content visible or hidden based on User Organization:
---------------------------------

For this example let's say you wanted to add a section to your home page help center that was only visible to users of a specific organization. 

Follow steps 1-4 above, then use the following snippets. Also note that only users who have been added to an organization called "org-access" will be able to view this custom HTML...

(1) home_page.hbs

<div class="org-access">
<h2>Here's a header</h2>
<p>Here's the content that only members of "org-access" can see.</p>
</div>

(2) script.js

var orgs = HelpCenter.user.organizations;
for (var i = 0; i < orgs.length; i++) {
  if (orgs[i].name == 'org-access') {
   $("div.org-access").show();
  }
}

(3) style.css

.org-access {
  display: none;
}

 

I hope this wasnt' too convoluted. I just wanted to sift out these key bits of code that helped our team, so that someone else doesn't have to look through hundreds of comments on other threads, to find this basic info. 

---------------------------------

Note: Another way to limit visibility to content would be to use "segments" for users that will allow only users in a particular segment to view certain articles or sections or categories of content. Segments are an organization feature associated with the "Guide" tool in ZenDesk. This post is more focused on being able to customize content visibility on information, links, data, etc. on the home pages or other non-article pages.

Read the comments in these articles for more references and variation code snippets:

• How can I hide ticket forms based on a user's organization?
• How can I hide or show HTML based on user's role or group?
• ↳ Kudos 🙏 to @... and @... for the code snippets above, that were shared here.