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
    Comment actions Permalink

    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
    Comment actions Permalink

    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
  • Karen D Snyder
    Comment actions Permalink

    @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
    Comment actions Permalink

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

    0
  • Karen D Snyder
    Comment actions Permalink

    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
  • Michael Lanius
    Comment actions Permalink

    @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
    Comment actions Permalink

    @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

Please sign in to leave a comment.

Powered by Zendesk