Forums/Community/Support tips & notes

Show or hide tabs based on organization (Web portal)

Skip Moore
posted this on May 17, 2010 10:59

Zendesk update: If you are using Help Center, please see Skip's comment from Sept 25.

 

The basic premise for using something like this is if you have a freemium model. You can hide the "submit request" and "Check your existing request" tabs from your basic or free users, while still having them show for your premium customers. 

The first thing to do is to hide the tabs for everybody. Create a global javascript widget to hide the tabs (Account=>widgets new widget)

Event.observe(window, 'load', function() {
}});
Event.observe(window, 'load', function() {
if ($('#top-menu #green .tab_new')[0]){  
$('#top-menu #green .tab_new')[0].hide('<a href="/requests/portal/new" class="tab">Ask A Question</a>');}

if ($('#top-menu #green .tab_requests')[0]){ 
  $('#top-menu #green .tab_requests')[0].hide('<a href="/requests" class="tab">what ever you want</a>');}
});

Next, Create a organization to put all your premium customer into. Record the organization's id number which can be found in the url of the organizations profile page. 

tech_assistant___Premium2.png

 

Then, Create a Custom widget (Account=>widgets new widget) that will be placed on the pages you want to allow premium users to see the "Submit Request' and "Check your existing requests"  tabs. 

//used to display errors or information in the widget
<div id='dropbox_dobox'> <div style='padding: 4px; font-weight: bold; font-size: 18px;'> <div id='dropbox_dobox_status'></div> <div id='dropbox_dobox_error'></div> </div> <script type="text/javascript" charset="utf-8"> var current_callbacks = {}; log_error = function(arg) { $('dropbox_dobox_error').innerHTML = arg; }; log_status = function(arg) { $('dropbox_dobox_status').innerHTML = arg; }; fade_status = function(arg) { setTimeout( function() { log_status(''); }, 3000); }; Event.observe(document, 'widgets:load', function() { var user_id = {{current_user.id}}; log_status("Attempting to find customer."); new Ajax.Request('/users/' + user_id + '.json', { method:'GET', asynchronous: true, onSuccess: function(transport) { var obj = transport.responseText.evalJSON(); org_id = obj['organization_id']; user_name = obj['name']; log_status(user_name);
//this is where you put the ID of the premium organization in the if statment if(org_id == '89677'){ $$('#top-menu #green .tab_new')[0].show('<a href="/requests/new" class="tab">Ask A Question</a>'); $$('#top-menu #green .tab_requests')[0].show('<a href="/requests" class="tab">Check your requests</a>');} }, onException: function(transport) { log_error('exception: ' + transport.responseText); }, onFailure: function(transport) { log_error('failure: ' + transport.responseText); } }); }); </script>
 

Comments

User photo
Chris Mollan
Project C Beta Testers

I can hide the tabs no problem, but when I try to restore the tabs for a specific organisation, it doesn't work for me and they remain hidden - i've remembered to put the organisation number into the code also!

Any Ideas?

Chris

May 23, 2010 15:19
User photo
Skip Moore
Zendesk

Here is a update to the sidebar code that has a smoother transition then the one above. 

Add these to your CSS

#top-menu #green li.tab_new{visibility:hidden;}

#top-menu #green li.tab_requests{visibility:hidden;}

<h2>Need Help?</h2>
<div style='padding: 0px; font-weight: bold; color:#555; font-size: 18px;'>
<div id='dropbox_dobox_status'>
</div>
<div id='dropbox_dobox_error'>
</div>
</div>

<script type="text/javascript" charset="utf-8">
current_callbacks = {};
log_error = function(arg) {$('dropbox_dobox_error').innerHTML = arg;};
log_status = function(arg) {$('dropbox_dobox_status').innerHTML = arg;};
fade_status = function(arg) {setTimeout( function() {log_status('');}, 3000);};
Event.observe(document, 'widgets:load', function() {
var user_id = {{current_user.id}};
log_status("");
new Ajax.Request('/users/' + user_id + '.json', {
method:'GET',asynchronous: true,onSuccess: function(transport) {
var obj = transport.responseText.evalJSON();org_id = obj['organization_id'];
user_name = obj['name'];
log_status(user_name);
if(org_id == '77695'){
$('#top-menu #green .tab_new')[0].setStyle({  visibility: 'visible'});
$('#top-menu #green .tab_new')[0].show('<a href="/requests/new" class="tab">Ask A Question</a>');
$('#top-menu #green .tab_requests')[0].setStyle({  visibility: 'visible'});
$('#top-menu #green .tab_requests')[0].show('<a href="/requests" class="tab">Check your requests</a>');
}},
onException: function(transport) {log_error('exception: ' + transport.responseText);},onFailure: function(transport)
{log_error('failure: ' + transport.responseText);
}});
});
</script> 
May 24, 2010 18:28
User photo
Chris Mollan
Project C Beta Testers

Thanks for the update, sorry but it still doesn't seem to make the tabs re-appear for that organisation specified

The alternative way would be just to create a link to the submit a ticket page from that persons organisation tab.  Which means anyone who does not have an organisation will not be able to submit a ticket.  Although this way, it doesn't make it that intuitive and easy to find for "premium" customers that are allowed to submit a ticket....

 

Chris

May 25, 2010 01:12
User photo
Chris Mollan
Project C Beta Testers

Actually, I've figured this out why it wasn't working.

 

Is there anyway that we can hide the widget from view but still allow access?

Chris

May 25, 2010 01:45
User photo
Skip Moore
Zendesk

Hey Chris,

You can add it to another widget on the page, but it is page specific and has to be visable. We only allow global widgets to be hidden.  

Skip

June 01, 2010 21:59
User photo
Nkaronji
thepapertiger

Hey Skip

 

Is it possible to hide the forums tab.....! We have a structure we would like our users to follow in help and not just access the entire knowledge base. What can be done about this. also the bread crumb links above the search box

June 23, 2010 14:47
User photo
Skip Moore
Zendesk

You can hide the forums tab by changing the link to /forums instead of /requests/new  We can't change the bread crumb location but you could put that in as a feature request.

I am not sure what you mean by follow in help and not just access the entire knowledge base?

 

thanks
Skip 

June 23, 2010 14:59
User photo
Fred Holgado
thepapertiger

Hey Skip,

Nick and I are trying out the code to hide the submit link, but the code you provided did not work for us. I looked at an example of how I was appending another link to that UL and here's what I found:

<code>

 

if ($('#top-menu #green .tab_new')[0]){   
             $('#top-menu #green .tab_new')[0].hide('<a href="/requests/new" class="tab">Submit a request</a>');}

if ($$('#top-menu #green .tab_new')[0]){   

             $$('#top-menu #green .tab_new')[0].hide('<a href="/requests/new" class="tab">Submit a request</a>');}

 

</code>

Looks like you guys are using jQuery, but I had to add an additional $ to the class for things to work. Is this normal? Also, this method works to hide the links after the page loads, meaning that the customer can see the link for a split second if they are paying attention. How can we remove them completely?

Thanks again!

June 25, 2010 11:19
User photo
Fred Holgado
thepapertiger

Hey Skip,

I think I've come up with something that is a bit easier to implement. This lovely journey has led me to learn a bit about your lovely Prototype framework that you use.

For some reason, the code you posted initially and the second snippet did not work, giving me a 403 error on the AJAX request. Here's my solution to hide specific tabs globally through CSS and then show them based on organization using JavaScript.

Here is my CSS code:

 

li.tab_new, li.tab_requests, li.tab_forums, h2.forums {
display:none;
}

li.tab_new, li.tab_requests, li.tab_forums { display:none;}

Here is my JS code that can be used either globally or within a widget:

<script type="text/javascript" charset="utf-8">

Event.observe(document, 'widgets:load', function() {

var org_id = '{{current_user.organization.name}}';

      if(org_id == 'pto_pro'){

       $$('#top-menu #green .tab_new')[0].style.display="inline";

       $$('#top-menu #green .tab_requests')[0].style.display="inline";

       }

});

</script>

I understand this is not as flexible if I were ever to change the organization names, but I am not planning on doing that and I can always just go back and update the code. Please format the code if you can!

 

June 25, 2010 13:58
User photo
Jacob Hiller
jumpmanual

I'd only like to hide the tab, so that people must always start a ticket request with a search, but the code below is not hiding that tab when I add it as a widget.  Am I missing something?

 

Event.observe(window, 'load', function() {
if ($('#top-menu #green .tab_new')[0]){  
$('#top-menu #green .tab_new')[0].hide('<a href="/requests/portal/new" class="tab">Ask A Question</a>');}

if ($('#top-menu #green .tab_requests')[0]){ 
  $('#top-menu #green .tab_requests')[0].hide('<a href="/requests" class="tab">what ever you want</a>');}
});
June 29, 2010 14:52
User photo
Trey White

what about a tab that I personally added to the end of these tabs? how would I go about showing/hiding that tab if it's not part of the core tab class like new and request? I need a widget that basically shows the tab only when a certain person from a certain organization is logged in to the system. Also once they click on this link how do I add a textbox and dropdown to the main page?

April 26, 2011 13:06
User photo
Christine Bhatkar
NHR

Is there a final version of this that works seamless?

June 09, 2011 09:34
User photo
Aaron Pinch
clio
Any suggestions on how I could use this code to hide widgets from Light Agents (our sales team)
August 30, 2011 11:21
User photo
Jean-Marc Massou

Hi, don't know why but the method by @Fred Holgado with placeholder doesn't work anymore on my ZD (regular plan)--< the Placeholder is no more evaluate in global javascript widget.

So i use the first method by JSON.

Here just my sample script with the use of GET /users/current.xml

http://pastie.org/2691700

PS : @Aaron Pinch, look at the "roles"

there : http://www.zendesk.com/api/users perhaps the documentation of Zendesk is not up to date ?

October 13, 2011 15:49
User photo
Aldo ValGreen

Hello Zendesk Support! this code works well for me, in order to hide both buttons frome top menu:

Event.observe(window, 'load', function() {

if ($$('#top-menu #green .tab_new')[0]){
$$('#top-menu #green .tab_new')[0].hide('<a href="/anonymous_requests/new" class="tab">Enviar una solicitud</a>');
}
if ($$('#top-menu #green .tab_requests')[0]){
$$('#top-menu #green .tab_requests')[0].hide('<a href="/requests" class="tab">Revisar tus solicitudes existentes</a>');
}

});

 

.....but i wanna apply this just for non-users, and i wanna show it when user is login, could you help me with this point ? i need the custom code to achieve this works fine!, thanks!

January 05, 2012 13:22
User photo
Marci

This may provide some helpful information on hiding/showing tabs using CSS...order of execution in the extensions list is crucial: for future reference: https://support.zendesk.com/entries/20938511-hiding-parts-of-the-we... (scroll down to CSS section)

February 27, 2012 10:20
User photo
Marci

@Fred Holgado - Thanks! Your code is what finally worked for me. In fact, I was even able to tweak it so that I can use the organizations tags instead of org name, which might have some advantages.

February 28, 2012 11:10
User photo
Thomas Griffin

I used CSS and jQuery to tackle this. Those JavaScript solutions are way too verbose. Here is what I did:

1) Create a Global CSS widget (Settings > Extensions > Add Widget) and add the following CSS:

#top-menu #green li.tab_new, #top-menu #green li.tab_requests { display: none; }

Doing this hides the two items from everyone. Now we will use jQuery to check and see if the current user is authorized to submit and view support tickets.

2) Create a Global JS widget (same process for CSS above) and paste in the following code:

jQuery.noConflict();
jQuery(document).ready(function($) {

/** Use Ajax to get the current user XML data */
$.ajax({
type: "GET",
url: "/users/current.xml",
success: function(xml) {
var org_id = $(xml).find('organization-id').text();
var url = window.location.pathname;

/** Show the menu for our specific organizations */
if ( 'YOUR ORGANIZATION ID' == org_id )
$('#top-menu #green li.tab_new, #top-menu #green li.tab_requests').fadeIn();

/** Redirect unauthorized users who are trying to access this area sneakily */
if ( '/requests' == url && 'YOUR ORGANIZATION ID' !== org_id || '/requests/new' == url && 'YOUR ORGANIZATION ID' !== org_id ) {
alert('Your license subscription does not grant you access to priority ticketing!');
window.location.href = 'PLACE THE REDIRECT URL HERE';
}
}
});

});

Notice that you need to replace YOUR ORGANIZATION ID AND PLACE THE URL REDIRECT HERE with your custom parameters. The code is quite simple. It's just an Ajax request to fetch the current user XML. We get the organization ID from the XML and check to see if it matches the organization ID that we want to allow ticketing. 

I also wanted to make sure that they couldn't directly access the areas either (since CSS only hides the menu items but doesn't prevent direct access), so the code just checks to see if the user is trying to access those places inappropriately. If they are, then display some message (you can customize this) and then redirect them to wherever they should go (most likely the support home page).

Works like a charm for me, and way easier to understand than the other suggestions. ;-)

March 20, 2012 16:17
User photo
Mikhail Zakharov
Портал технической поддержки

One more sample. Hide tabs if users organization has "expired" tag.

http://pastie.org/3786190

April 14, 2012 05:42
User photo
Duke Adamonis
nuodb

@Marci - I am also trying to implement this using the organization tags. Can you share the the code that you mentioned above?

July 23, 2012 12:45
User photo
Marci

Here's where I finally landed:

 

I added the following to my global CSS to make the tab_new and tab_requests disappear for everyone:

#top-menu #green li.tab_new, #top-menu #green li.tab_requests { display: none; }

Then I gave each organization that should those tabs a tag: "showtabs" (not very imaginative, but I was testing and it stuck)

 

Then I tweaked the javascript so that instead of looking at organization's id, it looks for the curent user's organization's tags (current_user.organization.tags). Yes, this is very hack-ish....I didn't even change the name of the variable, it's still "org_id". This code goes in a custom widget that is enabled on a per-page basis:

 

<script type="text/javascript" charset="utf-8">

Event.observe(document, 'widgets:load', function() {

var org_id = '{{current_user.organization.tags}}';

      if(org_id == 'showtabs'){

       $$('#top-menu #green .tab_new')[0].style.display="inline";

       $$('#top-menu #green .tab_requests')[0].style.display="inline";


       $$('#top-right')[0].style.display="inline";

       $$('div.action')[0].style.display="inline";

       }

});

</script>

 

In case for some reason that doesn't come through, the attached screenshot shows my Custom widget page (minus the </script> tag in the code window, as it didn't fit).

Note, this does NOT work as a Javascript widget, only as a Custom widget -- and you'll see in the sidebar all the pages I added it to (some more than once, apparently.... :P ).

Hope that helps! If I can answer any other questions, let me know.

July 23, 2012 13:39
User photo
Duke Adamonis
nuodb

Thanks for that information, I appreciate it. For some reason, the JS doesn't work for me.  I've done the following:

  1. Appended the Global CSS with the info provided. (this works correctly)
  2. Created a new Custom Widget
  3. Changed the if statement to:   if(org_id == 'standard_support'){ 
  4. Added the widget to the Home and Forums pages.
  5. The tabs do not appear. 

I assume that I'm missing something basic......any thoughts?

July 23, 2012 14:55
User photo
Marci

Well, my first thoughts would be.....

- make sure you assume a user that is in an organization that has the tag

- make sure you've set the fields as shown in the screenshot (eg, for users that have logged in)

- make sure your org_id variable is spelled exactly as the tag is spelled

- make sure the organization has ONLY that tag, and no others (this code assumes there is only one tag)

July 23, 2012 15:27
User photo
Duke Adamonis
nuodb

Thanks for the feedback I'm still not getting the right result but I'll keep hammering away at this and will post an update as soon as I have one.

July 24, 2012 14:30
User photo
Marci

I just thought of something else, Duke.

Your extensions will fire in alphabetical order. However, your CSS will be processed first. So make sure there are no conflicting extensions firing off before the one you're working on.

July 24, 2012 15:50
User photo
Christopher Miller
zephyr

Hello,

 

This forum was last updated in 2012. I'm hoping to open up our Help Center (The new Portal UI Setup on the Newer Zendesk) but also implement a tiered system. I was going to use some of the approaches identified here but I'm not sure if this is possible anymore. Can someone please comment? 

I'm looking at limiting the drop down choices under the My Activities menu item to exclude "My Open Requests," "All My Requests" and "Requests I've been cc'd on" for our lower support tier and include them for our higher support tier. 

I would be disappointed if the newer Zendesk lost this functionality described in this forum that we were planning on using. 

Kind Regards,

Chris

September 24, 2013 08:38
User photo
Christopher Miller
zephyr

I closed off my last comment before I wanted to. 

I have an open ticket inside Zendesk that has been passed around for a week and is looking for some to answer the question. See 503534.  Maybe I explained it better here. 

Cheers

 

September 24, 2013 08:42
User photo
Skip Moore
Zendesk

@Christopher  I haven't tried it yet. But if I can make conditional fields work in Help Center then I should be able to make this work. 

September 24, 2013 17:13
User photo
Skip Moore
Zendesk

@Christopher give this code a shot https://gist.github.com/skipjac/6709976 in HelpCenter there is no access to the Organization ID but you can use Organization tags to denote tiers. This code hides the "My activities" and "Submit a Request" so the users can never get to the request page. Let me know if that will work for you.  

September 25, 2013 21:54
User photo
Christopher Miller
zephyr

@Skip,

Cheers - worked like a charm.

Chris

October 07, 2013 17:32