Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
How To Add Google Translate Button On Your Webpage?
We can add a Google Translate button on our webpage by using the Google Translate API. We need to create a script that calls the API and adds the button to our webpage. Once added, users will be able to translate our webpage to their preferred language.
Here's an example of how to add a Google Translate button to your webpage using the Google Translate API −
Go to the Google Cloud Console (https://console.cloud.google.com/) −
To create a new project, click Select Project and the following section will be visible −
Once the project is created, navigate to the "APIs & Services" section and click on "Enable APIs and Services".
Search for the "Google Translate API" and enable it for your project.
Go to the "Credentials" section and create a new API key.
Copy the API key and add it to the following code snippet, replacing "YOUR_API_KEY" with your actual key −
<!DOCTYPE html>
<html>
<head>
<title>Google Translate Button</title>
</head>
<body>
<div id="google_translate_element"></div>
<script type="text/javascript">
function googleTranslateElementInit() {
new google.translate.TranslateElement({
pageLanguage: 'en', layout:
google.translate.TranslateElement.InlineLayout.HORIZONTAL, autoDisplay:
false, includedLanguages: 'fr,de,es', gaTrack: true, gaId: 'YOUR_API_KEY'
}, 'google_translate_element');
}
</script>
<script type="text/javascript" src="https://translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script>
</body>
</html>
Now, paste the code in the HTML of your webpage where you want the button to appear.
You can customize the code to select the languages you want to offer as options for translation and the layout of the button.
Save your changes and refresh the webpage to see the Google Translate button. Test the button to make sure it is working correctly and that it is translating the webpage as expected. Update the code if necessary to reflect any changes to your website or languages.
Note: As the API is a paid service, you will be charged based on your usage.
Output
After configuring the API_KEY the button will be added to your webpage.
10K+ Views
