Add welcome note on search box along with user name

Diziana

June 09, 2016 11:29
Edited

Hi Guys,

Here is a new useful tip to impress your end users:

Show welcome note on the search box along with the username.

Copy the below JS code and paste it in your HC JS section:

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

Save and publish the changes

This would show username with a welcome note in search bar.

Try this. Let us know if you have face any trouble.

Cheers,

Diziana

23 Comments

Jennifer Rowe
- June 09, 2016 19:56
Zendesk Documentation Team
What a cool tip! Thanks for another great idea, Diziana.

0
Diziana
- June 16, 2016 11:31
- Edited
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
- June 15, 2016 06:52
- Edited
Zendesk Product Manager
Great tip, Diziana! Thank you!

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

0
Diziana
- June 16, 2016 11:34
- Edited
Hi Kiran,

Fixed a typo in the code.

Try again. I believe this would work.

Let us know if not.

Cheers,

Diziana

0
Olga
- October 11, 2016 19:22
- Edited
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
- October 11, 2016 23:48
Zendesk Documentation Team
Thanks for sharing, Olia!

0
Alberto Martin
- March 23, 2017 17:45
- Edited
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
- April 02, 2017 11:47
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
- April 04, 2017 13:58
I can't seem to get the text to appear above the search box - Has anyone else got this working?

0
Diziana
- April 05, 2017 14:56
@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
- April 05, 2017 15:06
@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
- November 13, 2018 22:55
None of those any longer work the way its designed here, do they?

0
Eugene Tarasula
- November 13, 2018 22:56
None of those any longer work the way its designed here, do they?

0
Eugene Tarasula
- November 13, 2018 22:56
None of those any longer work the way its designed here, do they?

0
Eugene Tarasula
- November 13, 2018 22:56
None of those any longer work the way its designed here, do they?

0
Eugene Tarasula
- November 13, 2018 22:57
None of those any longer work the way its designed here, do they?

0
Zach Proa
- September 17, 2019 21:20
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
- September 18, 2019 14:01
Zendesk Community Team
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
- September 18, 2019 14:29
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
Jason Fouchier
- September 20, 2019 17:28
Hi Zach,

The code below is what I used to personalize the search bar on a couple of pages. I have this in the script.js file -

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

Hope this helps.

0
Zach Proa
- September 20, 2019 18:55
Hi Jason -

Thanks for the response!

Unfortunately, when i copy and paste that code you provided into the script.js file, nothing happens!

I must be missing a step here...

Have a nice weekend!

0

Diziana

September 22, 2019 08:29

Hi Zach

Can you try following? Do you have SSO enabled help-center?

$(document).ready(function() {
  var placeholderText = "Hi, how can we help you?";
  if(HelpCenter.user.role!='anonymous') {
    placeholderText = 'Hi '+HelpCenter.user.name+', how can we help?'
  }
  $('#query').attr('placeholder', placeholderText);
});

Thank you

Zach Proa
- September 23, 2019 13:52
Hi!

That works!!!

Yes, we do have an SSO enabled help-center. I guess that's the difference?

Thank you!

0

Please sign in to leave a comment.

23 Comments

Didn't find what you were looking for?