Use Weglot and JOIN

Want to translate your website with Weglot?

Nicolas Goudemant avatar
Written by Nicolas Goudemant
Updated over a week ago

Weglot is a site external to your site where you can translate the text found on your site.

💡 Please note: Weglot does not allow you to translate stories, so you will need to create stories according to the language you want and create a widget per language.

❗️This documentation is made for your technical team who managed the creation of your site and the integration of Weglot on your site.

The JOIN team cannot intervene for you in the modification or addition of elements into your site.

As the text contained in the scripts is not visible by Weglot, you will first have to create a story and a widget for each language. Once this is done, you will just have to go through the tutorial indicated on the Weglot website in order to put the widget code corresponding to each language where it is necessary: How to display content only in a specific language?

In particular, this code should be included in the <head> part of your site:

<style>
.widget {
display: none;
}
html[lang="fr"] .widget-fr {
display: block;
}
html[lang="en"] .widget-en {
display: block;
}
</style>

<div
class="widget widget-en"
id="list-bubble-demo-widget-en"
style="margin: 5px 2px; min-height: 81px;"
></div>
<script
src="https://showcase.join-stories.com/widgets/demo-widget-en/index.js"
data-join-widget-id="list-bubble-demo-widget-en"
data-join-widget-alias="demo-widget-en"
type="text/javascript"
></script>

<div
class="widget widget-fr"
id="list-bubble-demo-widget-fr"
style="margin: 5px 2px; min-height: 81px;"
></div>
<script
src="https://showcase.join-stories.com/widgets/demo-widget-fr/index.js"
data-join-widget-id="list-bubble-demo-widget-fr"
data-join-widget-alias="demo-widget-fr"
type="text/javascript"
></script>

Of course, you will have to adapt to the languages you want. Click here to see an example of the code.

Did this answer your question?