Using custom jQuery to update the text of your Help Center's Search button

Have more questions? Submit a request

7 Comments

  • Karen D Snyder

    The jquery provided in this article changes the value attribute, but it should change the placeholder attribute. The following jquery worked for me to change the placeholder text:

    $("form.search input[type=search]").attr("placeholder", "Your new search string");

    Note that I used [type=search] rather than [type=submit] as that is what I saw when I inspected the element.

    0
  • Karen D Snyder

    Update: I noticed at https://developer.zendesk.com/apps/docs/help-center-templates/helpers#search-helper that the placeholder can just be specified as an attribute to the search helper, so I removed the code from script.js and modified my template accordingly, as that is a less complicated solution:

    {{search instant=true placeholder="Your new placeholder" submit=false}}
    1
  • Gaëtan Tobie-Echeverria

    hello, I'm using the following 

    // name in search bar 
    if(HelpCenter.user.role!='anonymous') { $('#query') .attr('placeholder','Hi '+HelpCenter.user.name+', how can we help?');};

    but it is not compatible with a muti language help center.

    Any chance to manage the translation of the placeholder in your solution, with dynamic content maybe?

    0
  • Michael Lanius

    @Karen - thanks for your updates! When this article was written, it was referencing the update to a value for a search submit button, rather than a search input placeholder. Since the advent of the Zendesk Copenhagen theme, there isn't a search submit button by default. An example from an older Zendesk theme is below, to which this jQuery would apply:

    That said, it looks like you're updating the search input placeholder successfully - thanks for the tips!

    0
  • Michael Lanius

    @Gaëtan - after some testing, I'm not aware of a way to use Dynamic Content embedded within Javascript in Guide. That said, this should be possible through some custom scripting options, such as leveraging browser locale (also known as navigator language), or using the locale within the URL of the current Guide instance (e.g. the "en-us" portion of https://[yoursubdomain].zendesk.com/hc/en-us/), etc. 

    Once you detect the locale, I'd recommend 1) verifying the user is logged in or not, and 2) confirm the specific locale of the user's browser and the current Guide instance. Based on the whether or not the user is logged in, you can then customize the string based on available user information and language/locale. 

    For reference, similar questions have also been asked about in our Community, such as this post: https://support.zendesk.com/hc/en-us/community/posts/203458866-Help-Center-Change-default-placeholder-text-in-your-Search-Box.

    Thanks!

    0
  • Karen D Snyder

    @Michael, thanks for your reply! I did not realize that the article was about an actual Search button, since as you said, the button no longer exists!

    0
  • Michael Lanius

    @Karen - sure thing! Sorry for the confusion, and thanks again for your insights here! 

    0

Please sign in to leave a comment.

Powered by Zendesk