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.

LanguageCodeLanguageCode
AzerbaijanazMalayalamml
AlbaniansqMaltesemt
AmharicamMacedonianmk
EnglishenMaorimi
ArabicarMarathimr
ArmenianhyMarimhr
AfrikaansafMongolianmn
BasqueeuGermande
BashkirbaNepaline
BelarusianbeNorwegianno
BengalibnPunjabipa
BurmesemyPapiamentopap
BulgarianbgPersianfa
BosnianbsPolishpl
WelshcyPortuguesept
HungarianhuRomanianro
VietnameseviRussianru
Haitian (Creole)htCebuanoceb
GalicianglSerbiansr
DutchnlSinhalasi
Hill MarimrjSlovakiansk
GreekelSloveniansl
GeorgiankaSwahilisw
GujaratiguSundanesesu
DanishdaTajiktg
HebrewheThaith
YiddishyiTagalogtl
IndonesianidTamilta
IrishgaTatartt
ItalianitTelugute
IcelandicisTurkishtr
SpanishesUdmurtudm
KazakhkkUzbekuz
KannadaknUkrainianuk
CatalancaUrduur
KyrgyzkyFinnishfi
ChinesezhFrenchfr
KoreankoHindihi
XhosaxhCroatianhr
KhmerkmCzechcs
LaotianloSwedishsv
LatinlaScottishgd
LatvianlvEstonianet
LithuanianltEsperantoeo
LuxembourgishlbJavanesejv
MalagasymgJapaneseja
Malayms

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.

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;
}