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.
- Visit https://[your_Guide_HelpCenter_URL]/theming/workbench
- Find and click the "Customize" button for your current/Live theme (more instruction)
- Click the "Edit Code" button in the bottom, right corner of the screen
- 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.
-
Great article. One thing I would suggest though is to use vanilla javascript so that all Guide admins can use your post. Currently, Guide templates "v2" do not use jQuery, which would cause the code to not work.
-
Thanks for chiming in here @.... What exactly should I change? I'm happy to make any updates that makes this usable for others. This code is working well for me.
(Though I did notice one issue... when I visit the page with this code on it, everything displays, as expected... only to those who have a certain TAG associated with their account. If I hit the "Refresh" button on the page, the custom code bit disappears... even if you're a user with the "ticket-access" tag. Any ideas on how to address/debug that?)
-
I am not sure what is going on with the page refresh. It might have something to do with caching or your code is not running on subsequent page refreshes. I would have to try and replicate it myself. Maybe someone with more knowledge can help out with that.
As for the code changes, it should be as simple as the following:
Replace
$("div.ticket-access").show();With
document.querySelector('.ticket-access').style.display = "revert";Replace
$("div.org-access").show();With
document.querySelector('.org-access').style.display = "revert";Let me know if that doesn't work but it should.
-
This is just awesome :)
-
Has anyone ran into this not working on Theme version 2.9 even after the above replacements in the previous comments suggest?
-
I'm also finding that this approach is not working (on template version 2.19.2). The desired actions using 'document.querySelector' are happening, but not conditionally based on the user or organization tag.
Can anyone confirm whether or not if (HelpCenter.user.tags=="_____") works?
-
I am also not able to use either snippets of code. The text displayed within the div is not displaying at all. The reason I need this to work is so that I can have only one article that displays content for our customers, but display additional content within the same article that is specific to employees only. This will remove the need to keep one internal article for employees and one external article for customers.
Any help would be greatly appreciated, thank you in advance!
Here is what I used in my script.js file:
var orgs = HelpCenter.user.organizations;
for (var i = 0; i < orgs.length; i++) {
if (orgs[i].name == 'thread research employees') {
$("div.thread_employees").show();
}
}Here is what I used in my style.css file:
.thread_employees {
display: none;
}Here is the HTML code that I am using in articles:
<div class="thread_employees">
<hr>
<h2 style="color: #3f99b2;">
<strong>Test</strong>
</h2>
<ul>
<li>Jira Ticket: 1520479</li>
</ul>
</div> -
Hi Ronald, thanks so much for your suggestion and quick reply! I actually got the script to work, I was placing it in the incorrect place.
-
I had a small problem with this script where is stopped working for some users. I eventually figured out is was where customers had more than 1 tag.
So I switched the code to this and it works perfectly.
if (HelpCenter.user.tags.includes("ticket-access"))
Por favor, entrar para comentar.
9 Comentários