CODEWITHSUNDEEP
javascripthtmlgoogle-translate
user14929188
user14929188

Reputation:

How do I automatically translate my website into the user's language?

I have a website in English, and recently some users reported that they do not know English, so I thought, maybe the site is not accessible to everyone, because some do not know English.

So my question is: is there any way for the website to automatically translate into the user's language?

I've been searching, it seems that Google has a translation API, is this what I need?

EDIT

I want to detect the user's browser language and translate the page into the user's browser language. We can obtain the language of the browser using navigator.language || navigator.userLanguage in JavaScript. Is there any way to integrate this with the Google API and then automatically translate without requiring user interaction?

I think it may be possible through control structures and methods, or by passing a variable as a parameter on the Googgle Translate website, am I right?
Please, I need help, I don't want the user to choose the language, I want to translate automatically, I want to recognize the language of the user's browser and automatically translate

Note: I use <meta charset="UTF-8">, does this affect anything?

Upvotes: 4

Views: 7167

Answers (3)

user2496130
user2496130

Reputation: 157

Is it ok, to make a request to google services on behalf of the user? Google will gleefully want to know what page the user is surfing, and will know by the automatic translation request. This will have to be encapsulated by an opt-in on site load.

Upvotes: -1

coder9927
coder9927

Reputation: 190

Remember how you asked me how I can detect the user's language? Well I finally came up with a code for that. Code is below.

let lang = window.navigator.languages ? window.navigator.languages[0] : null;
    lang = lang || window.navigator.language || window.navigator.browserLanguage || window.navigator.userLanguage;

let shortLang = lang;
if (shortLang.indexOf('-') !== -1)
    shortLang = shortLang.split('-')[0];

if (shortLang.indexOf('_') !== -1)
    shortLang = shortLang.split('_')[0];

console.log(lang, shortLang);
I hope this is what you are looking for!

Upvotes: 2

coder9927
coder9927

Reputation: 190

This answer might answer the question and the solution is from w3schools. What it basically does is that a dropdown will be created with different types of languages. Here is the code, tell me if it works.

    <!DOCTYPE html>
<html lang="en-US">
<body>

<h1>My Web Page</h1>

<p>Hello everybody!</p>

<p>Translate this page:</p>

<div id="google_translate_element"></div>

<script type="text/javascript">
function googleTranslateElementInit() {
  new google.translate.TranslateElement({pageLanguage: 'en'}, 'google_translate_element');
}
</script>

<script type="text/javascript" src="//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script>

<p>You can translate the content of this page by selecting a language in the select box.</p>

</body>
</html>

I hope this is what you are looking for.

Upvotes: 1

Related Questions