Help center JavaScript cookbook

Return to top

27 Comments

  • NIC Inc

    Is it possible to autofill a field that is a dropdown menu field?  Or does that only work for text entry fields?  I can successfully hide fields on various forms and autofill text fields like the subject and description, but I have not been successful with drop menus.

    Thanks!

    0
  • Cheeny Aban
    Zendesk Customer Care
    Hi Shawn,

    Are you trying to autofill a dropdown field on a ticket form? If yes, the Creating pre-filled ticket forms will help you
    0
  • Adam

    Hello,

    I'm looking for help on ticket forms in the Help Center. We currently have a URL in the description of a custom field. This allows our customer to reference the information on this page while filling out the form.

    The issue we have discovered is that when the customer clicks on the link it opens the URL in the same window as the Help Center. 

    Does anyone one know how to capture this via Javascript and force the link to open into a new tab within the users browser?

    0
  • DJ Buenavista Jr.
    Zendesk Customer Care
    Hi Adam,
     
    In regards to your concern, the following script involves custom coding. I would advise searching online for solutions, but I have found some from looking online. 
     
    You can check an example from StackOverflow, here. Another one for reference can be found here. 
     
    Thank you and have a wonderful day ahead!
     
     
    Kind regards,
    0
  • Adam

    Hey @...

    Thank you for your recommendation.

    I was able to find another solution with one of our Javascript engineers and is working as expected. I'll certainly keep the options you've shared in my back pocket if I have any issues with the one I'm using.

    const links = document.querySelectorAll("a");
      for (const link of links) {
        link.addEventListener('click', function (e) {
        if (e.target.href == 'http://google.com') {
            e.preventDefault();
            window.open(link.href, '_newtab' + Date.now());
          }
        });
    }
    0
  • DJ Buenavista Jr.
    Zendesk Customer Care
    Hi Adam,
     
    I'm glad to hear that you were able to find a suitable solution. Please don't hesitate to reach out anytime if you need further help or questions. 

    Have a wonderful day ahead!
     
     
     
    Kind regards, 
    0
  • T5 Admin

    Hey, 

    I'm trying to make it so that a custom date field can't select a date in the past. Is that possible?

    0
  • Tipene Hughes
    Zendesk Developer Advocacy

    Hey T5 Admin,

    Would you mind sending through a snippet of how your custom date field is currently functioning and I can put together a working example based on your code.

    Thanks!

    Tipene

    0
  • T5 Admin

    Hey Tipene Hughes

    The date field is just the custom date field that the user can edit. 

    0
  • Tipene Hughes
    Zendesk Developer Advocacy

    Hi T5 Admin,

    Thanks for clarifying that for me!

    Unfortunately, it's not possible to modify the behavior of the in-built custom field date picker. I can definitely see the use case for such a feature though, so I'd encourage you to create a post on the feature request community page. This will allow greater visibility to our product teams, as well as give others the opportunity to upvote and provide additional use cases for such a feature. You can find our guidelines around creating feature requests, here.

    Have a great day!

    Tipene

    0
  • NIC Inc

    I'm successfully able to autofill only one custom field in a ticket form using the script.js file.  My method is:
    if(ticketForm == 7386956538260) {
    $('.form-field.request_subject').hide(); // Hide subject
    //Auto-fill fields//
    $('#request_subject').val('Agency/Application SPOC change request');
    $('#request_custom_fields_21608582').val('zendesk_assistance');
    $('#request_custom_fields_21626618').val('User_Management_incl_Permissions_ID_Req_/_Passwd_Reset_etc');
    $('#request_custom_fileds_21617267').val('Zendesk_Support_Portal');
    }

    My subject, a standard field, and field 21608582, a custom field, are auto-filling successfully.  The other two fields are not auto filling.  

    Any insight?

    Shawn A.

    0
  • Greg Katechis
    Zendesk Developer Advocacy

    Hi Shawn! My first thought would be that the last two options are drop-down or multi-select fields, which require that you pass in the tag for the value, as opposed to the field name. The syntax is slightly different with this being JSON as opposed to JQuery, but the general info can be pulled together from this article

    If that doesn't resolve the issue for you, could you let us know if you're seeing any console errors that could shed some light on this?

    0
  • Lilian Herman

    Is it possible to use dynamic content in the javascript file?  I'm trying to localize the Contact Us button text:

     $('.request-callout a').text('Contact Us ').attr('href','/hc/requests/new');

    I have the dynamic content {{dc.kc-footer-contact-button}}.

    I know how to add these to the .hbs files and use them in many places. However, I'm not sure how, or if, it can be used in the javascript.

    0
  • Nick S

    Hi team, does Zendesk support custom ticket placeholders in the subject field?

    $('#request_subject').val("Credit Request - Agency name: {{ticket.ticket_field_ID}}, CID: {{ticket.ticket_field_ID}}");
    $('.request_subject').hide();

    The above code successfully hides the subject, but unfortunately the custom field data does not carry across to the subject, but rather it all appears as it does in the code. 

    0
  • Salim Cheurfi
    Zendesk Customer Care
    Hi Nick, 
     
    Ticket placeholders will not be rendered in a custom request form, it will be displayed as it is, Ticket placeholders are used in automations, macros, targets, triggers, and widgets as containers for dynamically generated ticket and user data.
     
    I hope this helps, 
     
    Best,
    0
  • Raphaël Péguet - Officers.fr

    Hi, Does anyone has the solution to put easily a field side by side to another one (to save and avoid scrolling) please

    🥺🥺🥺

     Best regards!

    0
  • Raphaël Péguet - Officers.fr

    I've found the solution (thanks to a genrous contirbutor) of my previous question and put it on a special article here

    I have another question now 😂

    Here :

    You show how to prepopulate, can you show please show howto put text that fades when the user click on the field? (like a suggestion) here is an example : https://developer.mozilla.org/en-US/docs/Web/CSS/::placeholder

     

    Many thanks 

    0
  • Gorka Cardona-Lauridsen
    Zendesk Product Manager

    Hi All, 

    We are conducting research to improve our Help Center developer experience and would love to talk to any of you that have tried to edit Help Center theme code.

    If you are interested please answer sign up here and answer the 3 survey questions. I will reach out to you to setup a 30 min Zoom call.

    The interview will be a semi-structured interview where we would like to hear you take us through examples of what you have done or tried to do with customizations and your experience with the tools, documentation etc. you used.

    Looking forward to talking to all of you.

    Gorka Cardona-Lauridsen
    Sr. Product Manager, Zendesk Guide 

    0
  • Asafe Souza Ramos

    How to access a agent email from script.js theme? I found the HelpCenter, but there is a deprecate/legacy notice, so there are no guarantees. Is there another way?

    let agentEmail = HelpCenter.user.email;
    1
  • Remi
    Zendesk Customer Care

    Good day Asafe Souza Ramos,

    Thank you for your post, I hope you are doing well!

    To answer this, the best current option is still to use the HelpCenter native method and its related nodes / attributes, such as indeed : 

    HelpCenter.user.email

    We, indeed, recommend to not rely on it to set correct expectation, but I'm not aware of removal of this feature soon.

    For now, this is the way to go, otherwise, via some DOM manipulation you can call out (via getElementById() for instance) to the <div> className > "dropdown-menu" first node child (see attachmment).


    Which contains the ID of the current logged-in user through the href, you can extract this ID from the last URL segment (save it as variable) and make a subsequent API GET call toward this user profile with the ID, which will respond with the user's email (amongst other "properties").

    • GET /api/v2/users/{user_id}

    For example : 

    This is another option to explore. 

    Hope this helps! Have a great rest of your day!

    Best regards,

    0
  • Kel S.

    Does anyone know if it's possible to automatically select the "Articles" type in the guide search results page? This way it automatically shows the "By category" filter in the sidebar?

    0
  • Brylle

    Hey, all!

    We're trying to auto-populate the request description when a certain custom field value is selected, here's how our current code looks like now:

    $(document).ready(function() {
      var fieldID = '7603499055631'; // replace with custom field ID
      var ticketForm = location.search.split('ticket_form_id=')[1];

      if(ticketForm == '7752126072207') { // replace with your actual form ID
        $('#request_custom_fields_' + fieldID).change(function () {
          var selectedOption = $(this).val();
          
          switch(selectedOption) {
            case 'tools__mdm':
              $("#request_subject").val("Issue encountered: XXXX");
              $('#request_description').val("There is a new product registration.");
              break;
            // Add more case statements for other options
            default:
              $("#request_subject").val("");
              $("#request_description").val("");
          }
        });
      }
    });

    So far, the subject field is being auto-populated but the description field is not, any idea on why this is the case?

    0
  • Walter

    Brylle

    The description field is always the first comment in the ticket.  It will never change after the ticket is created.

    0
  • Mark

    Is it possible to use Javascript/jQuery on Agent-only forms, or only on the HC side (for end users)?  I tried running some javascript and seeing the result on the Agent side, but it didn't execute.

    1
  • Cheeny Aban
    Zendesk Customer Care
    Hi Mark, 
     
    I would suggest that you initiate a conversation with one of our Support Engineer to further check if it is possible to use javascript/jquery on ticket forms. 
    0
  • Stephanie

    Hi there,

    Can we insert a Javascript snippet that automatically updates from a widget (outside of Zendesk) into a Help Center article?

    0
  • Tony
    Zendesk Customer Care
    Hi Stephanie,
     
    it should be possible to insert a js scripts and snippets in the source code of an article in Guide. I think this article might be helpful for you. We also suggest to get in touch with a professional in these cases.
     
    Best,
    0

Please sign in to leave a comment.

Powered by Zendesk