Add welcome note on search box along with user name

11 Comments

  • Jennifer Rowe

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

    0
  • Diziana

    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

    Great tip, Diziana! Thank you!

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

    0
  • Diziana

    Hi Kiran,

    Fixed a typo in the code.

    Try again. I believe this would work.

    Let us know if not.

    Cheers,

    Diziana

     

    0
  • Olga

    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

    Thanks for sharing, Olia!

    0
  • Alberto Martin

    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

    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

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

    0
  • Diziana

    @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

    @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

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

    0
  • Eugene Tarasula

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

    0
  • Eugene Tarasula

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

    0
  • Eugene Tarasula

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

    0
  • Eugene Tarasula

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

    0

Please sign in to leave a comment.

Powered by Zendesk