How to change the banner image of your Zendesk Help Center for each language
This tip was originally posted here but I think posting it here will make it easier for everyone to find.
Zendesk level: Beginner
Knowledge: Copy & Paste
Time Required: 5 minutes
Add your banner images for different locales in your assets.
Now go to your Helpcenter and click on document head template using customize design -
and copy below code in your template -
Replace the banner image names with yours. Save and publish the code.
Hurray! your Helpcenter has different banners for different languages now.
Please try it, and share your feedback. I hope, it helps.
Cheers
Team Diziana
-
This is fabulous, Trapta! Thank you for re-posting!
-
That's awesome, thanks. I'll definitely be easier to find now. And I'll add it to our HC tips list.
-
@Jessie Schutz :)
@Jennifer Rowe that will be awesome.
Team Diziana
-
Hello!
Maybe one of you can help me with a simular issue. I want to have the Company Logo (under Brand) to change whenever a customer selects the language English (GB). This because in Great Britain Help Center is written as Help Centre.
I've already uploaded both assets (Help Center and Help Centre) but I can't figure out how to code it. We make use of the Diziane Eczar theme.
I know how to do it with dynamic content but I don't like the look of it. I would prefer the logo to change completely when selecting EN-GB language.
Thank you so much in advance!
BR,
Ron
-
I think I'm close with the {{#is helper but it doesn't yet show my asset:
<header class="header-wrapper">
<div class="header">
<div class="logo">
{{#link 'help_center'}}
{{#is current_locale.name '/hc/en-gb'}}
<img src="{{asset 'FG_HC_GB.png'}}" alt="{{t 'logo'}}">
{{/is}}BR,
Ron
-
It has been fixed thanks to Diziana! For those who need it, this is the code:
<header class="header-wrapper">
<div class="header">
<div class="logo">
{{#link 'help_center'}}
{{#is current_locale.name 'LOCALE'}}
<img src="{{asset 'ASSET NAME'}}" alt="{{t 'logo'}}">
{{else}}
<img src="{{asset '.ASSET NAME'}}" alt="{{t 'logo'}}" />
{{/is}} -
Thanks for sharing the fix Ron :)
-
This seems close to what I could use. We'd like to present a different image for each user segment to create a full impression of separate pathways for each product. I'll experiment a bit and share the results here once I have something working.
-
Hi Trapta!
Your tips were very helpful! I was just wondering,
What if I'm ok keeping the same picture for all the languages, but I'd like to manually change the hero inner text for every language.
For now it's set-up like this:
Do you have any tip for me to customize it for every language? That would be extremely helpful for us! Thanks in advance
Edwin
-
I haven't used it myself but it seems like above Ron de Vries had a good way to change code based on the language.
{{#is help_center.locale 'LOCALE'}}
<img src="{{asset 'ASSET NAME'}}" alt="{{t 'logo'}}">
{{else}}
<img src="{{asset '.ASSET NAME'}}" alt="{{t 'logo'}}" />
{{/is}} -
Hi Alejandro,
Thanks, but do you know how the code would look if you refer to my example?
I'm just trying to change the banner text, not the image.
Thanks in advance.
-
I haven't used it myself but it seems like above Ron de Vries has a good way to change code based on the language. It is not specific to images or anything else. But, essentially, this part of the code, will output whatever code is below it. If it the locale matches whatever you replace the word "LOCALE" with. (i.e. en-us) This code output would then be the only code that shows up, therefore, only showing whatever text you would like.
{{#is help_center.locale 'LOCALE'}}You can change the above line of code to whatever you would like. And add anything else if necessary before the "{{else}}" or "{{/is}}"
<img src="{{asset 'ASSET NAME'}}" alt="{{t 'logo'}}">For your example, it might look something like the following:
{{#is help_center.locale 'LOCALE'}}
<h1>How can we help?</h1>
<p>Use the search bar or browse categories below</p>
{{else}}
<h1>¿Cómo podemos ayudar?</h1>
<p>Utilice la barra de búsqueda o explore las categorías a continuación</p>
{{/is}}That being said, I would look at simply using dynamic content in the guide as they provide this support better than manually adding the code. For instance, the dynamic content always defaults to a specific language of your choosing if there is not a translation.
I was able to find the documentation. Use this to use a dynamic context placeholder of your creation in those text spots. That will make changing much easier for each language and will not require you to edit the template but instead edit the dynamic content.
https://developer.zendesk.com/apps/docs/help-center-templates/helpers#dc-dynamic-content-helper
In that case, your code would look more like the following:
<h1>{{dc 'hero-title'}}</h1>
<p>{{dc 'hero-sub-title'}}</p> -
Thanks a lot Alejandro,
I just tried your technique but it didn't work out:
Any sugestion?
-
You are close.
Your formatting needs to be like this https://support.zendesk.com/hc/en-us/articles/205753348/comments/360000581387
{{#is help_center.locale 'LOCALE1'}}
<h1>LOCALE1 whatever</h1>
<p>LOCALE1 whatever</p>
{{else}}
{{#is help_center.locale 'LOCALE2'}}
<h1>LOCALE2 whatever</h1>
<p>LOCALE2 whatever</p>
{{else}}
{{#is help_center.locale 'LOCALE3'}}
<h1>LOCALE3 whatever</h1>
<p>LOCALE3 whatever</p>
{{else}}
<h1>fallback whatever</h1>
<p>fallback whatever</p>
{{/is}}
{{/is}}
{/is}} -
Hi dude,
Unfortunately, still not working I tried with 'en-us' instead of '/hc/en-us' also,
Something is off
the name current_local.name seems the be an issue here
-
Hi Edwin,
Try
{{#is current_locale.name 'English (GB)'}} -
Hi Ron,
Thanks for the help,
Unfortunately, the same thing, same errors, won't work!
-
Hi Edwin,
Do you support English (GB) or only English (US)? Can you try:
{{#is current_locale.name 'English (US)'}} -
Hi Ron,
I support the US one but it won't work still:
it seems like that error is from the actual code:
current_locale_name isn't recognized
-
As you see here
-
Can you try this but then in the header.hbs file?
<div class="hero-inner">
{{#link 'help_center'}}
{{#is current_locale.name 'English (GB)'}}
<h1> Hi, this is a test </h1>
{{/is}}
{{#is current_locale.name 'English (US)'}}
<h1> Hi, this is a test </h1>
{{/is}}
{{/link}}
</div> -
Hi, it does something, but it's not located in the right place!
I'm pretty sure I need to touch the code that I spotted, which was in Homepage_hbs
This is how it looks with your technique:
I'm close but not quite!
-
somehow, I cannot close the /#link unfortunately,
-
I am very sorry for the confusion. The code should be working as intended but it seems that Zendesk does not allow access to "current_locale" outside of the header and footer. Documentation here https://developer.zendesk.com/apps/docs/help-center-templates/header_page
Zendesk provides a way to identify the current locale in an article or homepage by using "help_center.locale" So, this needs to be replaced in your code to make it work. Specifically, replace "current_locale.name" with "help_center.locale" Documentation here https://developer.zendesk.com/apps/docs/help-center-templates/objects#help_center-object
Note: "help_center.locale" might output something different than "current_locale.name" so make sure to test each of them to make sure they work correctly. For me, "current_locale.name" outputs "English (US)" but "help_center.locale" outputs "en-us"
-
Hi Edwin
Just wondering: can't you just use dynamic content? As I understand you want to change the text ''How can we help you?'' See below example from my Help Cente which renders the {{dc.title_above_search}}.If you want to change the placeholder in the search box you can also check out this article from Wes - https://support.zendesk.com/hc/en-us/community/posts/203458866-Help-Center-Change-default-placeholder-text-in-your-Search-Box
<section class="section hero">
<div class="question">
{{dc 'title_above_search'}}
</div>
<div class="hero-inner">
{{search submit=false instant=true class='search search-full'}}
</div>
</section>
-
I mentioned using dynamic content as well. https://support.zendesk.com/hc/en-us/community/posts/115007207887/comments/1260803669169
He didn't mention a reason for not using it.
-
Hi guys,
Thanks a lot for helping out.
Correct me if I'm wrong, but Dynamic Content is useful if you're trying to translate your help-center and you've only set up one language am I correct?
I manually took a lot of time to translate every article manually using google translate + my localization skills in French since I'm French!
So I'm having all the articles in 6 different languages:
- English (the main)- French
- Spanish
- Italian
- German
- Swedish
I don't want a bigger headache honestly, If I can fix this by just using a piece of code in the homepage_hbs that's my goal, I hope you see what I mean.
I located the hero banner txt, so it shouldn't be that Hard.
I tried reading the dynamic content article several times but it just confuses the hell out of me. I prefer coding every day of the week...
-
The code is now correct, however, I'm not seeing any change in the hero inner text.
No error but the text remain the same as the regular english one
-
I am so glad you were able to see my changed posts. My posts keep saying "pending approval"
The next thing to do is put "<h1>{{help_center.locale}}</h1>" above the first "{{#is" code. This will help you identify what exactly your matching condition needs to look for as it does not seem to be matching what yoy currently have.
The good thing is that your code is working correctly now. We just need to find the correct values.
Also, how are you testing the different languages?
P.S. The dynamic content documentation page is quite overwhelming and I felt the same. What it actually does is allows you to create a new placeholder with different translations that will automatically be replaced with the correct version. In this case, though you are quite close so it should not be needed but i would defintely look into it for the future.
P.P.S. Dynamic Content is meant for more than 1 language. So, it is meant for your use case but as you have done most of the work translating the articles. It would simply be an easier way to change out the text for the banner. It should be as simple as creating a dynamic content placeholder and adding the translations and then calling it using the method I explained above. Something like "{{dc 'whateveryoucallit'}}" Again the documentation makes it seem scarier than it is. And in this instance you could be better off getting the code yoy have working instead of trying to learn dynamic content.
-
BINGO Alejandro Colon!
You hit it right!
It's working perfectly now - nice work!
Please sign in to leave a comment.
33 Comments