How can I hide ticket forms based on a user's organization?

Return to top

64 Comments

  • Adam

    Hi Jaïs Pingouroux

    Thank you for your support in here I've just been reading through.

    Do you know if this is possible to hide an element and form in the Help Center based on organization tags instead of the organization name?

    We'd like to hide a form and its tile for customers who are paid only and would invision that they would have the org tag "paid_account".

    Secondly, your last comment here. I want to confirm that this would only be available on API V1 of the help center not version 2.

    We are currently on V1

    0
  • Jaïs Pingouroux

    Hi Adam,

    Yes it's possible to use organization tags instead of name.

    The following command displays the whole HelpCenter object in the console:

    // Display HelpCenter variable
    console.log(HelpCenter);

    In this object, "user.organizations" is an array. For each organization, you have access to the "name" and "tags" properties.

    As to your second question, this code only works in V1 because you need the JQuery dependency, which is not available in V2. Should you want this code to work in V2, you'd either have to adapt it or inject the JQuery dependence.

     

    1
  • Andrea Rochira

    Great article, although it doesn't show how to hide the same forms from the web widget. Also, I don't get why it provides a jQuery snippet since it's not natively supported in HelpCenter V2.

    The feedback given by other users to this article, helped me figure out how to hide based on user tags, here is a working template in Vanilla JS, which is supported in HelpCenter V1 and V2 (you just need to replace the "TICKET_FORM_ID" and the user tags you need to target). And it takes care of the web widget as well.

    In my use case, I needed to grant access to specific forms only to users from specific departments ("people" and "franchising_operations"). I left the tags in there to make it more simple to understand.

    Feel free to suggest improvements to my code.

    document.addEventListener("DOMContentLoaded", function() {

    // uncomment if needed for debugging
    // console.log(HelpCenter.user.tags);
    // console.log(document.querySelector("a.nesty-input"));

    // retrieve the tags associated to the logged-on user
    var tags = HelpCenter.user.tags;
    // check if the array of tags includes "people", meaning that it's an HR user
    var isPeople = tags.includes("people");
    // check if the array of tags includes "franchising_operations", meaning that it's a Franchise user
    var isFranchisingOperations = tags.includes("franchising_operations");
    // console.log(isFranchisingOperations);

    // loop through the tags
    //tags.forEach(function(tag) {
    // console.log(tag);

    // run this block only if the form drop-down selector is found
    if(document.querySelector("a.nesty-input")){

    // if user has not the "people" tag, hide the forms limited to HR
    if (!isPeople){
    // Remove the forms from the drop-down selector
    document.querySelector('#request_issue_type_select option[value="TICKET_FORM_ID_ONE"]').remove();
    document.querySelector('#request_issue_type_select option[value="TICKET_FORM_ID_TWO"]').remove();

    // Remove the options from the nesty-input after it's been created.
    document.querySelector('.nesty-panel').addEventListener('DOMNodeInserted', function(event) {
    event.target.querySelector('li[id="TICKET_FORM_ID_ONE"]').remove();})

    document.querySelector('.nesty-panel').addEventListener('DOMNodeInserted', function(event) {
    event.target.querySelector('li[id="TICKET_FORM_ID_TWO"]').remove();})

    }

    // if user has not the "franchise" tag, hide the forms limited to Franchise
    if(!isFranchisingOperations){
    // Remove the forms from the drop-down selector
    document.querySelector('#request_issue_type_select option[value="TICKET_FORM_ID_THREE"]').remove();
    document.querySelector('#request_issue_type_select option[value="TICKET_FORM_ID_FOUR"]').remove();

    // Remove the options from the nesty-input after it's been created.
    document.querySelector('.nesty-panel').addEventListener('DOMNodeInserted', function(event) {
    event.target.querySelector('li[id="1900000037625"]').remove();})
    document.querySelector('.nesty-panel').addEventListener('DOMNodeInserted', function(event) {
    event.target.querySelector('li[id="1900000039445"]').remove(); })

    }

    }

    // WEB WIDGET settings
    // empty array for API response
    var data = {};

    // let's prep for the the API call
    // create a http request object
    var request = new XMLHttpRequest();

    // connect and retrieve all the form IDs
    request.open('GET','https://mycompany.zendesk.com/api/v2/ticket_forms.json?active=true&end_user_visible=true');

    // if the connection is succesfull, then go ahead
    request.onload = function () {

    // parse the JSON string returned
    data = JSON.parse(request.responseText);

    // print the parsed data into the console (for debugging purpose)
    // console.log(data);

    // call the function responsible to overwrite the default webwidget settings
    setIds(data);
    }

    request.send();

    // array to hold list of forms allowed
    var forms = [];

    function setIds(ids){

    // console.log(ids.ticket_forms.length);

    // loop though the forms
    for (var i = 0; i < ids.ticket_forms.length; i++) {

    // uncomment for debugging purpose if needed
    // console.log("Counter i is: "+i);
    // console.log("Number of forms from API: "+ids.ticket_forms.length);
    // console.log("Length of forms array: "+ forms.length);
    // console.log("Start loop with ticket n°: "+ids.ticket_forms[i].id);

    // call the allowForm function and hold the boolean value
    var allow = allowForm(tags,ids.ticket_forms[i].id);

    // if the form is allowed, add it to the array
    if(allow){

    forms.push({id : ids.ticket_forms[i].id });

    }else{

    continue;
    }
    }

    // console.log("Loop exited")
    // console.log(forms);

    // set new list of forms within the web widget
    zE('webWidget', 'updateSettings', {
    webWidget: {
    contactForm: {
    ticketForms: forms
    }
    }
    });

    }

    function allowForm(userTags,formID){

    // HR only allowed
    if(formID == "TICKET_FORM_ID_ONE"){
    if(tags.includes("people")){
    return true;
    }else{
    return false;
    }
    }

    if(formID == "TICKET_FORM_ID_TWO"){
    if(tags.includes("people")){
    return true;
    }else{
    return false;
    }
    }

    // Franchise only allowed
    if(formID == "TICKET_FORM_ID_THREE"){
    if(tags.includes("franchising_operations")){
    return true;
    }else{
    return false
    }
    }

    if(formID == "TICKET_FORM_ID_FOUR"){
    // console.log("Franchise second form")
    if(tags.includes("franchising_operations")){
    return true;
    }else{
    return false
    }
    }

    // catch all condition for all other forms
    if(typeof formID === 'number' ){
    // console.log("Form for all")
    return true;
    }

    }
    });
    0
  • Adam

    Hi Andrea Rochira

    Thank you for your updated code snippet, this has worked perfectly for our needs in testing so far.

    I have a follow-up question you might be able to help me answer.

    Q: Have you been able to hide the form from anonymous end-users?

    We currently allow any end-user to submit a ticket request to us, and forcing a user to login using the helper {{#if signed_in}} is preventing our anonymous end-users from submitting a ticket. 

    Any thoughts you might have would be great.

    0
  • Andrea Rochira

    Hi Adam,

    Thank you for your feedback!

    Actually, our Zendesk instance is closed to our internal users and they are all authenticated through our IdP.

    In your case, any new unregistered (anonymous) user doesn't have any tag applied, therefore, there's surely no tag that can be evaluated at the time of their first ticket submission. That's why, I guess, my snippet cannot filter the ticket forms for them. I wonder, though, if that's exactly what we need to evaluate. 

    You may edit the snippet to use a "no tag" condition, something like, "IF the array of the current user's tags is empty (or null), then show only specific forms" (never tested this with anonymous users, just brainstorming). OR, you might want to take a look at the Show Self API, which applies only to anonymous users, maybe you can leverage it to determine if the user visiting your HelpCenter is an anonymous one and hide your forms accordingly.

    Another approach, although I don't have a way to really test this as well, could be to use the Show Self API above and then lookup for the user ID using the Show User API to really determine if the user is anonymous or not. 

    I'm sorry I cannot be more helpful than that. Feel free to share your findings. 

    0
  • Jacob Hill

    Is there any way that the organization condition can be checked from the server, opposed to using client-side JavaScript?

    0
  • Josie Shum

    Does anyone know if there's a way to do the opposite? I'd like to hide specific ticket forms from End Users without an Organization.

    0
  • DJ Buenavista Jr.
    Zendesk Customer Care
    Hi Jacob,
     
    Thank you for reaching out to Zendesk Support.
     
    In regards to your question, I don't see any other way to do the following method. Also worth noting is that the following method mentioned here is for instructinal purposes only and Zendesk doesn't support or guarantee the code. 
     
    Thank you!
     
     
    Kind regards,
    0
  • Dave Smith

    Hello everyone,

    Please bear with me here, as coding is not my forte in any way, so I'm looking for as simple answer as possible.

    So, running on Zendesk's original post, I have taken the code and added to script.js:

    $(window).on('load', function() {
     var i = 0;
     var checkExist = setInterval(function() {
     i++;
     if ($("a.nesty-input").length){
     clearInterval(checkExist);
     $("a.nesty-input").each(function() {
     $(this).bind( "click", function() {
     for (var c in HelpCenter.user.organizations) {
     if (HelpCenter.user.organizations[c].name !== "Davetopia"){
     $("#4414080754962").remove();
     } 
     
     //reserve space for additional organizations 
     }
     
     });
     });
     }
     if (i > 10){
     clearInterval(checkExist);
     }
     }, 100);
    });

    However, this just does not work. I've checked the obvious things, like the Form ID being correct and that the user I'm signed in as, is indeed a member of the "Davetopia" organisation.
    However, the Form in question fails to hide and still shows in the dropdown.

    I see people talking about JQUERY and VanillaJS and I'll be honest, I have no idea what that means or the differences. So, my (hopefully) very simple question is; why doesn't my code work?

    Thanks everyone, sorry for being a bit of a ditz here!

     

    0
  • Julien Maneyrol

    Hi !

    I'm no specialist either, but I think I can answer to some extent.

    >I see people talking about JQUERY and VanillaJS and I'll be honest, I have no idea what that means or the differences. So, my (hopefully) very simple question is; why doesn't my code work?

    Actually, this is the root cause of your problem: basically, JQUERY is a JavaScript library which allows simplified code (see https://www.w3schools.com/jquery/jquery_intro.asp), and your code seems to be using exactly this.

    However, since API v2, the JQUERY library is no longer available by default with Zendesk Theme - so you either need to translate your code into plain Javascript (a.k.a VanillaJS) or enable the JQUERY library - you should find instructions in this article: https://support.zendesk.com/hc/en-us/articles/4408829274906-Importing-or-upgrading-jQuery

    0
  • Dave Smith

    Thank you for this Julien,

    I have navigated to the site provided in the link you passed across and installed:

    v3.6.0
    v2.2.4
    v1.12.4

    ...but my question is, what code is my formula above written in? After installing those 3 versions, it still is not working? I can't help but feel I'm missing something obvious, I just don't know what it is.

    Thanks.

    0
  • Julien Maneyrol

    Your code uses JQUERY, as far as I know.

    If you have JQUERY libs enabled, I can't really say why it doesn't work - this is beyond my knowledge and skills :(

    0
  • Ruddy DEROSIERS

    Dave Smith

    Is your theme in API v2 ?

    In your document_head.hbs :

    And in your script.js put your code after "document.addEventListener('DOMContentLoaded', function() {"

    without "$(window).on('load', function() {"

    Juste like this 

    0
  • Dave Smith

    Hi Ruddy,

    Thanks for getting back to me. I can confirm that my theme is indeed API v2.

    I have the various JQuery libraries referenced in the document_head.hbs file:

    ...and the rest laid out exactly as you have specified in my script.js file:

    ...but it still doesn't appear to be working. The Form listed to hide, still shows in the dropdown of a user in the "Davetopia" organisation. Am I missing something?

    Thanks for all the help.

    0
  • Ruddy DEROSIERS

    if you want to hide your form for Davetopia's users, try to modify this

    by this : 

    if (Helpcenter.user.organizations[c].name === "Davetopia")

    0
  • Dave Smith

    Ruddy, you star!

    That worked a treat! Thank you so much.

    0
  • Dave Armlin

    Has anyone gotten a version of the above working against Templating API v2 ? 

    0
  • Dave Dyson
    Zendesk Community Manager
    Hi Dave,
     
    Have you tried importing jQuery using these instructions? Importing or upgrading jQuery
    0
  • Kay
    Community Moderator

    Dave Armlin – Checkout the latest comment here for a code sample.

    0
  • Brandon Jones

    Hoping this is a quick question.  How do you restrict anonymous users and users not in an org from viewing specific forms without restricting them from still being able to submit a request? I have four forms I want to restrict and have this as my code but not sure how to stop anon users from viewing.

     

    document.addEventListener('DOMContentLoaded', function() {
      var i = 0;
      var checkExist = setInterval(function() {
        i++;
        if ($("a.nesty-input").length){
          clearInterval(checkExist);
          $("a.nesty-input").each(function() {
            $(this).bind( "click", function() {
              for (var c in HelpCenter.user.organizations)
                {
                if (HelpCenter.user.organizations[c].name !== "Test Org"){
                  $("#Form_ID").hide();
                  $("#Form_ID").hide();
                  $("#Form_ID").hide();
                  $("#Form_ID").hide();
                  }
                }
            });
          });
          
        }
      if (i > 10){
        clearInterval(checkExist);
      }
      }, 100);
    0
  • Adam

    Hey Brandon,

    I needed to do a similar thing with one of our forms in the Help Center as we only wanted to show it to logged in users with a specific tag.

    Zendesk helped by mentioning to use {#if signed_in}} {{/if}} around the form on the new request page.

    You could put these around each form list you wish to hide from anon users.

        {{#if signed_in}}
            <li class="hufItem blocks-item new-request topics-item">
             <a href="https://<your org>.zendesk.com/hc/en-us/requests/new?ticket_form_id=<form ID>" class="blocks-item-link">
                 <img class="sectionIcon" src="{{asset 'noun-calendar-1988585.png'}}" />
                 <h4 class="blocks-item-title">
                 <form Name>
                 </h4>
               <p class="blocks-item-description"><Form description></p>
               </a>
          </li>
    {{/if}}


    I then used this code snippet in the script along with the recommendation in this post to restrict the form to users with this specific tag. By adding the class "hufItem" to the form list.

    if (HelpCenter.user.tags != "huf"){
    $("li.hufItem").remove();
    }

    All up this hid the form from anon users and to specific users with the tag "huf"

    0
  • John DiGregorio

    I have 2 forms on my community - I would like customers with the tag of yes to get one form and customers without yes to get another..  I found old code from this post and tried modifying it but it didn't work.   We are on version 2 of the API - any help would be greatly appreciated

     

    // hide form for certain users
      $(window).on('load', function() {
     var i = 0;
     var checkExist = setInterval(function() {
     i++;
     if ($("a.nesty-input").length){
     clearInterval(checkExist);
     $("a.nesty-input").each(function() {
     $(this).bind( "click", function() {
     for (var c in HelpCenter.user.organizations) {
     if (HelpCenter.user.organizations[c].tags.includes("yes"){
     $("1900000890833").remove();
     } 

    0
  • Ruddy DEROSIERS

    John DiGregorio if you want to use this script in V2 API you have to :

    - insert link to jquery in your document_head

    - remove first line $(window).on('load......

    -> Look at my answer on the other post https://support.zendesk.com/hc/fr/community/posts/4572609525786-Hiding-a-Form-From-All-Users-Except-Member-of-an-Organization?page=2#comments

    0
  • John DiGregorio

    Thanks - I will give this a try

    0
  • Poppy Allen

    Hi all. 

    I recently implemented this solution but it's populated a drop down list across the board despite both organisations only having one form.

    Does anyone know what edits to make to ensure there is no drop down and instead, users are automatically redirected to the only form that is visible?

    1
  • Noelle Cheng

    Hi I'm trying to hide forms from all people outside of an organization. Can someone help??

    :( 

    My current version is:

    Theme version 2.15.0
    Templating API v2
     

     

    For each section (in BOLD) I put the following:

    SCRIPT.JS section

      //Hide Form
      var i = 0;
         var checkExist = setInterval(function() {
         i++;
         if ($("a.nesty-input").length){
         clearInterval(checkExist);
         $("a.nesty-input").each(function() {
         $(this).bind( "click", function() {
         for (var c in HelpCenter.user.organizations) {
         if (HelpCenter.user.organizations[c].name ==="Main Company"){
         $("#7286425102107").show();
         } 

    else {

    $("#7286425102107").hide();

    }
         
         //reserve space for additional organizations 
         }
         
         });
         });
         }
         if (i > 10){
         clearInterval(checkExist);
         }
         }, 100);

     

    DOCUMENT_HEAD.HBS Section

    <script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>

     

    STYLE.CSS section

    @keyframs animSlideTop {
      0% { -webkit-transform:translate3d(0,-100%,0); transform: translate3d(0,-100%,0); }
      100% { -webkit-transform:translate3d(0,0,0); transform: translate3d(0,0,0); }


    #7286425102107{
          display: none;

     

     

    Is @keyframes supposed to be in the Style.css? I tried it both ways, with and without. Either way the form still shows for people outside of the organization "Main Company".

    0
  • Tipene Hughes
    Zendesk Developer Advocacy

    Hey Noelle Cheng,

    Are you seeing any console errors relating to your code? You can check this by using the keyboard shortcuts cmd + option + J on mac or ctrl + shift + J on windows. 

    Yes, the @keyframes should be in the style.css file. I noticed a couple of small typos in that piece of code. Can you confirm that the first @keyframes block has an "e" in the word "keyframes" in your help center code and that the display: none code block has a closing curly bracket?

    Thanks!

    Tipene

    0
  • Shahid Iqbal

    $(window).on('load', function() {
     var i = 0;
     var checkExist = setInterval(function() {
     i++;
     if ($("a.nesty-input").length){
     clearInterval(checkExist);
     $("a.nesty-input").each(function() {
     $(this).bind( "click", function() {
     for (var c in HelpCenter.user.organizations) {
     if (HelpCenter.user.organizations[c].name !== "i9 Parent group"){
     $("#5249881213199").remove();
     } 
    if (HelpCenter.user.organizations[c].name = "i9 Parent group"){
     $("#900001336043").remove();
     } 
       
     //reserve space for additional organizations 
     }
     
     });
     });
     }
     if (i > 10){
     clearInterval(checkExist);
     }
     }, 100);
    });

     

    I tried to insert this code bottom of script.js but it doesnot work. I want the user with organization 'i9 Parent group' can see and fill only form id 5249881213199 and the others which are not with this organization can see and fill only 900001336043.

    But its not working is there anything wrong?

     

     

    0
  • Noelle Cheng

    Hi Tipene Hughes!

    I did have keyframes spelled right and I also do have the curly closing bracket in there. But the code is still not working. As for console errors, this is what I see.

    0
  • Tipene Hughes
    Zendesk Developer Advocacy

    Thanks for clarifying that for me, Noelle Cheng!

    I'm going to pull this in to a ticket so we can look at your code in a bit more detail. You should see an email coming through from me shortly.

    Thanks!

    Tipene

    0

Please sign in to leave a comment.

Powered by Zendesk