Help Center - Change default placeholder text in your Search Box

How do you localize text with this?

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

example, if using FR as a language

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

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

@Andrea - Thanks so much - you rock!

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();

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 :)

Awesome

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?

I noticed the same thing as James.

@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.

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

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?

@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.

@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');

Success! Thanks Wes, you rock!

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.

@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.

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.

@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.

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?

@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.

@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. 

@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');}

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');}

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 

@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.

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!

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

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

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

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

}

Let me know if this works for you.

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