Multibrand - Display the appropriate forms on the correct Help Center (Professional Add-on and Enterprise) Follow

Comments

17 comments

  • Avatar
    Peter Griffith

    This works great but I have found that there is still one problem with the drop down. Thanks to this article, my Brands only shows the ticket forms that are relevant. However, when a customer is asked which form they want to use, they see "Please choose your COMPANY product below". That COMPANY field is the same for all brands, i.e. what seems to be the default brand name.

  • Avatar
    Jake Bantz

    Hi Peter,

    Glad to hear you were able to make use of this!

    The text you are referencing is actually set on your Ticket Forms panel under Admin > Manage > Ticket Forms. You'll find a box on the right side where you can enter instructions when multiple forms are available. You may want to enter something more general in the box that doesn't identify the company. Maybe just "Please choose your product below."

    Hope that points you in the right direction.

  • Avatar
    Hampus Malmström

    Hi!

    This works fine for the desktop version of the Help Center, but when using the mobile version, all forms are shown. Is there anyway to do the same for the mobile version?

    Ps. And when will we see a responsive default theme? :)

  • Avatar
    Jake Bantz

    Hi all,

    I've gotten some feedback from some people that the code above is not removing form options in some situations. I'm still investigating the scope of this issue, but in the meantime, you can make the following updates:

    Help Center Form Update

    You will want to remove the lines I have highlighted with the red boxes and change the remaining .one to .on like this:

    //remove the options from the dropdown selector
    $('#request_issue_type_select option[value="12775"]').remove();
    $('#request_issue_type_select option[value="31495"]').remove();
    //remove the options from the nesty-input after it's been created. 
    $('.nesty-panel').on('DOMNodeInserted', function(e){
        $(this).children('ul').children().remove('#12775');
        $(this).children('ul').children().remove('#31495');
    });
    

    @Hampus if you are using the default mobile template on your Help Center, this code will not work as the CSS and Javascript for your desktop site will not operate in the mobile template. If you would like to get a head start on making your Help Center responsive, you can have a look at this article.

    Please know that making Help Center responsive is something that is on our radar, but I don't have an ETA at the moment..

  • Avatar
    Kyle Petsch

    Jake thanks for this information. Just to confirm, I had to use your modified version above to make this work in our Help Center.

  • Avatar
    Carl Giardina

    Jake, this is awesome!! It took me more time to read this post than it did to implement the change.. fantastic!

    Do you know if there is a solution available for mobile users?

    Either way, this helps tremendously.. thanks!

  • Avatar
    Jake Bantz

    Hi Carl,

    Glad you were able to put this to use!

    The default mobile template cannot be manipulated in this manner. You could certainly disable the default mobile template and make your Help Center responsive. We discuss creating a mobile layout in this article which can hopefully get you started.

  • Avatar
    Ben Chapman

    This works, except when a user, while on the form page, goes to login.. the result is the page refreshes to the default "/hc/en-us/requests/new", which.. if you've eliminated the drop-down, just show a blank page.

  • Avatar
    Jake Bantz

    Hi all,

    I updated the article with the code mentioned in my comment above, and we added a Curlybars friendly method on how to change your 'Submit a request' link if you only want to show one form.

    @Ben -

    Thanks for bringing this up! I hadn't come across that scenario in my testing.

    There are a couple of ways you could approach this. You could leave the dropdown on the request page, but remove the other form options like what is shown in the first example above. Alternatively, you could use a small piece of Javascript to redirect anyone who ends up at the /requests/new page like this:

    if (window.location.href== "https://[your subdomain].zendesk.com/hc/en-us/requests/new") {
       window.location.href = 'https://[your subdomain].zendesk.com/hc/en-us/requests/new?ticket_form_id=17369'; 
    }
    

    I will be sure to let you know if I come up with any other workflow suggestions.

  • Avatar
    Ben Chapman

    Hey Jake,

    okay.. new problem i just realized.... I needed to make my HelpCenter responsive and the bootstrap css and js is over-riding the .js customization i added above.

    any advice on overcoming this?

    Let me know,

    Thanks,

    Ben

  • Avatar
    Duke Oliver (Edited )

    Hi Jake, This is great! It allows me to have a subtle "report a site issue" form in my company's footer, but not have it appear among our important ticket forms in the "submit a request" dropdown.

    I'm having a small issue though. When I use your code from Option 1 above, the forms that I hide aren't given the correct 'Ticket Form' option in the agent interface 'Views'. They're instead appended whatever the default ticket form is in Manage > Ticket Forms.

    As an example of my environment, my default active form is nicknamed 'Question,' and appears as the first entry in our submit-a-request dropdown. My hidden form with your code is nicknamed 'Report Site Issue.' I set up a trigger to automatically assign the tickets made via the hidden form to me, with the following condition: [Ticket:form] [Is] [Report Site Issue ]. when I use your code though, the trigger doesn't work because forms submitted by the end-user as 'Report a Site Issue' appear as the default 'Question' in the agent interface.

    Here are some images:

    1) The form itself, viewed by the end-user

    2) the agent interface 'Views'




     

  • Avatar
    Jake Bantz

    Hi Duke,

    I don't believe this is a bug. Could you try using .hide in place of the .remove function in the Javascript? When we are using the remove, it's completely wiping out that value, but I feel in your case, it may be worth just hiding it.

    Let me know if that helps.

  • Avatar
    Duke Oliver (Edited )

    Hi Jake,

    with some fiddling it seems to have worked! If both .removes are replaced with .hide, it will cause every item in the nesty-input to disappear. But if I replace only the first .remove with .hide, it works fine:

    Thank you for the speedy reply!

  • Avatar
    Charles Magnuson
    Correct me if I'm wrong, but as far as I can see these tricks only apply to the user-facing side of ticket forms. Agents who are part of a multi-brand Zendesk are still stuck with a huge list of ticket forms instead of only the ticket forms that apply to the brand they are a part of. Is there any way to make these tricks work for the agent-facing end of ticket forms?
  • Avatar
    Jessie Schutz

    Hi Charles!

    You are correct, this method will only impact the customer-facing element in Help Center.

    There isn't a native functionality in Zendesk that would accomplish the same thing in the agent interface, but it might be possible to do it with a custom app. You can find out more about creating apps here: https://developer.zendesk.com/apps

    It's also possible that someone else in the Community has done something similar and may be able to help!

  • Avatar
    Jamie P

    This is just what I was looking for.

    Thanks.

  • Avatar
    Jake Bantz

    Hi Everyone!

    If you haven't seen it, you can now natively select brands for each of your ticket forms rather than having to use the workaround in this article. If you want to learn more, go check out this article: https://support.zendesk.com/hc/en-us/articles/217078128-Creating-and-applying-branded-ticket-forms

Please sign in to leave a comment.

Powered by Zendesk