Modify your help center theme to hide HTML from users based on their role and group. If the information you want to hide is sensitive, this may not be a workable solution for you since a user can view the full code with the View Page Source function in their web browser.
This workflow contains the following sections:
Option 1: Hide or show HTML based on user's role
Copy the code snippet below and paste directly below the first <div class="container">
element in the home_page.hbs file.
<div class="anonymous">
<h1>Welcome Anonymous User!</h1>
</div>
<div class="end_user">
<h1>Welcome End-User!</h1>
</div>
<div class="agent">
<h1>Welcome Agent!</h1>
</div>
<div class="manager">
<h1>Welcome Manager!</h1>
</div>
Insert the below code under the CSS template.
div.anonymous, div.end_user, div.agent, div.manager {
width: 100%;
text-align: center;
display: none;
}
Insert the below code under the JS template.
const anonymous = document.querySelector(".anonymous") const end_user = document.querySelector(".end_user") const agent = document.querySelector(".agent") const manager = document.querySelector(".manager") // Show div html based on role if (HelpCenter.user.role=="anonymous"){ anonymous.style.display = "block"; } if (HelpCenter.user.role=="end_user"){ end_user.style.display = "block"; } if (HelpCenter.user.role=="agent"){ agent.style.display = "block"; } if (HelpCenter.user.role=="manager"){ manager.style.display = "block"; }
Option 2: Hide or show HTML based on user's group
Copy the code snippet below and paste directly below the first <div class="container">
element in the home_page.hbs file.
const user_group = document.querySelector(".user_group") <div class="user_group"> <h1>Welcome to L2 Support!</h1> </div>
Insert the below code under the CSS template.
div.user_group { width: 100%; text-align: center; display: none; }
Insert the below code under the JS template. In this example, replace 'L2 Support'
with your user group.
const groups = HelpCenter.user.groups; for (let i = 0; i < groups.length; i++) { if (groups[i].name == 'L2 Support' && groups[i].isActive == true) { user_group.style.display = "block"; } }
For more information, see the article: Customizing your help center theme.
16 comments
Nicole Saunders
Hi Ron,
All you need to do is set the visibility of all of the topics in your community to that internal user segment.
You may need to hide the link to the community from en-users on your Help Center with a little custom code, otherwise they'll click it and show up to an empty community. Then just make sure you give your employees a direct link to the community as they won't be able to navigate to it.
0
Peter Hochstrasser
Hi
I'm trying to apply this to Copenhagen 2.9.0 which does not have jquery included. Do I need to add jquery or is there an internal way to get this working?
0
Dave Dyson
Hi Peter -
It is possible to import jQuery into your theme: Importing or upgrading jQuery
Hope that helps!
0
Peter Hochstrasser
Hi @...
I have been aware of this, however, the question is if this is avoidable.
I take this to mean that only with jQuery it is possible to manipulate style attributes of entities I do not know perfectly well where they sit on the DOM tree.
So, I'll add it to get the recipe working again.
May I suggest to update this article to include the jQuery import (in a way that works for all cases) in order for the recipe to work again.
Yours truly.
Peter
0
Peter Hochstrasser
Hi all
I didn't want to add jQuery just because I needed this simple functionality.
My solution is:
Note that the actual display attribute value might be a different one - I used flexbox so "flex" is what I need, if you work with standard means it might be "block", "inline" or even another value.
Yours truly
Peter
0
Dave Dyson
Thanks for posting your workaround, Peter, and thanks again for the heads-up! I've alerted our team so that the need for jQuery (and a link to the installation instructions) can be highlighted.
0
Jordan Dayton
We created a variation of what Aron shared here. thank you!
We just need to slightly tweak this...
What can we tweak in the JS to allow us to hide content from everyone except a particular SEGMENT that we call "Ticket_Access."
Segments are used to identify groups of users and granting them access to different categories/sections/articles within ZenDesk GUIDES.
We'd like to be able to add specific users to a particular SEGMENT (Ticket_Access) and make content visible or hidden based on a particular segment...
Can we use this code and just tweak it a little?
Can someone help us out with this?
0
Heather Firth
If you add the widget to your product can you use the API to only show to certain users who have the Admin role in our product? I know Pendo can do this but didn't know if this was possible for the widget.
0
Austin Killey
Hey there @...!
Good idea with widget-based workflows, and this should be possible to pull from Guide roles at least. You and your team could add some widget API commands like hide and show to hide the widget by default, but then set up a Javascript condition like the ones discussed in this article. Something like this could work with some tweaking as you see fit:
For Support roles like Administrator, you could get super close by having all your administrators become members of the same organization. From there, you can set up your custom Javascript code to pull from HelpCenter.user.organizations. That way, if one of the user's organizations matches up with your admin-only organization, you could fire off that same "show" command for the web widget.
Hope this helps! Let us know if you need anything else.
2
Heather Firth
Thanks @..., could we potentially use our products user roles instead of the help center ones?
0
Carrie Boogaart
Is there a way for it to be visible to 2 or 3 roles? We would like to make our articles public but "hide" certain steps based on your role. In theory, whatever we hide from the public should be visible to End-Users (signed in, agents, & admins).
So essentially, we need to hide it for Anonymous only.
0
Dave Dyson
You can adapt the sample JavaScript code in order to hide HTML based on multiple groups by adding additional logic to the if() statement. For example:
0
Simon
Hi there,
Handlebars/Curlybars questions:
I have been scouring the interwebs searching for a solution to render content with Handlebars/Curlybars rather than show/hide with jQuery. The reason for this is so that we secure information based on user roles and render only what's needed.
HelpCenter.user.role
and pass that to the .hbs template for use in Handlebars helpers?Any help would be greatly appreciated.
Alternatively, I'd love to use a custom template but again, Zendesk does not provide a way to restrict the template based on roles. Is this on the roadmap?
0
Simon
For those who would like a custom Curlybars helper to render content/html based on a user's role. Vote for this feedback post.
0
Michael Somoza
Hi, you reference a screencast above that requires flash that was retired 3 years ago. Do you have other documentation or video that does not require flash?
0
Mackenzie Krueger
Thank you for letting us know about the outdated video player reference within this article. I have worked with our Developer Support team to ensure this article is up-to-date. With that being said, here is the link to the updated content. I am going to mark this ticket as solved at this time.
Best,
Mackenzie
0