How to change the banner image of your Zendesk Help Center for each language

33 Comentários

  • Jessie Schutz
    Zendesk Team Member

    This is fabulous, Trapta! Thank you for re-posting!

    0
  • Jennifer Rowe
    Zendesk Documentation Team

    That's awesome, thanks. I'll definitely be easier to find now. And I'll add it to our HC tips list

    0
  • Trapta Singh
    Community Moderator

    @Jessie Schutz :)

    @Jennifer Rowe that will be awesome.

    Team Diziana

    0
  • Ron de Vries

    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

    0
  • Ron de Vries

    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

    0
  • Ron de Vries

    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}}

    0
  • Brett Bowser
    Zendesk Community Team

    Thanks for sharing the fix Ron :)

    1
  • Joost Allard

    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. 

    1
  • Edwin

    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

    0
  • Alejandro Colon

    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}}
    0
  • Edwin

    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.

     

     

    0
  • Alejandro Colon

    Edwin

    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>
    1
  • Edwin

    Thanks a lot Alejandro,

     

    I just tried your technique but it didn't work out:

     

    Any sugestion?

    0
  • Alejandro Colon

    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}}
    0
  • Edwin

    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

     

    0
  • Ron de Vries

    Hi Edwin

    Try 

     {{#is current_locale.name 'English (GB)'}}
    0
  • Edwin

    Hi Ron,

     

    Thanks for the help,

    Unfortunately, the same thing, same errors, won't work! 

    0
  • Ron de Vries

    Hi Edwin

    Do you support English (GB) or only English (US)? Can  you try:

    {{#is current_locale.name 'English (US)'}}
    0
  • Edwin

    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 

    0
  • Edwin

    As you see here

    0
  • Ron de Vries

    Edwin

    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>
    0
  • Edwin

    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! 

    0
  • Edwin

    somehow, I cannot close the /#link unfortunately,

     

    0
  • Alejandro Colon

    Edwin

    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"

    0
  • Ron de Vries

    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>

     

     

    1
  • Alejandro Colon

    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.

    1
  • Edwin

    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... 

    0
  • Edwin

    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

    0
  • Alejandro Colon

    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. 

    0
  • Edwin

    BINGO Alejandro Colon! 

    You hit it right! 

    It's working perfectly now - nice work!

    1

Por favor, entrar para comentar.

Powered by Zendesk