Help Center - Change default placeholder text in your Search Box

63 Comments

  • Wes Drury
    Comment actions Permalink

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

    0
  • Larisa Moore
    Comment actions Permalink

    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.

    2
  • Wes Drury
    Comment actions Permalink

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

    0
  • Marcel V
    Comment actions Permalink

    Thanks for this: super! 

    0
  • Larisa Moore
    Comment actions Permalink

    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?

    0
  • Wes Drury
    Comment actions Permalink

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

    0
  • Larisa Moore
    Comment actions Permalink

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

     

    0
  • Starr McFarland
    Comment actions Permalink

    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.

    0
  • Wes Drury
    Comment actions Permalink

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

    0
  • Starr McFarland
    Comment actions Permalink

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

    0
  • Daniel Sagaya Raj
    Comment actions Permalink

    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.

    0
  • Wes Drury
    Comment actions Permalink

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

    0
  • Iggy Pritzker
    Comment actions Permalink

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

    5
  • Edwin Schukking
    Comment actions Permalink

    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!

     

    0
  • Iggy Pritzker
    Comment actions Permalink

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

    2
  • Edwin Schukking
    Comment actions Permalink

    Thanks, Iggy.

    I will try your suggestion!

    0
  • Jessie Schutz
    Comment actions Permalink

    @Iggy: thanks for jumping in and helping out!

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

    0
  • Edwin Schukking
    Comment actions Permalink

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

    1
  • Stefan Wright
    Comment actions Permalink

    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.

    0
  • Jessie Schutz
    Comment actions Permalink

    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!

    0
  • Harold
    Comment actions Permalink

    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.

    0
  • Harold
    Comment actions Permalink

    Nevermind, I've found it ;)

      -webkit-border-radius: 5px;
      -moz-border-radius: 5px;
      border-radius: 5px;
    0
  • Jessie Schutz
    Comment actions Permalink

    Hey Harold! Glad you got it figured out, and thanks for coming back to tell us our solution!

    0
  • Karsten M. Jensen
    Comment actions Permalink

    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.

    0
  • Trapta
    Comment actions Permalink

    @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

    0
  • Sherri Anderson
    Comment actions Permalink

    Thank you so much, worked perfectly!

     

    0
  • Jennifer Eolin
    Comment actions Permalink

    Does this work on the Copenhagen theme?

    0
  • Wes Drury
    Comment actions Permalink

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

    0
  • Jennifer Rowe
    Comment actions Permalink

    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!

     

    0
  • Iggy Pritzker
    Comment actions Permalink

    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}}

    0

Please sign in to leave a comment.

Powered by Zendesk