Add welcome note on search box along with user name
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,
-
What a cool tip! Thanks for another great idea, 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,
-
Great tip, Diziana! Thank you!
Update: It didn't work for me when I tried it; I'll revisit it later.
-
Hi Kiran,
Fixed a typo in the code.
Try again. I believe this would work.
Let us know if not.
Cheers,
-
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?');
} -
Thanks for sharing, Olia!
-
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?
-
Is there a way to make this appear in the different HC languages?
I tried using dynamic text but it didn't work
-
I can't seem to get the text to appear above the search box - Has anyone else got this working?
-
@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. -
@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:
- 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>
- 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. - Let's say you have put a h3 tag like this with a default value:
-
None of those any longer work the way its designed here, do they?
-
None of those any longer work the way its designed here, do they?
-
None of those any longer work the way its designed here, do they?
-
None of those any longer work the way its designed here, do they?
-
None of those any longer work the way its designed here, do they?
-
I would love to add this to our HC... But I cant seem to get it to work. Is this code no longer current?
-
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!
-
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?');
}
Please sign in to leave a comment.
19 Comments