Help Center - Change default placeholder text in your Search Box
Zendesk level: Beginner
Knowledge: Copy and Paste :-)
Time Required: 5 minutes
There are two options you can use to change the placeholder text associated with the Search Bar.
OPTION 1 - Use the curlybar framework (preferred option)
Default from Home Page tab
{{search submit=false instant=true class='search search-full'}}
We are going to add placeholder='Search our Forums' like below
{{search submit=false instant=true class='search search-full' placeholder='Search our Forums'}}
Option 2 - Use JQuery
This option works fine but there could be a small delay while the DOM loads.
- Select the “JS” tab
- Find the following line: $(document).ready(function() {
- Add the following code right below the line above
$('#query').attr('placeholder','Search our Forums');
- Save and Publish your site and you should notice the text change in your Search box.
Before
After
-
@Chris - Glad I could help and let me know if you run into any Help Center issues. Best of luck.
-
Two (somewhat related) questions:
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. :)
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!
-
Hi, I've been searching for a while but didn't find anything on how to change the appearance of the search field box. Our website style guide demands a square box, so I have to change the rounded default search box.
-
Nevermind, I've found it ;)
-webkit-border-radius:5px;-moz-border-radius:5px;border-radius:5px; -
Hey Harold! Glad you got it figured out, and thanks for coming back to tell us our solution!
-
We want to use Option 1, but in combination with Dynamic Content.
How can I add something like: {{dc 'hc-home_page_heading_search'}}
To: {{search submit=true instant=true class='search search-full' placeholder=''}}
Help very much appriciated.
-
@Karsten,
You cannot use DC in search component. However, you can add your translated placeholder in the search bar using a bit of JS.
Here's a post you can refer to - https://support.zendesk.com/hc/en-us/community/posts/115006078407-Add-multilingual-welcome-note-placeholder-text-in-search-box-along-with-user-name
Let me know if you face any issue.
Thanks
-
Thank you so much, worked perfectly!
-
Does this work on the Copenhagen theme?
-
@Jennifer, for the Copenhagen theme all you need to do is edit the HomePage.hbs. The screenshots above are from an modified Copenhagen theme.
{{search submit=false instant=true class='search search-full'}}
Change to:
{{search submit=false instant=true class='search search-full' placeholder='Search for everything ....'}}
Just edit the text after placeholder=. This solution works great on a single language Help Center. You will need to do this on each page that the search bar is located. This is option 1 from my post. Option 2 still works as well however we try to only use JQuery/Javascript code when necessary. Both these solutions will work for single language Help Centers.
-
Hey Jennifer,
I talked to Wes and told him that you support multiple languages. So he recommended this tip, using dynamic content:
https://support.zendesk.com/hc/en-us/community/posts/115006078407
If you need help with it, you can message him here or https://slackpass.io/moderatorwes.
Good luck!
-
we can also do without javascript in template:
{{#if alternative_locales}}
{{#is current_locale.name 'English (US)'}}
{{search placeholder='Search Resources' instant=true}}
{{else}}
{{search placeholder='Buscar Recursos' instant=true}}
{{/is}}
{{/if}}
Por favor, entrar para comentar.
69 Comentários