Client side integration

This section shows how to integrate Weglot 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://weglot.com/api/weglot.js"></script>
<script>
	Weglot.setup({
	  api_key: 'API_KEY',
	  originalLanguage: 'fr',
	  destinationLanguages : 'en,es',
	 });
</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 French, and you want it to be available in English and Spanish, you will enter 'originalLanguage' : 'fr' and 'destinationLanguages' : 'en,es'

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 Weglot.

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, spanish, german, chinese and italian, you will have: 'destinationLanguages' : 'en,es,de,zh,it'

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="wg-switcher" style="left: 20px;" >
   <div>
      <div class="wg-switcher-others" data-l="fr" id="wg-fr" >Français</div>
      <div class="wg-switcher-others" data-l="de" id="wg-de" >Deutsch</div>
   </div>
   <div class="wg-switcher-current" data-l="en" >English</div>
</div>

To customize the button, you can override the three CSS classes wg-switcher wg-switcher-others wg-switcher-current.
For instance, adding the following rules in your CSS stylesheet will modify the button appearance.

.wg-switcher {
    background-color: white!important;
    border: 1px solid #c0c0c0;
    border-bottom: 0;
}
.wg-switcher-current,.wg-switcher-others {
	color: black!important;
	padding: 10px 10px 10px 20px!important;
}
.wg-switcher-current:hover,.wg-switcher-others:hover {
	color: #505050!important;
	background-color: white!important;
}
.wg-switcher-current::before {
	content: '\25bc';
	transform: scale(0.9, 0.5);
	position: absolute;
	left: 5px;
}