How To Add Google Translate Button On Your Webpage? Last Updated : 24 Jun, 2024 Comments Improve Suggest changes Like Article Like Report Google Translate is a free multilingual machine translation service developed by Google, to translate text from one language into another. It offers a website interface, mobile apps for Android and iOS, and an API that helps developers build browser extensions and software applications. Google Translate supports over 100 languages at various levels. Following are the steps to add a Google Translate button on your website which are as follows: Step 1: Start with a basic web page and add a "div" element.In the code below a "div" element with the id "google_translate_element" is created. Syntax:<div id="google_translate_element"></div> Step 2: Add Google Translate API reference. Syntax:<script type="text/javaScript"src="//translate.google.com/translate_a/element.js?cb= googleTranslateElementInit"></script> Step 3: Add Javascript function. Syntax:<script type="text/javaScript">function googleTranslateElementInit() { new google.translate.TranslateElement({ pageLanguage: 'en'}, 'google_translate_element');}</script>Example: To demonstrate adding google translate button on webpage. html <!DOCTYPE html> <html lang="en-US"> <head> <title> How To Add Google Translate Button On Your Webpage ? </title> </head> <body> <p>Hello everyone!</p> <p>Welcome to GeeksforGeeks</p> <p> Translate this page in your preferred language: </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= "https://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> Output: Output Comment More infoAdvertise with us Next Article How To Add Google Translate Button On Your Webpage? S Shubrodeep Banerjee Follow Improve Article Tags : Technical Scripter JavaScript Web Technologies JavaScript-Misc JavaScript-Questions +1 More Similar Reads How to add Google Forms to your Website Looking to collect feedback, responses, or data directly from your website visitors? Adding a Google Form to your website can be an excellent way to gather information in a quick and efficient manner. Whether you're running a survey, feedback form, or registration page, integrating Google Forms into 2 min read How to add custom google search bar inside your web-page? A search bar is necessary for a good website. Creating your own search engine from scratch might be a difficult task but this task can be skipped with the help of Google. Google has created a website to create a custom search bar, to create your own check the below link. https://programmablesearchen 2 min read How To Use ngx-translate with Angular? We’ll walk through how to use ngx-translate Angular to add multilingual support to your application. You’ll learn how to set up @ngx-translate/core and @ngx-translate/http-loader to pull in translation files stored in the assets directory. We’ll cover how to create translation keys, using the transl 3 min read How to Add Google Maps to a Website ? Integrating Google Maps into a website is a common and useful feature. We can use Google Maps API to add it to our website.Follow the below steps to Add Google Maps to a Website1. Generate/Obtain Google Maps API KeyTo fetch the location data from Google Maps first we need a Google Maps API Key. It i 3 min read How to add Google map inside html page without using API key ? There are two ways to add google maps inside HTML page: Using API key Without using API key To learn first case you can follow the article while to learn other one follow this article. To insert google map inside the HTML page, follow the steps: Go to the google maps and search your desired location 2 min read How to use Google Fonts in CSS? Google Fonts in CSS allows you to easily include and style web fonts by linking to a font's URL and applying it via the font-family property in your stylesheet. The library contains a vast collection of fonts that can be used in web design, mobile apps, etc.The syntax for using Google Fonts in CSS i 2 min read How to Add Button in HTML? Buttons in HTML are interactive elements that users can click to trigger certain actions, such as submitting forms, navigating to different pages, or executing JavaScript functions. We can use either the <button> tag or <input type="button"> tag to create a button.1. Using <button> 1 min read How to Find & Add Nofollow Links to your Website in HTML ? The nofollow attribute in links is a crucial tool for controlling how search engine crawlers interact with your website's content. By adding the nofollow attribute to specific links, you instruct search engine bots not to follow those links, preventing them from spreading content to linked pages. Th 2 min read How to Add Google Search to a WordPress Site? Adding Google Search to a WordPress site can enhance SEO ranking and improve the overall user experience. Google offers a framework, Google Programmable Search Engine, which simplifies the process of integrating a search bar into a WordPress site.Note: It is not feasible to add Google search in a Wo 4 min read How to Link a Button to Another Page in HTML? Linking a button to another page is a common requirement in web development. It can allow the users to navigate between a website's different sections or pages. This can be done using the various HTML elements.PrerequisitesHTMLCSS1. Using <a> Tag Styled as ButtonThe <a> tag is traditiona 3 min read Like