How to Add a Google Translate Button to Your Website (2025 Guide)
Your website visitors could be from all around the world, and this means language read is spoken natively. It’s a fast and free change you can make to make your site more accessible, user-friendly, and internationally optimized.
In this tutorial, we’ll be teaching you how to implement Google Translate in your website with just a few lines of HTML and JavaScript. Let’s get started!
What Is Google Translate?
Google Translate is a free multilingual machine translation service developed by Google. It offers the ability for users to instantly translate text, web pages, and documents to and from more than 100 languages. It’s available as:
Webpage: Step-by-Step
Step 1: Get Google Translate Widget Code
Paste this in Settings → Advanced → Code Injection → Header:
<!-- Google Translate Widget -->
<div id="google_translate_element"></div>
<!-- Google Translate Script -->
<script type="text/javascript">
function googleTranslateElementInit() {
new google.translate.TranslateElement({
pageLanguage: 'en',
includedLanguages: 'en,bn,hi,ar,fr,es', // Customize this list
layout: google.translate.TranslateElement.InlineLayout.SIMPLE,
autoDisplay: false
}, 'google_translate_element');
}
</script>
<script src="https://translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script>
This will load Google Translate and initialize the widget at the top of your site.
Step 2: Style the Translate Dropdown
(Optional but recommended for better design)
Paste this in Design → Custom CSS:
#google_translate_element {
position: fixed;
top: 10px;
right: 10px;
z-index: 9999;
background: #fff;
padding: 5px 10px;
border-radius: 6px;
box-shadow: 0 0 10px rgba(0,0,0,0.1);
font-size: 14px;
}
.goog-te-gadget img {
display: none; /* Hide Google branding flag icon */
}
This CSS:
Positions the widget at the top-right corner
Styles it neatly
Hides unnecessary icons for a clean look
Full HTML Example
Here’s a complete example of a working webpage with Google Translate functionality:
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<title>How to Add Google Translate Button</title>
</head>
<body>
<p>Hello everyone!</p>
<p>Welcome to My Website</p>
<p>Translate this page in your preferred language:</p>
<!-- Google Translate Dropdown Placeholder -->
<div id="google_translate_element"></div>
<!-- Google Translate Initialization Function -->
<script type="text/javascript">
function googleTranslateElementInit() {
new google.translate.TranslateElement({ pageLanguage: 'en' }, 'google_translate_element');
}
</script>
<!-- Google Translate 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 from the dropdown above.</p>
</body>
</html>
Final Thoughts
A Google Translate button is a quick and easy way to reach a global audience with your website. This makes content accessible to non-native English speakers and people with disabilities, without the use of costly plugins or translation services.
Frequently Asked Questions (FAQ)
1. Can I use Google Translate for free on my site?
Yes! The widget is offered to you at no cost. And you don’t even need to pay for an API or subscribe: You can embed it on your website with Google’s official script.
2. Is it possible to style the Translate Dropdown?
Absolutely. You are able to style the widget with CSS like in the example above – place the widget where you want to be displayed, style the background, text, text-position, and font, and even hide the Google flag icon.
3. Where do I place the Google Translate code in my website?
Copy the HTML and JavaScript into:
Settings → Advanced → Code Injection → Header in most website builders like Squarespace or WordPress.
OrDirectly in the <head> section of your HTML file if you're coding manually.
4. Is the translate button going to make my website slow?
No, Google Translate is fast and is not a blocking call. It will have little to no impact on your website’s speed or performance.
5. Can I set my site’s default language?
Yes. Simply replace the value for pageLanguage: 'en' in the source with the language string for your site's original language (i.e., 'fr' for French, 'es' for Spanish).
6. Is it mobile-friendly?
Yes! The Google Translate widget is also compatible with mobile devices. With a little CSS styling (positioning and font sizes mainly), you can make it look good and be practical on smartphones and tablets.
7. Is there a language that Google Translate does not support?
Google Translate now has more than 100 languages. If you are not comfortable reading in English, in the dropdown you can choose your preferred language, and the content of the page will be automatically translated.
