How to Add a Clean, Minimal Google Translate Widget in Squarespace
An increasingly interconnected world, making your website available to international visitors is no longer a bonus; it is a must. But if you’re someone who uses Squarespace, enabling multilingual support doesn’t mean you have to pollute your design with bulky translation bars or old-school widgets.
This how-to shows you the best way to add a Google Translate dropdown to your Squarespace 7.1 site in three simple steps that are easy to follow along. Add a few lines of code and support for reading your content in 14 different languages, including Bengali, Hindi, Arabic, French, and more, will be available without any delays or loss of style.
No plugins, no fat labels, no forced anything, not even breaking your layout! Whether you run a global brand, a multilingual blog, or simply want to make your content more accessible, this is the simplest, cleanest option.
Let’s walk through the step-by-step process to build a sleek, multilingual experience the right way.
What You’ll Achieve
By the end of this guide, your Squarespace website will have:
A clean, floating Google Translate widget
Only 5–6 language options (e.g., English, Bengali, Hindi, Arabic, French, Spanish)
No “Choose Language” label — just a compact dropdown
Fixed top-right positioning, across all pages (or only selected ones if you prefer)
Tools You’ll Need
Squarespace 7.1 or Fluid Engine
Access to Code Injection or Code Blocks
A few minutes to copy-paste code
Step-by-Step Guide
Step 1: Open Code Injection in Squarespace
To display the widget on every page of your site:
Log in to your Squarespace account
Go to Settings → Advanced → Code Injection
In the Footer box, paste the code from Step 2
Click Save
Step 2: Add the Full Google Translate Code
Paste the following code into the Footer section:
<!-- 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>
Step 3: Publish and Test
Once saved:
Visit your live website (not just the preview mode)
You’ll see a small language dropdown floating in the top-right
Click to switch between your selected languages
The page content will translate dynamically
✔ No “Choose Language” label
✔ Only the languages you selected
✔ Clean integration with modern design
Want It on One Page Only?
If you don’t want the widget on every page, here’s how to add it to a single page only:
Go to Pages → [Your Page] → Edit
Add a Code Block
Paste the JavaScript and <div> (exclude <style> if you already styled globally)
Then go to Pages → Custom code → Custom CSS and paste:
#google_translate_element {
position: fixed;
top: 10px;
right: 20px;
z-index: 999999;
}
.VIpgJd-ZVi9od-xl07Ob-lTBxed span:first-child > span {
display: none !important;
}
That’s it — this version will only load where you placed it.
Customize Your Language Options
The widget currently includes:
includedLanguages: 'en,bn,hi,ar,fr,es'
You can replace or add more:
| Language | Code |
|---|---|
| English | en |
| Bengali | bn |
| Hindi | hi |
| Arabic | ar |
| French | fr |
| Spanish | es |
| Chinese | zh-CN |
| German | de |
| Japanese | ja |
Separate each with a comma — no spaces.
Pro Tips
Test in incognito or another browser — Google Translate sometimes uses cached sessions
Want flag icons instead of dropdown? That’s possible with custom scripting
Works great on both desktop and mobile — just adjust the top and right values for responsiveness
Conclusion
According to the article, adding Google Translate to your Squarespace site, but to have everything look clean and professional, can be a big deal. This beautiful and easy-to-use solution allows your visitors to access multiple languages, and it doesn’t mess with your design.
No plugins. No external tools. A couple of lines of code, and a globally ready website.
Frequently Asked Questions (FAQ)
1. Will this Google Translate widget have any impact on the speed or SEO of my site?
Not significantly. The widget is also applesauce and pulls from Google’s servers. It generates no static translated pages for SEO, so these translations are for users only, not indexing.
2. How can I delete the widget label “Choose Language”?
Yes! The following CSS will automatically hide that default label, giving you a drop-down menu that looks good.
3. Can I choose which languages to show in the dropdown?
Absolutely. Simply customize the includedLanguages list in the JavaScript (en,bn,hi,ar,fr,es, etc.) to show only the languages you want.
4. Will it work on desktop and mobile?
Yes. The widget is fully responsive. You can position it with CSS (top, right, perhaps) for more room on smaller devices.
5. Is there a way to have this widget only on one page?
Yes. Use a Code Block on the desired page instead of Code Injection to include the widget code. This also restricts the widget to that page.
6. Can flags be displayed instead of a dropdown?
Not using Google’s native widget, no — but yes, you can by using custom scripting and some CSS to turn your Google’s default dropdown into clickable flag icons for a more visual flair.
7. Why does the widget not appear on my site when I am in the preview mode of my site?
Google Translate scripts will work only when your site is live. Now open your site in a new tab/incognito to see it.