Step 1: Add the Google Translate code to your HTML site
Once you have your API key, you can add the Google Translate code to your HTML site. There are a few ways to do this, but the easiest is to use the Google Translate Widget. To add the widget to your site, simply copy and paste the following code into your HTML:
<div id="google_translate_element"></div>
<script>
function googleTranslateElementInit() {
new google.translate.TranslateElement({pageLanguage: 'en'}, 'google_translate_element');
}
</script>
<script src="//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script>
This code will create a widget on your site that allows users to translate the page into their preferred language.
Step 2: Customize the Google Translate widget
If you want to customize the look and feel of the Google Translate widget, you can do so using CSS. Here's an example of how you can change the background color of the widget to red:
Step 3: Test the Google Translate widget
Once you've added the Google Translate code to your HTML site and customized the widget to your liking, it's time to test it out. Visit your site and try translating the page into different languages to make sure everything is working correctly.
Step 4: This will work on Server only.
With the help of the Google Translate Widget, you can make your site accessible to people who speak different languages, which can help you reach a wider audience and improve your SEO.
