Show or hide tabs based on organization (Web portal)

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>
Have more questions? Submit a request

Comments

  • Avatar
    Chris Mollan

    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

  • Avatar
    Skip Moore

    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> 

  • Avatar
    Chris Mollan

    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

  • Avatar
    Chris Mollan

    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

  • Avatar
    Skip Moore

    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

  • Avatar
    Nkaronji

    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

  • Avatar
    Skip Moore

    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 

  • Avatar
    Fred Holgado

    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!

  • Avatar
    Fred Holgado

    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!

     

  • Avatar
    Jacob Hiller

    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>');}

    });

  • Avatar
    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?

  • Avatar
    Christine Bhatkar

    Is there a final version of this that works seamless?

  • Avatar
    Aaron Pinch

    Any suggestions on how I could use this code to hide widgets from Light Agents (our sales team)

  • Avatar
    JM

    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 ?

  • Avatar
    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!

  • Avatar
    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-web-portal-from-logged-out-users (scroll down to CSS section)

  • Avatar
    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.

  • Avatar
    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. ;-)

  • Avatar
    Mikhail Zakharov

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

    http://pastie.org/3786190

  • Avatar
    Duke Adamonis

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

  • Avatar
    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.

  • Avatar
    Duke Adamonis

    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?

  • Avatar
    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)

  • Avatar
    Duke Adamonis

    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.

  • Avatar
    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.

  • Avatar
    Christopher Miller

    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

  • Avatar
    Christopher Miller

    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

     

  • Avatar
    Skip Moore

    @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. 

  • Avatar
    Skip Moore

    @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.  

  • Avatar
    Christopher Miller

    @Skip,

    Cheers - worked like a charm.

    Chris

Please sign in to leave a comment.