Add welcome note on search box along with user name

19 Comments

  • Jennifer Rowe
    Comment actions Permalink

    What a cool tip! Thanks for another great idea, Diziana.

    0
  • Diziana
    Comment actions Permalink

    Thanks Jennifer,

    There is another way of showing the note on the header area, just copy paste the below code in your JS editor 

    if(HelpCenter.user.role!='anonymous') {
    $('.help-center-name')
    .html('Hi '+HelpCenter.user.name+
    ' ,how can we help?');
    }

    Now replace .help-center-name with the class used at that part. (you can do this via inspect element). 

    Save and publish.

    Now before login your HC user would see something like this.

    And once your user logged in, this would show something like this:

    Cheers,

    Diziana

     

    3
  • Kiran Max Weber
    Comment actions Permalink

    Great tip, Diziana! Thank you!

    Update: It didn't work for me when I tried it; I'll revisit it later.

    0
  • Diziana
    Comment actions Permalink

    Hi Kiran,

    Fixed a typo in the code.

    Try again. I believe this would work.

    Let us know if not.

    Cheers,

    Diziana

     

    0
  • Olga
    Comment actions Permalink

    Thanks for this great tip!

    I tweaked it a bit to show just the first name in the search box, if somebody is interested:

    if(HelpCenter.user.role!='anonymous') {
    $('#query').attr('placeholder','Hi '+HelpCenter.user.name.split(" ")[0]+ ', how can we help?');
    }

     

    1
  • Jennifer Rowe
    Comment actions Permalink

    Thanks for sharing, Olia!

    0
  • Alberto Martin
    Comment actions Permalink

    The message appears on the search box as you can see here: http://prntscr.com/enlngy. 

    How can I place it over the search box?

    0
  • David
    Comment actions Permalink

    Is there a way to make this appear in the different HC languages?

    I tried using dynamic text but it didn't work

    0
  • Tilly Martin
    Comment actions Permalink

    I can't seem to get the text to appear above the search box - Has anyone else got this working?

    0
  • Diziana
    Comment actions Permalink

    @David: I think, there is a way, it would require some more JavaScript.

    Let me share my 2 cents (haven't tested, should work -- following is just to give an idea, and share a few tricks):

    • Create Dynamic Content called "hc_search_greetings_template"
    • Store a string like, "Hello %NAME%, how can we help you?" in in "hc_search_greetings_template"
    • Add more variants (languages) but let's keep %NAME% in string where we want Name to appear"
    • Add a span tag with data-* attribute (following line of code) in Header template (at the end, after </header> line)
      <span id="dc_greetings_template" 
      data-value="{{dc 'hc_search_greetings_template'}}"
      style="display:none">
      </span>
    • Let's modify our code and place it any where in Theme JavaScript (General > Customize Design > Edit Theme > JS)
      $(document).ready(function() {
      if(HelpCenter.user.role!='anonymous') {
      var gtext = $("span#dc_greetings_template").data('value');
      gtext = gtext.replace('%NAME%', HelpCenter.user.name);
      $('#query').attr('placeholder', gtext);
      }
      });

     

    Please try it, and share your feedback. I hope, it helps you.

     

    Cheers

    Team Diziana 

    Visit Diziana to download free and premium custom responsive ready-to-use Zendesk theme or Zendesk template or Zendesk plugins for Zendesk Help Center. Brand your Zendesk Help Center, and provide fantastic self-service customer support experience.

     

    2
  • Diziana
    Comment actions Permalink

    @Tilly:

    The original post above doesn't show how to change the text above search box, but it's quite straight forward. You can create heading tag to store "Welcome Greeting" above search; give an id or class to that tag; then you can change it's text too:

    1. Let's say you have put a h3 tag like this with a default value:
      <h1 class="helpcenter-welcome-greeting">Hello, Welcome to XYZ</h1>
    2. Let's change above code to make sure welcome-greeting is also updated:
      $(document).ready(function() {
      if(HelpCenter.user.role!='anonymous') {
      var gw_text = 'Hi %NAME%, how can we help?';
      gw_text = gw_text.replace('%NAME%', HelpCenter.user.name);
      $('#query').attr('placeholder', gw_text);
      $('h1.helpcenter-welcome-greeting').text(gw_text);
      }
      });

     

    Please try it, and share your feedback. I hope, it helps you.

    Cheers

    Team Diziana 

    Visit Diziana to download free and premium custom responsive ready-to-use Zendesk theme or Zendesk template or Zendesk plugins for Zendesk Help Center. Brand your Zendesk Help Center, and provide fantastic self-service customer support experience.

    2
  • Eugene Tarasula
    Comment actions Permalink

    None of those any longer work the way its designed here, do they? 

    0
  • Eugene Tarasula
    Comment actions Permalink

    None of those any longer work the way its designed here, do they? 

    0
  • Eugene Tarasula
    Comment actions Permalink

    None of those any longer work the way its designed here, do they? 

    0
  • Eugene Tarasula
    Comment actions Permalink

    None of those any longer work the way its designed here, do they? 

    0
  • Eugene Tarasula
    Comment actions Permalink

    None of those any longer work the way its designed here, do they? 

    0
  • Zach Proa
    Comment actions Permalink

    I would love to add this to our HC... But I cant seem to get it to work. Is this code no longer current? 

    0
  • Brett - Community Manager
    Comment actions Permalink

    Hey Zach,

    Any chance you can provide the code you're using on your end? Since this tip is about 3 years old it's possible that the code is no longer applicable. I can't assist with custom code on my end but if you're able to provide the code you're using this may help others troubleshoot the issue.

    Thanks!

    0
  • Zach Proa
    Comment actions Permalink

    Hi Brett - 

    I copied and pasted the original code presented in the post (below) at the bottom of the script.js section and nothing happens. I assume I need to add something to the home_page.hbs section as well to where the search area is. I can add a placeholder there with no problem. But i cannot get it to show the user name with " '+HelpCenter.user.name+' " as an error keeps popping up that the "+" is not permitted symbol in this context. 

    Thanks for your help! 

    if(HelpCenter.user.role!='anonymous') {
       $('#query')
    .attr('placeholder',
    'Hi '+HelpCenter.user.name+', how can we help?');
      }
    0

Please sign in to leave a comment.

Powered by Zendesk