Documentation
Beinlang will turn your website into a multilingual website, within minutes. Beinlang will add a language switcher button on your website and let you automatically or manually translate your content without any coding.
Let's get started! Getting started
Overview
Beinlang will turn your website into a multilingual website, within minutes. Beinlang will add a language switcher button on your website and let you automatically or manually translate your content without any coding.
Let's get started! Getting started
Available languages
Languages code You can find below the list of supported languages with their 2 letters code.
Language | Code | Language | Code |
---|---|---|---|
Azerbaijan | az | Malayalam | ml |
Albanian | sq | Maltese | mt |
Amharic | am | Macedonian | mk |
English | en | Maori | mi |
Arabic | ar | Marathi | mr |
Armenian | hy | Mari | mhr |
Afrikaans | af | Mongolian | mn |
Basque | eu | German | de |
Bashkir | ba | Nepali | ne |
Belarusian | be | Norwegian | no |
Bengali | bn | Punjabi | pa |
Burmese | my | Papiamento | pap |
Bulgarian | bg | Persian | fa |
Bosnian | bs | Polish | pl |
Welsh | cy | Portuguese | pt |
Hungarian | hu | Romanian | ro |
Vietnamese | vi | Russian | ru |
Haitian (Creole) | ht | Cebuano | ceb |
Galician | gl | Serbian | sr |
Dutch | nl | Sinhala | si |
Hill Mari | mrj | Slovakian | sk |
Greek | el | Slovenian | sl |
Georgian | ka | Swahili | sw |
Gujarati | gu | Sundanese | su |
Danish | da | Tajik | tg |
Hebrew | he | Thai | th |
Yiddish | yi | Tagalog | tl |
Indonesian | id | Tamil | ta |
Irish | ga | Tatar | tt |
Italian | it | Telugu | te |
Icelandic | is | Turkish | tr |
Spanish | es | Udmurt | udm |
Kazakh | kk | Uzbek | uz |
Kannada | kn | Ukrainian | uk |
Catalan | ca | Urdu | ur |
Kyrgyz | ky | Finnish | fi |
Chinese | zh | French | fr |
Korean | ko | Hindi | hi |
Xhosa | xh | Croatian | hr |
Khmer | km | Czech | cs |
Laotian | lo | Swedish | sv |
Latin | la | Scottish | gd |
Latvian | lv | Estonian | et |
Lithuanian | lt | Esperanto | eo |
Luxembourgish | lb | Javanese | jv |
Malagasy | mg | Japanese | ja |
Malay | ms |
Getting Started
There are different ways to integrate Beinlang to your website depending on your needs.
Third party integration
Client side integration
Choose this integration if you are not using WordPress or OpenCart. This integration only requires you to paste a snippet of Javascript code in your webpage.
Third party integration
Client side integration
This section shows how to integrate Beinlang to your website. It's quick and easy.
Setup and initialization
Copy paste the following javascript code in your HTML page, just before your < / body> tag.
<script type="text/javascript" src="https://beinlang.com/beinlang.js"></script> <script> Beinlang.init({ api_key: "API_KEY" }); </script>
Replace API_KEY by your own API key. You can get an API key simply by signing up.
Put your original language in originalLanguage and the languages you want to be available in destinationLanguages.
For instance, if your website is in Bulgarian, and you want it to be available in English and japanese, you will enter 'originalLanguage' : 'bg' and 'destinationLanguages' : 'en,ja'
Then, simply reload your webpage and it is done!
You will see at the bottom right of your website a button to switch language. You can stop reading here or you can continue further to customize the button.
Playing with parameters
Here are some parameters that you can put in the setup function to customize Beinlang.
destinationLanguages (required): the list of languages you want to be available in your language switch button. You can easily add languages by adding them to the string. For instance, if you want English, Japanese, Italian and Bulgarian, you will have: 'destinationLanguages' : 'en,ja,it,bg'
loadingBar (optional): This option allows you to have a thin loading bar at the top of your screen while the content is translating. By default, the value is true.
Customize the button style
The language switch button is a simple element in your webpage like any other element. Which means that you can easily change the style (color, shape, position) using CSS rules.
The HTML code of the button looks like this :
<div class="beinlang-changelang" style="left: 20px;" > <div> <div class="beinlang-changelang-others" lang="bg" id="beinlang-bg" >Bulgarian</div> <div class="beinlang-changelang-others" lang="it" id="beinlang-it" >Italiano</div> </div> <div class="beinlang-changelang-current" lang="en" >English</div> </div>
To customize the button, you can override the three CSS classes beinlang-changelang beinlang-changelang-others beinlang-changelang-current.
For instance, adding the following rules in your CSS stylesheet will modify the button appearance.
.beinlang-changelang { background-color: #ffffff!important; border: 1px solid #222222; border-bottom: 0; } .beinlang-changelang-current,.beinlang-changelang-others { color: #000000!important; padding: 8px 8px 8px 14px!important; } .beinlang-changelang-current:hover,.beinlang-changelang-others:hover { color: #ffcc00!important; background-color: #ffffff!important; } .beinlang-changelang-current::before { content: '\25bc'; transform: scale(0.9, 0.5); position: absolute; left: 6px; }