Many people from different places speak different languages like, Hindi, English, Gujarati, French, and more. It's tough to write content in all these languages for our website, but we can give users the option to view the content of our website in their preferred language. To do this, we can add Google Translate. With a bit of code, you can add this feature, translating text on our website into over 130+ languages.
So in this guide, I will show you how to do it step-by-step using JavaScript.
- Obtain the Google Translate API Key:
- Include Google Translate API script:
- Create a Container for the Translation Widget:
- Initialize the Translation Widget:
- Explanation of API Key Usage:
1: Obtain the Google Translate API Key:
Obtaining an API key from Google Cloud Console is the first step to adding Google Translate to your website. I'm going to lead you through a few steps so you get it immediately.
- Go to the Google Cloud Console and log in. Look for the menu icon in the top left corner. Click on it, then navigate to "APIs & Services" and select "Credentials".
- Once you click on the Credentials page, you'll find options for creating APIs.
- To create an API, click on "Create Credentials". A dropdown menu will appear; choose "API key" to generate it.
- Copy the API key that appears and securely paste it. This key will be essential for our project later on. Do not share your API key publicly.
2. Include Google Translate API script:
<script src="https://translate.google.com/translate_a/element.js?cb=googleTranslateElementInit&"></script>
3. Create a container for the translation widget:
Create a div container for the translation tool by adding an attribute with an ID. Even though the translation tool might still work if the text is outside this div, but it's best to keep your content within this div element for consistent translation results.
<div id="google_translate_element">Welcome to our CodeMafias.</div>4. Initialize the Translation Widget:
After you need to initialize the Google Translate widget with JavaScript, define the googleTranslateElementInit function, which will be called once the translation script is loaded. Customize the function according to your preferences, specifying the page language, including languages in the dropdown, and whether the widget should be displayed automatically.
<script>
function googleTranslateElementInit() {
new google.translate.TranslateElement({
pageLanguage: 'en', // Language of the webpage
autoDisplay: false, // Do not display the widget automatically
}, 'google_translate_element');
}
</script>To selectively preserve specific options rather than all languages, utilize the "includedLanguages" attribute to choose the desired languages.
Like this:
includedLanguages: 'es,fr,de',5. Explanation of API Key Usage:
It's important to note that in the provided code, the API key is not necessary because you are using the Google Translate Element JavaScript library provided by Google. This library does not require an API key for translation functionality.
But, if you are using the Google Cloud Translation API directly in your own JavaScript code (not through the Translate Element), you would typically include your API key as a parameter when making requests to the API. Here's how you would modify your code to include an API key:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Google Translate</title>
</head>
<body>
<div id="google_translate_element">
<h1>Welcome to our CodeMafias.</h1>
<p>Now you can write anything and check.</p>
</div>
<script>
function googleTranslateElementInit() {
new google.translate.TranslateElement({
pageLanguage: 'en', // Language of the webpage
autoDisplay: false, // Do not display the widget automatically
}, 'google_translate_element');
}
</script>
<script
src="https://translate.google.com/translate_a/element.js?cb=googleTranslateElementInit&key=YOUR_ACTUAL_API_KEY">
</script>
</body>
</html>Make sure to replace YOUR_ACTUAL_API_KEY with your real API key at the end of the link, if you are using the Google Cloud Translation API directly in your own JavaScript code. Leaving "key=" intact is essential for the proper functioning of the Google Translate widget.