When you enable languages that you want to support in your help center, your end users can select the language in which they want to see the information.

locale selector of the help center

In this workflow, you will learn how to edit the names of the languages that appear in the language dropdown menu in the footer of your pages in your help center.

Replace the footer template code

Replace the default code in the footer.hbs file with custom code to edit the names of the languages that appear in the language dropdown menu.

To edit the footer:

  1. In Knowledge admin, on the sidebar, click the Customize design icon ()
  2. Select Customize on the theme you want to edit
  3. Select Edit code
  4. In the Templates section, select footer.hbs, and remove the code below

    <footer class="footer">
    <div class="footer-inner">
    {{#link 'help_center'}}{{help_center.name}}{{/link}}
    <div class="footer-language-selector">
    {{#if alternative_locales}}
    <div class="dropdown language-selector">
    <button class="dropdown-toggle" aria-haspopup="true">
    {{current_locale.name}}
    </button>
    <span class="dropdown-menu dropdown-menu-end" role="menu">
    {{#each alternative_locales}}
    <a href="{{url}}" dir="{{direction}}" rel="nofollow" role="menuitem">
    {{name}}
    </a>
    {{/each}}
    </span>
    </div>
    {{/if}}
    </div>
    </div>
    </footer>

    original footer hbs.png

  5. Replace this code with the code below

    <footer class="footer">
    <div class="footer-inner">
    {{#link 'help_center'}}{{help_center.name}}{{/link}}
    <div class="footer-language-selector">
    {{#if alternative_locales}}
    <div class="dropdown language-selector">
    <button class="dropdown-toggle" aria-haspopup="true">
    {{#is current_locale.name 'English (US)'}}
    Test
    {{else}}
    {{current_locale.name}}
    {{/is}}
    </button>
    <span class="dropdown-menu dropdown-menu-nd" role="menu">
    {{#each alternative_locales}}
    <a href="{{url}}" dir="{{direction}}" rel="nofollow" role="menuitem">
    {{#is name 'English (US)'}}
    Test
    {{else}}
    {{name}}
    {{/is}}
    </a>
    {{/each}}
    </span>
    </div>
    {{/if}}
    </div>
    </div>
    </footer>

    new footer for the language selector.png

The example above replaced English (US) with the language name you want to change. Replace Test with the name you want to display in the language dropdown menu.

See the example below that shows the English (US) dropdown option replaced with Test.

Language selector output.png

Disclaimer: This article is provided for instructional purposes only. Zendesk does not support or guarantee the code. Zendesk also can't provide support for third-party technologies such as JavaScript, jQuery, or CSS. Post any issues you have in the comments section or try searching for a solution online.
Powered by Zendesk