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 
3) Then you have to enter the name of you project/website. And select the languages you want to add to your website. 
4) The click on your project. 
the add the texts that you want to show in those languages. 
Feel free to use Google translate.
Your key should be named like a variable.
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.
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>
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()
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. 
8) But you will notice for for some moments we see those expressions uncompiled. 
We don't want our users too see that. So to hide them you can implement a full screen loader. ```html
<div class="loader" style="height: 100vh">Loading</>
<h1>%-%welcome_message%-%</h1>
<div>%-%msg_long%-%</div>
```js
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"
})
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>
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
})
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.
Top comments (8)
I would rather go with i18
Sure,
We all have our personal preference
But do checkout the toglee UI you won't find such awesome feature
They wanted to but the product itself is so good that I didn't take any money upfront
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?
At production you will export your keys as a JSON.
And the tolgee UI makes it really intuitive if you check it out
Yeah, this extra overhead will result in a worse experience for users, especially if they're on slower or metered connections.
awesome!
Glad you liked it