DEV Community

Tanwi Kumari
Tanwi Kumari

Posted on • Updated on

Anyone know How to Add language translation Feature to our web Application without using Google translator ?

I need to give language translator Feature in my web applcation but not able to do that without using Google Translator API.If Any one have any idea Please give your suggestion in comment Box.

Keep Sharing!
Thank you :)

Discussion (2)

Collapse
sagarbarapatre profile image
Sagar Barapatre

Hi @tanwi2209 . If you don't want to use API then you need to add Google Translate Script on the webpage.
To use google translate script, you need to import google api containing googleTranslateElementInit() function with new google.translate.TranslateElement() and google_translate_element id.

We can use a CDN path, provided by Google, to implement the google translator.

Here is the sample code snippet I used to implement the feature.



<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <title> Google Translater for Website </title> 
</head> 
<body>
<h2>Your Web Page</h2>
 <p>Click on the dropdown button to translate.</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 class="notranslate"> This Paragraph will remain same because it is using notranslate class.</p>

<p class="translate"> This Paragraph will change because it is using translate class. </p> 
</body>
</html>  
Enter fullscreen mode Exit fullscreen mode

Hope this is what you are looking for. Thanks!

Collapse
tanwi2209 profile image
Tanwi Kumari Author

Thank you @sagarbarapatre for sharing your views.
I also used this one in my web application but after adding this one our web application is not looking good like some tab type comes on top of the website related to google translator and It doesn't look good. So, I am looking for alternative Way to add language switcher feature in my web app and it also looks good like we used in amazon, linkedin and so other different websites. If you have any idea please let me know.
Thank you :)