Help Center - Change default placeholder text in your Search Box

63 Comentarios

  • Iggy Pritzker
    Acciones de comentarios 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
  • Larisa Moore
    Acciones de comentarios 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
  • Iggy Pritzker
    Acciones de comentarios 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
  • Wes Drury
    Acciones de comentarios 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
  • Edwin Schukking
    Acciones de comentarios 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
  • Jens Troest
    Acciones de comentarios Permalink

    How do you localize text with this?

    0
  • Andrea Saez
    Acciones de comentarios 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
    Acciones de comentarios 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
    Acciones de comentarios 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
    Acciones de comentarios 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
    Acciones de comentarios Permalink

    Awesome

     

    0
  • James
    Acciones de comentarios 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
    Acciones de comentarios Permalink

    I noticed the same thing as James.

    0
  • Wes Drury
    Acciones de comentarios 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
    Acciones de comentarios Permalink

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

    0
  • James
    Acciones de comentarios 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
    Acciones de comentarios 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
  • James
    Acciones de comentarios Permalink

    Success! Thanks Wes, you rock!

    0
  • Mike Clark
    Acciones de comentarios 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
    Acciones de comentarios 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
    Acciones de comentarios 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
    Acciones de comentarios 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
    Acciones de comentarios 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
    Acciones de comentarios 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
    Acciones de comentarios 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
    Acciones de comentarios 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
    Acciones de comentarios 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
    Acciones de comentarios 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
    Acciones de comentarios 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
    Acciones de comentarios 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

Iniciar sesión para dejar un comentario.

Tecnología de Zendesk