US English (US)
BS Bosnian

Contact Us

If you still have questions or prefer to get help directly from an agent, please submit a request.
We’ll get back to you as soon as possible.

Please fill out the contact form below and we will reply as soon as possible.

  • Book a Demo
  • Product Updates
  • Contact Us
English (US)
US English (US)
BS Bosnian
  • Home
  • Multiple Languages/Translations & Localization

How To Switch Languages On The Front End

Written by Denis Omerovic

Updated at October 16th, 2024, by Amanda Stançani

Contact Us

If you still have questions or prefer to get help directly from an agent, please submit a request.
We’ll get back to you as soon as possible.

Please fill out the contact form below and we will reply as soon as possible.

  • Getting Started
    Users Accessibility New to Helpjuice? Start Here Content Management Multiple Languages/Translations & Localization Multilingual Knowledge Bases Analytics Video Tutorials
  • Customization
    Customization Guides
  • API V2
  • API V3 and Webhooks
  • Article Editor
  • Billing / Subscription
  • Authentication
  • Pricing
  • Swifty AI Chatbot
  • Swifty AI Helpbar
  • What's New
+ More

A Language Switcher gives your users the possibility to switch between the languages you provide on your multilingual knowledge base and easily find the content in their preferred language. 

Language Switcher Design

The default design of your switcher will be as shown below. The language code and flag will be included so that users can quickly locate the section they are looking for.

How to Include the Language Switcher

Simply go to your_subomain.helpjuice.com/admin/customize/main_layout and follow the steps below:

Step 1

Paste the code below somewhere in your <header> or wherever you want the switcher to appear.

{% if account.languages.size > 1 %}
    <div class="hj-language-switcher desktop">
        <div class="current-language">
            <span class="flag-icon flag-icon-{{ current_language.shortcode | slice: 3, 5 | downcase }}"></span>
            <span class="language-name">{{ current_language.name }}</span>
        </div>
        {% if on_show_question_page %}
            <div class="languages">
                {% for language in account.languages %}
                    {% if translation_codes contains language.shortcode %}
                        <div>
                            <a href="/{{ language.shortcode }}{{question.url}}" class="{% if language.name == current_language.name %}current{% endif %}">
                                <span class="language-code">{{ language.shortcode | slice: 3, 5 | upcase }}</span>
                                <span class="flag-icon flag-icon-{{ language.shortcode | slice: 3, 5 | downcase }}"></span>
                                <span class="language-name">{{ language.name }}</span>
                            </a>
                        </div>
                    {% else %}
                        <div>
                            <a href="/{{ language.shortcode }}" class="{% if language.name == current_language.name %}current{% endif %}">
                                <span class="language-code">{{ language.shortcode | slice: 3, 5 | upcase }}</span>
                                <span class="flag-icon flag-icon-{{ language.shortcode | slice: 3, 5 | downcase }}"></span>
                                <span class="language-name">{{ language.name }}</span>
                            </a>
                        </div>
                    {% endif %}
                {% endfor %}
            </div>
        {% elsif on_contact_us_page %}
            <div class="languages">
                {% for language in account.languages %}
                    <div>
                        <a href="/{{ language.shortcode }}/contact-us" class="{% if language.name == current_language.name %}current{% endif %}">
                            <span class="language-code">{{ language.shortcode | slice: 3, 5 | upcase }}</span>
                            <span class="flag-icon flag-icon-{{ language.shortcode | slice: 3, 5 | downcase }}"></span>
                            <span class="language-name">{{ language.name }}</span>
                        </a>
                    </div>
                {% endfor %}
            </div>
        {% elsif thanks %}
            <div class="languages">
                {% for language in account.languages %}
                    <div>
                        <a href="/{{ language.shortcode }}/thanks" class="{% if language.name == current_language.name %}current{% endif %}">
                            <span class="language-code">{{ language.shortcode | slice: 3, 5 | upcase }}</span>
                            <span class="flag-icon flag-icon-{{ language.shortcode | slice: 3, 5 | downcase }}"></span>
                            <span class="language-name">{{ language.name }}</span>
                        </a>
                    </div>
                {% endfor %}
            </div> 
        {% elsif author %}
            <div class="languages">
                {% for language in account.languages %}
                    <div>
                        <a href="/{{ language.shortcode }}/authors/{{ author.id }}" class="{% if language.name == current_language.name %}current{% endif %}">
                            <span class="language-code">{{ language.shortcode | slice: 3, 5 | upcase }}</span>
                            <span class="flag-icon flag-icon-{{ language.shortcode | slice: 3, 5 | downcase }}"></span>
                            <span class="language-name">{{ language.name }}</span>
                        </a>
                    </div>
                {% endfor %}
            </div>
        {% else %}
            <div class="languages">
                {% for language in account.languages %}
                    <div>
                        <a href="/{{ language.shortcode }}" class="{% if language.name == current_language.name %}current{% endif %}">
                            <span class="language-code">{{ language.shortcode | slice: 3, 5 | upcase }}</span>
                            <span class="flag-icon flag-icon-{{ language.shortcode | slice: 3, 5 | downcase }}"></span>
                            <span class="language-name">{{ language.name }}</span>
                        </a>
                    </div>
                {% endfor %}
            </div>     
        {% endif %}
    </div>
{% endif %}

Step 2

To apply styles to the switcher, paste the code below in your main.css file located at your_subdomain.helpjuice.com/admin/customize/main_css

.hj-language-switcher {
    display: inline-block;
    position: relative;
    margin-left: 10px;
    .current-language {
        position: relative;
        display: inline-flex;
        justify-content: space-between;
        align-items: center;
        padding: 10px 30px 10px 20px;
        background: #7f8d9c;
        border-radius: 2px;
        cursor: pointer;
        .flag-icon {
            margin-right: 10px;
            background-size: 16px;
        }
        .language-name {
            font-size: 14px;
            font-weight: 600;
            color: #FFFFFF;
        }
        &::after {
            content: '';
            width: 5px;
            height: 5px;
            border-top: 2px solid #FFFFFF;
            border-right: 2px solid #FFFFFF;
            position: absolute;
            right: 10px;
            top: 13px;
            transform: rotate(135deg);
            -webkit-transform: rotate(135deg);
            z-index: 999;
        }
    }
    .languages {
        position: absolute;
        display: none;
        margin: 0;
        padding: 5px;
        top: 65px;
        left: calc(50% - 125px);
        z-index: 9999;
        background: #FFFFFF;
        box-shadow: 0 0 5px rgba(87, 187, 255, .25);
        -webkit-box-shadow: 0 0 5px rgba(87, 187, 255, .25);
        border-radius: 5px;
        min-width: 250px;
        &.active {
            display: block;
        }
        &::before {
            content: '';
            width: 30px;
            height: 30px;
            background: #FFFFFF;
            transform: rotate(45deg);
            -webkit-transform: rotate(45deg);
            position: absolute;
            left: calc(50% - 15px);
            margin-top: -19px;
            z-index: -1;
            box-shadow: 0 0 5px rgba(87, 187, 255, .25);
            -webkit-box-shadow: 0 0 5px rgba(87, 187, 255, .25);
        }
        a {
            display: inline-flex;
            justify-content: flex-start;
            align-items: center;
            margin: 0;
            font-size: 14px;
            font-weight: 600;
            color: #7f8d9c;
            text-decoration: none;
            background: #FFFFFF;
            cursor: pointer;
            width: 100%;
            padding: 10px;
            border-radius: 3px;
            &.current {
                background: darken(aliceblue, 10%);
            }
            &:hover {
                text-decoration: none!important;
                background: darken(aliceblue, 10%);
            }
            .language-code {
                width: 30px;
                font-weight: bold;
            }
            .flag-icon {
                margin-right: 12px;
                background-size: 16px;
            }
            .language-name {
                font-size: 14px;
                font-weight: 600;
                color: #7f8d9c;
            }
        }
    }
    &.mobile {
        display: inline-flex;
        width: 100%;
        @media (min-width: 1024px) {
            display: none;
        }
        margin: 0 0 10px 0;
        .current-language {
            margin-left: auto;
            .flag-icon {
                margin: 0;
            }
        }
        .languages {
            top: 40px;
            left: inherit;
            right: 0;
            &::before {
                content: none;
            }
        }
    }
    &.desktop {
        @media (max-width: 1023px) {
            display: none;
        }
    }
}

Step 3

For the switcher functionality, paste the code below in your main.js file located at your_subdomain.helpjuice.com/admin/customize/main_js

$('.hj-language-switcher .current-language').on('click', function() {
    $(this).parent().find('.languages').toggleClass('active');
});


$(document).click(function(e) {
    var switcher = $('.hj-language-switcher');
    if (!switcher.is(e.target) && switcher.has(e.target).length === 0) {
        $('.hj-language-switcher .languages').removeClass('active');
    };
});

Step 4 - Optional

If you want to show country flags just copy the code below and place it somewhere in your <head> element

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/flag-icon-css/3.5.0/css/flag-icon.min.css">

That's it! You should be able to see a language switcher in your Knowledge Base.

Need Help?

If you don't feel comfortable changing the code, we will be happy to update it for you! Simply submit a new customization request and our team will make any necessary changes!

switching change language language switcher

Was this article helpful?

Yes
No
Give feedback about this article

Related Articles

  • How To Manage Translations From the Editor
  • Languages & Translations
  • How To Set The Default Knowledge Base Language
  • Languages & Translations

Copyright © 2025 - Helpjuice

Helpjuice, Inc. is a registered US Corporation, EIN # 45-2275731

Download W9
  • Help
  • Features
  • Pricing
  • About
  • Careers
  • Customers
  • Blog
  • Case Studies
  • Resources
  • Knowledge Base Examples
  • Privacy Policy
  • Terms of Service

Why is the knowledge base important?

With a knowledge base, you can allow your customers to self-help themselves, thus reducing your customer support by up to 60%. Furthermore, you can also have your team get instant answers to the questions they need without having to email themselves all using knowledge base software.

What is the purpose of a knowledge base?

The purpose of knowledge base software is to allow you to host your knowledge base/corporate wiki in one centralized 'hub'. Both your customers, and employees can now access information within seconds!

Made with from Miami, Bosnia, Morocco & Brasil

+1 (833) 387 3877 support@helpjuice.com
Expand