How To Add Google Translate Button On Your Webpage? - GeeksforGeeks (2024)

Table of Contents
html Please Login to comment...

Improve

Improve

Like Article

Like

Save

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. Follow the steps to add a google translate button on your website: 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. How To Add Google Translate Button On Your Webpage? - GeeksforGeeks (1)
Step 2: Add google translate api reference. How To Add Google Translate Button On Your Webpage? - GeeksforGeeks (2)
Step 3: Add Javascript function.. How To Add Google Translate Button On Your Webpage? - GeeksforGeeks (3)
Example:

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=

cb=googleTranslateElementInit">

</script>

<p>

You can translate the content of this

page by selecting a language in the

select box.

</p>

</body>

</html>

Output: How To Add Google Translate Button On Your Webpage? - GeeksforGeeks (4) Output after translating into Arabic: How To Add Google Translate Button On Your Webpage? - GeeksforGeeks (5)



Last Updated : 14 Oct, 2022

Like Article

Save Article

Share your thoughts in the comments

Please Login to comment...

How To Add Google Translate Button On Your Webpage? - GeeksforGeeks (2024)
Top Articles
Latest Posts
Article information

Author: Francesca Jacobs Ret

Last Updated:

Views: 6287

Rating: 4.8 / 5 (48 voted)

Reviews: 95% of readers found this page helpful

Author information

Name: Francesca Jacobs Ret

Birthday: 1996-12-09

Address: Apt. 141 1406 Mitch Summit, New Teganshire, UT 82655-0699

Phone: +2296092334654

Job: Technology Architect

Hobby: Snowboarding, Scouting, Foreign language learning, Dowsing, Baton twirling, Sculpting, Cabaret

Introduction: My name is Francesca Jacobs Ret, I am a innocent, super, beautiful, charming, lucky, gentle, clever person who loves writing and wants to share my knowledge and understanding with you.