DEV Community

Cover image for Easiest way to add multilanguage in your website
Shuvo
Shuvo

Posted on

Easiest way to add multilanguage in your website

If you want to scale your website then it'd be a really good idea to add multiple language support in your site so that language wont be a barrier.

Now this might sound really hard and complicated but tolgee.io makes it really easy. You can literally make a multilingual website UNDER 10 MINUTES. And it is framework independent. So you can use it with React, Vue JS or any framework that you want. But in this article we will see how to use it with vanilla JavaScript project.

So let me show you how to do just that in just 10 simple steps:
1) So first you have to create an account on tolgee.io

2) Then click on Go to app then click on ADD Tolgee go to app button
Tolgee add button

3) Then you have to enter the name of you project/website. And select the languages you want to add to your website. Tolgee create project

4) The click on your project. Project list the add the texts that you want to show in those languages. Add text button
Feel free to use Google translate.
Add text in tolgee project Your key should be named like a variable.
Added texts list

5) Then click on integrate and choose your framework which will be JS in our case and create a api key. And make sure you copy it, we will need it in a moment.
creating api key

6) Now we are finally ready for the coding part. So create a index.html and link https://unpkg.com/@tolgee/core/dist/tolgee.umd.min.js in it. It is the CDN for Tolgee SDK.

<html>
<head>
    <meta charset="UTF-8">
    <title>Hello world</title>
</head>
<body>
    <h1>%-%welcome_message%-%</h1>
    <div>%-%msg_long%-%</div>
</body>
<script src="https://unpkg.com/@tolgee/core/dist/tolgee.umd.min.js"></script>
</script src="main.js"></script>
</html>
Enter fullscreen mode Exit fullscreen mode

Notice that we have some weird syntax. What is %-%welcome_message%-% and %-%msg_long%-%? Well these are just the key we have defined. These will be complied to the actual text we defined.

7) Now we need to initialize our tolgee app in main.js

const tg = new window["@tolgee/core"].Tolgee({
    apiUrl: "https://app.tolgee.io",
    apiKey: "The_API_key_You_coped",
    inputPrefix: "%-%",
    inputSuffix: "%-%",
    watch: true
});
tg.run()
Enter fullscreen mode Exit fullscreen mode

Here the inputPrefix and inputSuffix are basically the characters our key is wrapped around. In Vue JS we use double set on curly braces and single set in react. So we are doing similar thing here, just the data is coming from tolgee.
And now if you open index.html with live server you will see you get the text we defined in our tolgee project earlier. translation demo

8) But you will notice for for some moments we see those expressions uncompiled. Uncompiled tolgee expression
We don't want our users too see that. So to hide them you can implement a full screen loader.

    <div class="loader" style="height: 100vh">Loading</>
    <h1>%-%welcome_message%-%</h1>
    <div>%-%msg_long%-%</div>
Enter fullscreen mode Exit fullscreen mode
const tg = new window["@tolgee/core"].Tolgee({
    apiUrl: "https://app.tolgee.io",
    apiKey: "71mpth0erv28oidqrt14d8l01e",
    inputPrefix: "%-%",
    inputSuffix: "%-%",
    watch: true
});
tg.run().then(() => {
    //Hide the loader after tolgee has ran
    document.querySelector(".loader").style.display = "none"
})
Enter fullscreen mode Exit fullscreen mode

9) Now we want our user to be able to select a language from a drop down list and the language of webpage should change according to that. So for that lets first create a select in our html document

    <select class="lang-select">
        <option value="en">Englis</option>
        <option value="hi">Hindi</option>
        <option value="zh-Hans">Chienese (Simplified.)</option>
    </select>
    <h1>%-%welcome_message%-%</h1>
    <div>%-%msg_long%-%</div>
Enter fullscreen mode Exit fullscreen mode

10) Now finally in the javascript when the user select any language we want to translate our contents accordingly.

const tg = new window["@tolgee/core"].Tolgee({
    apiUrl: "https://app.tolgee.io",
    apiKey: "71mpth0erv28oidqrt14d8l01e",
    inputPrefix: "%-%",
    inputSuffix: "%-%",
    watch: true
})
tg.run()

let langs = document.querySelector(".lang-select")
langs.addEventListener("change", (e) => {
    //Changing the language of our page
    tg.lang = e.target.value
})
Enter fullscreen mode Exit fullscreen mode

toleee final demo

And there now we have successfully made a multilingual website using JavaScript and Tolgee.

Final thaught:

  • Tolgee is beginner friendly and easy to use
  • We have only touched the surface, there's a lot more Tolgee can do, For example on page adding and editing translation using tolgee UI
  • You can export your translations as JSON for production. See preparing for production tips

So make sure you checkout Tolgee docs and level up your skills. Its highly recommended by me.

0shuvo0 image

Discussion (9)

Collapse
tasin5541 profile image
Miftaul Mannan

I would rather go with i18

Collapse
0shuvo0 profile image
Shuvo Author

Sure,
We all have our personal preference

But do checkout the toglee UI you won't find such awesome feature

Collapse
lukeshiru profile image
LUKESHIRU

Question: Is this sponsored by any chance? Mainly because there are no mentions of a "sponsor" in the article, but it has the format of "an ad".

Collapse
0shuvo0 profile image
Shuvo Author

They wanted to but the product itself is so good that I didn't take any money upfront

Collapse
satyendrachaudhary profile image
Satyendra Chaudhary

Why would I use a third party plugin/feature to manage a static list of languages and keys? If I have to manually define those keys, I am capable of doing that on my local setup itself. Your approach will bloat application and result in unnecessary network request to new( and potentially unsecured) server. What if that server is a mean to capture client information or worse a data logger?

Collapse
0shuvo0 profile image
Shuvo Author

At production you will export your keys as a JSON.
And the tolgee UI makes it really intuitive if you check it out

Collapse
ashleyjsheridan profile image
Ashley Sheridan

Yeah, this extra overhead will result in a worse experience for users, especially if they're on slower or metered connections.

Collapse
tranduythoai14 profile image
teemo_14

awesome!

Collapse
0shuvo0 profile image
Shuvo Author

Glad you liked it