Hi, I need to make a 2nd language version of the site. Please give me some tips! Thanks,
YW
Hello @YaWb,
Here are some of the simplest solutions:
-
Duplicate each of your pages within the same project, and translate each of them.
-
Duplicate the entire project and work on two projects at the same time. (You could, for example, host one site in a /en/ folder and another in a /de/ folder).
-
Integrate the Google Translate tool into your site to automatically translate your pages at the visitor’s request.
If you don’t want to duplicate pages, i did a little tutorial here : Multi-language system (how to, step-by-step)
Recommendation:
1- build your website in one language in all aspects of design, responsiveness and placement.
2- install the required files (works only on live server 
)
3- put all variables in your text on sitely
4- translate your text file in all languages you need
Exemple of a site i did in french / english : https://radinosilicani.com
Thank you very much for sharing @kanjo, it must have taken a lot of work !
Unfortunately, I think it is a bit too complex to set up for the majority of community members, and it also requires purchasing development tools.
I didn’t want to talk too much about code (we try to avoid that here), but here is a simpler alternative that is easy to use, requires no extra tools, and only needs a Sitely project.
This script fits in a single embed and allows you to:
-
automatically change the language based on the URL (e.g., /en or /fr),
-
update the page
<title>and<meta description>(very important for search engines), -
display translated texts directly in the Sitely preview.
Simply modify the code below to add all the languages and translations you need.
You will need to add as many lines as necessary for each language, in this format: Key: `Text associated with this key`,
Important: it is very important to respect this format, put the translated text between `` and end with a comma.
<script>
// ------------------------
// Configuration and translations
// ------------------------
// Preview language in Sitely (and online if the URL does not specify a language.)
const defaultLang = "en";
// Add or edit your languages and texts here.
const translations = {
en: {
title: `My Demo Website`,
description: `Explore our demo website in multiple languages, easy to customize and tailored to your needs.`,
welcome: `Welcome to our website!`,
subtitle: `A subtitle to introduce your content`,
content: `Welcome to our demo website. Here you can see how a simple multilingual system
works in JavaScript, fully integrated into Sitely. This website automatically
changes the language based on the URL (/fr or /en) and allows using calculators
to display translated texts on all your pages.`,
button: `Contact us`
},
fr: {
title: `Mon site de démonstration`,
description: `Découvrez notre site de démonstration en plusieurs langues, facile à personnaliser et adapté à vos besoins.`,
welcome: `Bienvenue sur notre site !`,
subtitle: `Un sous-titre pour introduire votre contenu`,
content: `Bienvenue sur notre site de démonstration. Ici, vous pouvez voir comment fonctionne
un système multilingue simple en JavaScript, directement intégré dans Sitely.
Ce site permet de changer automatiquement la langue en fonction de l'URL (/fr ou /en)
et d'utiliser les calculateurs pour afficher des textes traduits sur toutes vos pages.`,
button: `Contactez-nous`
}
};
// ------------------------
// End of translations, do not touch the code below.
// ------------------------
const supportedLangs = Object.keys(translations);
const pathParts = window.location.pathname.split('/');
const langFromURL = pathParts[1]; // Result: "fr"
const currentLang = supportedLangs.includes(langFromURL) ? langFromURL : defaultLang;
const untranslatedKeyMessage = "Translation not found";
function translate(key) {
return translations[currentLang]?.[key] ?? untranslatedKeyMessage;
}
document.addEventListener("DOMContentLoaded", () => {
document.title = translate("title");
const metaDescription = document.querySelector('meta[name="description"]');
if (metaDescription) {
metaDescription.setAttribute("content", translate("description"));
}
});
</script>
How to use it
1. In Sitely, place an empty text area and format it as you like (colors, size, font, etc.).
2. Add a smart field “calculator” and paste this code inside:
return translate("content");
-
The text corresponding to the key in your main script will appear there. Replace “content” with the key for the text you want.
-
Depending on the URL, the text will display the English version (/en) or the French version (/fr).
3. At the bottom of the smart field settings, change the Expression Result Type from “Integer” to “String”
4. Finally, when your site is ready, host it in two separate folders/files, for example one named “en” and the other “fr”.
Additional information
- The and are automatically updated by the script; no calculators are needed. Do not change the names of these two keys.
- To change the default language in the Sitely preview, simply modify const defaultLang = “en”; to your desired language code. For example, use “fr” to see the text appear in French in the preview.
- For a larger site, you can create separate JSON files for translations so you don’t have to edit the code directly in Sitely, but for a small site, this script is sufficient.
- For good SEO, you will need to manually edit your sitemap.xml
Here is the script in action. I hope this can help someone.
Translate with Javascript.sitely (116 KB)
All these solutions seems very complicated to me. Anything easier?
No, not at the moment.
Wow, that response after Allan tried to… I am just amazed about the rudeness of some people.
You know what, create your website in your language, copy the text in the original website it and use Google translate and then copy-paste I the new language website.
You know Google right? Do you know how to do copy paste? [Command+C] and [Command+ V]?
Or do you need something easier dear?
1 Like
To translate your texts, there is a tool that is slightly better than Google Translate. I use Deepl, which is free, or paid for those who have a lot of text. DeepL Traduction – DeepL Translate : le meilleur traducteur au monde
I did many of those sites and the same way as Allan suggested (with en, de, fr and so on). See here one example: https://zaostrog-anita.com/
Thanks a lot Allan, but probably I am not up to par to understand it. I had a look at your file «Translate with javascrict.sitely» and then I had a total mess in my mind. The only thing I understood is where to place the code you mentioned here. OK I work in german and then I had a complete confusion. In fact I have always the name «Taschenrechner» (which means calculator), but my question is where are those calculator buttons? You put the button and defined it as «change the language». You see I am totally lost, but if it is too much for your to explain, leave it…. Thanks anyhow!
Hi @geneprofi 
It’s normal that you still see “Calculator” in Sitely’s canvas — the final text only appears in the preview.
To add a calculator, you can find it here:
Unless I misunderstood your question, no, there isn’t a button to switch languages. To change the default language (which also changes the language displayed in the canvas), you need to edit a line in the code.
And on your website, you’ll need to host your site in a separate folder for each language (for example: /de, /en, etc.).
Feel free to send me a private message if I can help 
Hallo @geneprofi
Es ist ganz normal, dass du im Sitely-Canvas weiterhin „Rechner“ siehst – der endgültige Text erscheint erst in der Vorschau.
Um einen Rechner hinzuzufĂĽgen, siehe das Bild oben.
Falls ich deine Frage nicht richtig verstanden habe: Nein, es gibt keinen Button, um die Sprache zu wechseln.
Um die Standardsprache zu ändern (was auch die im Canvas angezeigte Sprache ändert), musst du eine Zeile im Code anpassen.
Auf deiner Website musst du dann jede Sprache in einem eigenen Ordner hosten (zum Beispiel /de, /en usw.).
Schreib mir gerne eine private Nachricht, wenn ich dir helfen kann
Thanks a lot for your reply. No in fact I saw this new function (probably in Sitely 6.0), with language-change (german version). after cklicking «on klick» See attach. Thanks once again for your explanation
i added the ability to change language with the url using htaccess, if you are interested i can update my post about that.
Example : Studio 1984 Laval – Studio créatif photo, vidéo, ateliers
please update how to do it, thanks
i will when i got back from vacations 
Automatic language redirects are fairly easy to do without necessarily tinkering with sever-side files like htaccess. Most of the multi-lingual sites I create use a JavaScript file that gets uploaded to your domain. A small code snippet is then added to your main index page and the index pages of language-specific versions of your site.
The script seamlessly redirects to the language version of the site based on the users system language and remembers the choice for future visits. There is also an override option that allows users to switch back to another language if they want to. Using that option the locally stored language choice is overwritten for future visits.
The reason I prefer this option is because it fully respects GDPR choices as well as keeping analytics in tact across the site. It also minimises the risk of users getting trapped into redirect loops. The only structural requirement is that each language version of the site be in it’s own language-specific sub folder. The script can be made to work with language-specific pages rather than subfolders, but this will require some additional editing of the JavaScript.
If anyone wants a copy of the script, just let me know and I will post it here with full instructions for customising the code. If you’re not comfortable with coding, please feel free to send me a DM telling me what languages you want and I’ll happily send you a production-ready version of the script with easy to follow instructions on how to implement it.
1 Like