Help Center - Change default placeholder text in your Search Box

63 Comments

  • Jens Troest
    Comment actions Permalink

    How do you localize text with this?

    0
  • Andrea Saez
    Comment actions Permalink

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

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

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

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

    Awesome

     

    0
  • James
    Comment actions Permalink

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

    I noticed the same thing as James.

    0
  • Wes Drury
    Comment actions Permalink

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

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

    0
  • James
    Comment actions Permalink

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

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

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

    Success! Thanks Wes, you rock!

    0
  • Mike Clark
    Comment actions Permalink

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

    0

Please sign in to leave a comment.

Powered by Zendesk