Help Center - Change default placeholder text in your Search Box

63 Comments

  • Jens Troest

    How do you localize text with this?

    0
  • Andrea Saez

    if(currentLanguage === 'LANGUAGE') {
    $('input').attr('placeholder','TEXTINNEWLANGUAGE');}

    example, if using FR as a language

    if(currentLanguage === 'Français') {
    $('input').attr('placeholder','Recherche');}

    0
  • Wes Drury

    @Jens - I had to call in the local expert here who has provided the code that you need.

    @Andrea - Thanks so much - you rock!

    0
  • Jens Troest

    Nice. Thanks!

    I assume extracting currentLanguage from the {{language_selector}} component like below is the most efficient approach?

    var currentLanguage = $('.language-selector a:first').text();

    0
  • Andrea Saez

    That's certainly a way to do it. We literally hard coded the language because we need to make sure there's no mistakes or crossovers with anything :)

    0
  • Dani Johnson

    Awesome

     

    0
  • James

    I just noticed when I made this change to the search box, it's also showing up in some fields on our "Submit a request" form. Any ideas how I could fix this?

    0
  • Dani Johnson

    I noticed the same thing as James.

    0
  • Wes Drury

    @James - I'm looking into this as so far I've been unable to duplicate it in my environment.  I'm about to switch over to one of my test environments and play around with it there.  When I inspect the ticket fields they are not labeled as a placeholder so it should not be showing up in those fields.  I'll get back with you soon.

    0
  • James

    Thanks Wes!! If it helps, I am using The Humble Squid theme. 

    0
  • James

    Think I found it. I've attached a screenshot when I opened the DevTools and it does look like it references a placeholder for my ticket fields. Think that's it?

    0
  • Wes Drury

    @James - yes it is calling it from there.  I wonder if this was a recent change that Zendesk made.  Either way let me do some testing and get the code to only change the Placeholder on the main page.

    0
  • Wes Drury

    @James & Dani - Give this code a try as it worked in my test environment and hopefully this id is not being used anywhere else.  Before I edit and change my post let me know if you run into any issues:

    $('#query').attr('placeholder','Search our Forums');

    1
  • James

    Success! Thanks Wes, you rock!

    0
  • Mike Clark

    is there a way to update the text on the button as well?  I'm using the " {{search}}" component native to zendesk and any CSS changes don't seem to be taking effect.

    0
  • Wes Drury

    @Michael - Not all Zendesk themes have the Search button at the end of the Search Bar.  However we can change the wording with JQuery.  Please add the following into your JS below the $(document).ready(function() {

    // change wording inside of Search Button

    $( "input[value='Search']" ).attr('value','Search Me' );

     

    Just change 'Search Me' to whatever you like for your button to say.  Let me know how it goes.

    0
  • Mike Clark

    thank you Wes, that works just fine....still very new to JQuery.  Do you think its possible to use a similar technique to add an image like a magnifying glass which is pretty standard for search buttons.

    0
  • Wes Drury

    @Michael - yes this should be possible via JQuery.  I'm currently on vacation but when I get back I'll see if I can do some testing.  I'll get back to you later next week.  Have a great weekend.

    0
  • Chris Stock

    Hi Wes, we have the same question as Michael.  How do we replace the search button text with an entypo icon?

    I tried changing the CSS to:

    .search input[type=submit] {
      font-family: "entypo";}

    Then modifying your JQuery to:

    $( "input[value='Search']" ).attr('value','🔍' );

     

    But this this just replaced the search button text with the ascii code for the entypo magnifying glass (🔍).

     

    Any ideas?

    0
  • Wes Drury

    @Christopher - I normally replace the entypo icons with Font Awesome icons however let me play around a little and see what I can come up with.  School starts up for us this week so it's been very hectic so give me a few days and I'll respond back once I do some testing.  If you come up with something in the mean time please let me know.

    0
  • Chris Stock

    @Wes - I know the feeling!

    I've also tried with Font Awesome, but no joy.  I've been working with this - http://jsfiddle.net/christopherstock/1kfkLLb1/

    If I change the input value to the Font Awesome unicode in the HTML I can see the magnifying glass, but if I change the value using JS it just puts the unicode in the input. 

     

    0
  • Manuel

    @Wes - I tried to input the code to get the translation of the Search box placeholder when the language is French but it doesn't work. I just get the English text for both languages. Here's the code I have in my JS:

    $(document).ready(function() {
    $('#query').attr('placeholder','Search AQUAOVO Help Center');
    if(currentLanguage === 'Français') {
    $('input').attr('placeholder','Recherche support AQUAOVO');}

    0
  • Wes Drury

    I don't have multiple languages setup so I can really help you there.  Try the code below and make sure you are logging in with a user with that language selected in their profile.

    if(currentLanguage === 'Français') {

    $('#query').attr('placeholder','Recherche support AQUAOVO');}

    0
  • Xuan Wang

    Hi Wes,

    Thanks for the great tip. I am using the Humble Squid template and I have tried both lines, 

    $('#query').attr('placeholder','Search our Forums');

    $( "input[value='Search']" ).attr('value','Search Me' );

    Somehow neither works for me. The placeholder text is not changed. Do you perhaps have any idea ? 

    Thanks, 

    Xuan 

     

     

    0
  • Wes Drury

    @Xuan - Did you make sure the code was directly under the $document. ready function.  I just tested the below code and did verify its still valid.

    // change wording inside of Search
    $('#query').attr('placeholder', 'Search our HelpCenter');

    If you are live could you include a URL to your Help Center as you may have other code structured incorrectly.

    0
  • Xuan Wang

    Hey Wes, 

    Thanks for your reply! Our Help Center is not live yet. But here is the screenshot. I made sure to save and publish the changes. However, it just does not work for me. Thanks!

    0
  • Xuan Wang

    Hi Wes, 

    Once I am in the Knowledge base, I see that the search text is changed. However, the search text on the home page is not updated. 

    Thanks, 

    Xuan

    0
  • Andrew Checkley

    Hi,

    I have been searching the CSS for this to change the font size and placement but have been unable can anyone advise?

    I am going to change the size of the search box but it looks odd without doing the text also.

     

    Thanks

    0
  • Wes Drury

    @Andrew - You can change the font size with the following CSS.

    #query {
         font-size: 14px !important;

    }

    Let me know if this works for you.

    0
  • Chris Nungesser

    Wes, this was super helpful. Thank you very much!

    0

Please sign in to leave a comment.

Powered by Zendesk