Easiest way to add multilanguage in your website
Tags: javascript, webdev, react, beginners
Published: 2021-10-26 15:37:39

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](https://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](https://reactjs.org), [Vue JS](https://vuejs.org/) 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](https://tolgee.io/)

2) Then click on **Go to app** then click on **ADD** ![Tolgee go to app button](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/tamtbphj1kwrm9j25iyy.png)
![Tolgee add button](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/013ut6ezcqydj8ix2ms2.png)

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](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ba009iegg7ejd3u1m9af.png)

4) The click on your project. ![Project list](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/0npn17gxwxb9niqbvon6.png) the add the texts that you want to show in those languages. ![Add text button](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/l7wg8na8m63ssuive2m2.png)
Feel free to use [Google translate.](https://translate.google.com/)
![Add text in tolgee project](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/p0w1oekva48yhfzno13x.png) *Your key should be named like a variable*.
![Added texts list](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/hqwfdyhd9nq53ojnsxxz.png)

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](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/vvhcgcc5c8ipr1p2w78k.gif)

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
<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**
```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. ![translation demo](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/4hu70g63w0zhaawtlecb.png)

8) But you will notice for for some moments we see those expressions uncompiled. ![Uncompiled tolgee expression](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/u7v5pjh3dpvn7e6dguqf.png)
  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
```html
    <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.
```js
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
})
```
![toleee final demo](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/u9mi8rbzc9ex73tetxi8.gif)

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](https://tolgee.io/docs/web/get_started/preparing_for_production) tips

So make sure you checkout [Tolgee](https://tolgee.io/) docs and level up your skills. Its highly recommended by me.

{% user 0shuvo0 %}