Help Center - Change default placeholder text in your Search Box

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!

@Chris - Glad I could help and let me know if you run into any Help Center issues.  Best of luck.

Two (somewhat related) questions:

1. Is it possible to use dynamic content for the text? We have 9 languages so it's going to be a LONG string of code if I have to hand-code it separately for each language. I can do that, of course, I'm just lazy and we already have the dynamic content set up for the text I want to use. :)

2. Is it possible to change the text just for one language, and leave the rest as the default? We were thinking of testing the change just in English first, as we have a few different phrases we want to try out to encourage more searching.

@Larisa - It gets a little tricky but it should be possible.  What you have to do is display the dynamic content in a div on the page but hide it and then swap it out with the placeholder text.  If you just had a few then you could always use IF statements.

Thanks for this: super! 

Hi, me again. We just realized that while the customized text is appearing correctly localized on the home page, on the section and article pages and contact page only the English-US customized text is appearing, regardless of the language in which you are viewing our site (http://customer.real.com). Since the code is in the JS I assumed it would carry through all the applicable pages. Any idea what I might have done wrong?

@Larisa - If you are hiding the text on the home page then the other pages will not be able to read it.  You will need to add and hide the text on those pages as well and then the JS code should work across all the pages.  I know theres got to be a better solution so let me think about it some more and see if I can come up with something else.

I'm not hiding the text on the home page, it's still what I think was the default:

<section class="hero-unit search-box">
  {{search}}
</section>

and on the other pages it's

<nav class="sub-nav">
  {{breadcrumbs}}
  {{search}}
</nav>

Here's what I put in the JS:

   //change search box text
  $('#query').attr('placeholder','Start typing to find answers!');
 
  if(lang == "en-GB") {
$('#query').attr('placeholder','How can we help you?');}

  if(lang == "de") {
$('#query').attr('placeholder','Wie können wir helfen?');}

if(lang == "it") {
$('#query').attr('placeholder','Cosa possiamo aiutarti?');}

if(lang == "fr") {
$('#query').attr('placeholder','Comment pouvons-nous vous aider ?');}

if(lang == "es") {
$('#query').attr('placeholder','¿En qué podemos ayudarle?');}

if(lang == "pt-BR") {
$('#query').attr('placeholder','Como podemos ajudá-lo?');}
 
  if(lang == "ko") {
$('#query').attr('placeholder','검색');}
 
  if(lang == "ja") {
$('#query').attr('placeholder','検索');}
 
  if(lang == "zh-TW") {
$('#query').attr('placeholder','搜索');}
 

Strangely, this was working for me, but now is not.  I am working on a re-design of our Help Center in the Sandbox.  This line...

$('#query').attr('placeholder','Find your answers now');

...was working until today.  Now it isn't.  It is still working on our production system.

@Starr - Are you using the exact same search box across all your pages or are you using a different search box on the articles and section page.  Take a look at the {{placeholders}} on those pages.

I am using a {{search_in_category}} on the category pages.  But it's not working on the homepage either, which is just a plain {{search}}.

Hi, 

I am using the place holder {{link 'new_post' role='button'}} for new post button. Right now the link gets rendered with the display name "New Post". How do i request the service to render the link with my custom name. is there any way i can use {{link 'new_post' role='button' text='Click to Post'}} where the text attribute represents the text i want the <a> tag to hold.

@Daniel - that would be nice however I just verified that you can't change the test from the curlybars placeholder.  You would need to trigger that via JQuery.

Add this below your $(.document.ready) function

$('.post-to-community a').text('Post Your Ideas');

Just add placeholder to search tag

{{search placeholder='Search our support' instant=true}}

It works now, but we need a way to make dynamic content there for multiple languages...

We have a multi-language setup and I have tried to implement the JS as described in this thread, but the text in the search box did not change:

// START change search box text
// Edwin Schukking 2016.06.20
// Source: https://support.zendesk.com/hc/en-us/community/posts/203458866-Help-Center-Change-default-placeholder-text-in-your-Search-Box

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

if(currentLanguage === "Deutsch") {
$('.search #query').attr('placeholder','Knowledge base durchsuchen');}

if(currentLanguage === "English (AU)") {
$('.search #query').attr('placeholder','Search knowledge base au');}

if(currentLanguage === "English (UK)") {
$('.search #query').attr('placeholder','Search knowledge base gb');}

if(currentLanguage === "English (US)") {
$('.search #query').attr('placeholder','Search knowledge base us');}

// END change search box text

Is there something I have missed, since my knowledge of JS is very limited. 

Thanks in advance!

/* search placeholder change text */
var currentLanguage = $('html').attr('lang').toLowerCase();
if(currentLanguage === "de") {
$('.search #query').attr('placeholder','Suchen Sie in unserer Unterstützung');
}

Thanks, Iggy.

I will try your suggestion!

@Iggy: thanks for jumping in and helping out!

@Edwin: be sure to come back and let us know how it goes!

I will, Jessie. Our DEV team is looking into this solution and I will surely let you know whether this worked for us!

Thanks @Iggy! @Zendesk if Iggy's solution works would it be possible for the help documentation to be updated? It took me way to long to find that information and the jQuery version seemed intermittent when I was testing it in the sandbox (plus it showed "Search" for a split second before changing the text so it was not a useable solution for me.

Hey Stefan!

Since our Support team isn't able to support these types of customizations, we generally can't add them to our official documentation.

However, I'm sure Wes would update his tip when he finally gets time, if we ask nicely. :) I'll check with him!