Add a Translation tool to Boost Website Global Reach

Enhance your website’s global accessibility with a sleek translation button built using HTML, CSS, and JavaScript. This interactive widget floats on the side of your page, enabling visitors to translate your content into multiple languages using Google Translate.

The button features smooth hover effects, a clean translation icon, and a dropdown menu for language selection. Its structure ensures seamless integration, with a script for delayed appearance and intuitive language switching.

This beginner-friendly tool boosts user engagement and global reach, allowing visitors to access your content in their preferred language without disrupting your website’s flow.

Table of Contents

How to Install the Translation Button:

Follow these steps to add the translation button to your website. Copy the code exactly and follow each step carefully to ensure proper functionality.

1. Translation Button HTML code:

   <!-- Translation Button HTML -->
   <div class="translateContainer" id="translateContainer" style="display:none;" translate="no">
     <button class="translateBtn" id="translateToggle" aria-label="Translate"></button>
     <div class="langDropdown" id="langDropdown">
       
       <button data-lang="page">Page Language</button>
       <button data-lang="system">System Language</button>
       <hr>
       <button data-lang="en">English</button>
       <button data-lang="hi">Hindi</button>
       <button data-lang="ur">Urdu</button>
       <button data-lang="ar">Arabic</button>
       <button data-lang="bn">Bengali</button>
       <button data-lang="te">Telugu</button>
       <button data-lang="gu">Gujarati</button>
       <button data-lang="ta">Tamil</button>
       <button data-lang="ml">Malayalam</button>
   
   <!-- Add More Languages list-->
   
     </div>
   </div>
   <!-- Hidden Google Translate Element -->
   <div id="google_translate_element"></div>

   Copy the HTML code.

   No changes are needed unless you want to add more languages to the dropdown.

   Paste it just above the closing </body> tag in your website.

2. Translation Button CSS code:

   <style>
   .translateContainer {
     box-shadow: 0 0 9px -2px rgba(123,104,238,0.23);
     background:#F5C26B;
     border-radius: 10px 0 0 10px;
     padding:0px 24px 0px 0px;
     position: fixed;
     bottom: 40%;
     right: 5px;
     z-index: 9999;
     user-select: none;
   }
   .translateBtn {
     background: none;
     border: none;
     cursor: pointer;
     padding: 6px 6.5px 0px 6.5px;
     border-radius: 50%;
     transition: background 0.2s ease;
   }
   .translateBtn:hover {
     box-shadow: 0 0 5px rgba(0,0,255,0.18), 0 0 10px rgba(0,0,255,0.144), 0 0 20px rgba(0,0,255,0.108);
   }
   .translateBtn::before {
     content: '';
     display: inline-block;
     width: 25px;
     height: 25px;
     background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M8 15H3.5A2.502 2.502 0 0 1 1 12.5v-9A2.502 2.502 0 0 1 3.5 1h9A2.502 2.502 0 0 1 15 3.5V8h-1V3.5A1.502 1.502 0 0 0 12.5 2h-9A1.502 1.502 0 0 0 2 3.5v9A1.502 1.502 0 0 0 3.5 14H8zm-.038-4.811a9.77 9.77 0 0 1-3.766 1.796l-.242-.97a8.816 8.816 0 0 0 3.282-1.532A9.264 9.264 0 0 1 4.888 5H4V4h3.279l-.544-.544.707-.707L8.692 4H12v1h-.914A9.836 9.836 0 0 1 9.78 8.152a3.853 3.853 0 0 0-1.82 2.037zm.032-1.383A8.167 8.167 0 0 0 10.058 5H5.922a8.18 8.18 0 0 0 2.072 3.806zM23 20.447v-8.894A2.525 2.525 0 0 0 20.484 9h-8.931A2.556 2.556 0 0 0 9 11.553v8.894A2.556 2.556 0 0 0 11.553 23h8.894A2.556 2.556 0 0 0 23 20.447zM20.484 10A1.517 1.517 0 0 1 22 11.516v8.968A1.517 1.517 0 0 1 20.484 22h-8.968A1.517 1.517 0 0 1 10 20.484v-8.968A1.517 1.517 0 0 1 11.516 10zm-2.086 8h-4.796l-1.159 2.23-.886-.46L16 11.215l4.443 8.555-.886.46zm-.52-1L16 13.385 14.122 17zM6 22.01a2.003 2.003 0 0 1-2-2v-2.303l1.646 1.646.707-.707L3.506 15.8.659 18.646l.707.707L3 17.72v2.292a3.003 3.003 0 0 0 3 3h2.058v-1zM22.646 4.647L21 6.293V4a3.003 3.003 0 0 0-3-3h-2v1h2a2.003 2.003 0 0 1 2 2v2.281l-1.634-1.635-.707.707 2.847 2.848 2.848-2.848z"/><path fill="none" d="M0 0h24v24H0z"/></svg>') no-repeat center;
     background-size: contain;
   }
   .langDropdown {
     display: none;
     position: absolute;
     top: 40px;
     right: 0;
     background: #fff;
     border: 1px solid #ddd;
     border-radius: 10px;
     box-shadow: 0 3px 8px rgba(0,0,0,0.15);
     min-width: 180px;
     max-height: 220px;
     overflow-y: auto;
     padding: 6px 0;
     opacity: 0;
     transform: translateY(-10px);
     transition: opacity 0.2s ease, transform 0.2s ease;
   }
   .langDropdown.show {
     display: block;
     opacity: 1;
     transform: translateY(0);
   }
   .langDropdown button {
     width: 100%;
     background: none;
     border: none;
     text-align: left;
     padding: 8px 16px;
     font-size: 14px;
     cursor: pointer;
     transition: background 0.2s ease;
   }
   .langDropdown button:hover {
     background: #f5f5f5;
   }
   .langDropdown button.selected::after {
     content: '\2713';
     position: absolute;
     right: 16px;
     font-size: 14px;
   }
   .langDropdown hr {
     border: none;
     border-top: 1px solid #eee;
     margin: 4px 0;
   }
   .goog-te-banner-frame.skiptranslate,
   .goog-logo-link,
   #goog-gt-tt,
   body > .skiptranslate {
     display: none !important;
   }
   body {
     top: 0 !important;
   }
   #google_translate_element {
     display: none;
   }
   </style>

   Copy the CSS code.

   No changes are required unless you want to customize colors, positioning, or fonts.

   Add it inside a <style> tag in your <head> section or in your existing stylesheet.

3. Translation Button JavaScript code:

   <script>
   // Show button after 1 seconds
   window.addEventListener('load', function() {
     setTimeout(function() {
       document.getElementById('translateContainer').style.display = 'block';
     }, 1000);
   });
   
   let systemLang = navigator.language.slice(0, 2);
   let pendingLang = null;
   let currentLang = 'page'; // Initial selection
   
   function loadGoogleTranslate() {
     if (!window.googleTranslateElementInit) {
       window.googleTranslateElementInit = function() {
         new google.translate.TranslateElement({
           pageLanguage: 'en',
           includedLanguages: 'en,hi,ur,ar,bn,te,gu,ta,ml',
           autoDisplay: false
         }, 'google_translate_element');
   
         if (pendingLang) {
           const select = document.querySelector('.goog-te-combo');
           if (select) {
             select.value = pendingLang;
             select.dispatchEvent(new Event('change'));
             pendingLang = null;
           }
         }
       };
       const s = document.createElement('script');
       s.src = '//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit';
       document.body.appendChild(s);
     }
   }
   
   // Set initial selected class
   document.querySelector(`#langDropdown button[data-lang="${currentLang}"]`).classList.add('selected');
   
   // Toggle Dropdown
   const toggle = document.getElementById('translateToggle');
   const menu = document.getElementById('langDropdown');
   
   toggle.addEventListener('click', () => {
     const isShown = menu.classList.contains('show');
     menu.classList.toggle('show', !isShown);
     if (!isShown) loadGoogleTranslate();
   });
   
   document.addEventListener('click', e => {
     if (!toggle.contains(e.target) && !menu.contains(e.target)) {
       menu.classList.remove('show');
     }
   });
   
   // Language Selection
   document.querySelectorAll('#langDropdown button').forEach(btn => {
     btn.addEventListener('click', () => {
       const lang = btn.getAttribute('data-lang');
       
       document.querySelectorAll('#langDropdown button').forEach(b => b.classList.remove('selected'));
       btn.classList.add('selected');
       currentLang = lang;
   
       let targetLang;
       if (lang === 'page') targetLang = 'en';
       else if (lang === 'system') targetLang = systemLang;
       else targetLang = lang;
   
       const select = document.querySelector('.goog-te-combo');
       if (select) {
         select.value = targetLang;
         select.dispatchEvent(new Event('change'));
       } else {
         pendingLang = targetLang;
         loadGoogleTranslate();
       }
       menu.classList.remove('show');
     });
   });
   </script>

   Copy the JavaScript code.

   No changes are needed unless you want to add more languages or adjust the delay time.

   Paste it just before the closing </body> tag.

Info! Ensure your website is compatible with Google Translate. Some dynamic or complex content may not translate perfectly. Test the button after installation to verify functionality.

How to Add More Languages to the Translation Button

To expand your translation button with more languages, modify the HTML and JavaScript code to include additional languages supported by Google Translate. Follow these steps to update the dropdown menu and ensure seamless translation for a global audience.

1. Add Languages to the HTML Dropdown

   Locate the <div class="langDropdown"> in the HTML code. Add new <button> elements for each language inside this div, before the closing </div>. Each button needs a data-lang attribute with the language code and the language name as text. For example, to add Spanish and French, include:

   <button data-lang="es">Spanish</button>
   <button data-lang="fr">French</button>
       

   Use language codes from the supported languages table (e.g., es for Spanish, fr for French).

2. Update the JavaScript Language List

   In the JavaScript code, find the includedLanguages parameter in the google.translate.TranslateElement function (e.g., 'en,hi,ur,ar,bn,te,gu,ta,ml'). Add the new language codes to this comma-separated list. For example, to include Spanish and French, update it to:

   includedLanguages: 'en,hi,ur,ar,bn,te,gu,ta,ml,es,fr'
       

   Ensure the codes match those in the HTML dropdown.

3. Test the Changes

   After updating the HTML and JavaScript, save your changes and test the button on your website. Click the button, select the new languages from the dropdown, and verify that the content translates correctly using Google Translate.

Languages Supported by the Translation Button

The translation button supports a wide range of languages through Google Translate, making your website accessible to a global audience. Below is a comprehensive table listing the supported languages and their corresponding language codes, which you can use to customize the button’s dropdown menu.

S.No	Language Code	Language Name
1	af	Afrikaans
2	sq	Albanian
3	am	Amharic
4	ar	Arabic
5	hy	Armenian
6	az	Azerbaijani
7	eu	Basque
8	be	Belarusian
9	bn	Bengali
10	bs	Bosnian
11	bg	Bulgarian
12	ca	Catalan
13	ceb	Cebuano
14	zh-CN	Chinese (Simplified)
15	zh-TW	Chinese (Traditional)
16	co	Corsican
17	hr	Croatian
18	cs	Czech
19	da	Danish
20	nl	Dutch
21	en	English
22	eo	Esperanto
23	et	Estonian
24	fi	Finnish
25	fr	French
26	fy	Frisian
27	gl	Galician
28	ka	Georgian
29	de	German
30	el	Greek
31	gu	Gujarati
32	ht	Haitian Creole
33	ha	Hausa
34	haw	Hawaiian
35	he	Hebrew
36	hi	Hindi
37	hmn	Hmong
38	hu	Hungarian
39	is	Icelandic
40	ig	Igbo
41	id	Indonesian
42	ga	Irish
43	it	Italian
44	ja	Japanese
45	jw	Javanese
46	kn	Kannada
47	kk	Kazakh
48	km	Khmer
49	ko	Korean
50	ku	Kurdish
51	ky	Kyrgyz
52	lo	Lao
53	la	Latin
54	lv	Latvian
55	lt	Lithuanian
56	lb	Luxembourgish
57	mk	Macedonian
58	mg	Malagasy
59	ms	Malay
60	ml	Malayalam
61	mt	Maltese
62	mi	Maori
63	mr	Marathi
64	mn	Mongolian
65	my	Myanmar (Burmese)
66	ne	Nepali
67	no	Norwegian
68	ny	Nyanja (Chichewa)
69	ps	Pashto
70	fa	Persian
71	pl	Polish
72	pt	Portuguese
73	pa	Punjabi
74	ro	Romanian
75	ru	Russian
76	sm	Samoan
77	gd	Scots Gaelic
78	sr	Serbian
79	st	Sesotho
80	sn	Shona
81	sd	Sindhi
82	si	Sinhala
83	sk	Slovak
84	sl	Slovenian
85	so	Somali
86	es	Spanish
87	su	Sundanese
88	sw	Swahili
89	sv	Swedish
90	tl	Tagalog
91	tg	Tajik
92	ta	Tamil
93	te	Telugu
94	th	Thai
95	tr	Turkish
96	uk	Ukrainian
97	ur	Urdu
98	uz	Uzbek
99	vi	Vietnamese
100	cy	Welsh
101	xh	Xhosa
102	yi	Yiddish
103	yo	Yoruba
104	zu	Zulu

Translation Button Features:

The translation button is designed to appear a few seconds after the page loads to maintain optimal website performance. It is fully customizable and ensures a seamless user experience across devices.

1. Delayed appearance to avoid impacting page load speed
2. Fully responsive design compatible with desktops, tablets, and mobiles
3. Dropdown menu for intuitive language selection
4. Powered by Google Translate for reliable multi-language support
5. Easily customizable position, colors, and languages via CSS and JavaScript

Benefits of Using the Translation Button

Integrating this translation button significantly enhances user accessibility by allowing visitors to view your website in their preferred language.

It expands your global reach by making your content accessible to international audiences through Google Translate.

The button is non-intrusive, appearing subtly with a dismissible dropdown to ensure a smooth browsing experience.

It adds a modern, professional touch to your website, guiding users to translate content effortlessly.

How does the translation button enhance website accessibility?

The translation button allows users to switch your website’s content to their native language using Google Translate, making it accessible to a diverse global audience and improving user engagement.

Can I add more languages to the translation button?

Yes, you can customize the language options by adding or removing entries in the HTML dropdown and updating the includedLanguages parameter in the JavaScript code to match.

Is the translation button easy to integrate into my website?

Absolutely, the button requires minimal setup with basic HTML, CSS, and JavaScript, making it simple to add to any website in just a few minutes.

Will the translation button slow down my website?

No, the button is optimized with a delayed appearance to ensure it doesn’t affect your website’s loading speed, providing a seamless experience for users.

Related Posts

Final Thoughts

The translation button is a powerful yet simple tool to enhance user accessibility and expand your website’s global presence. By implementing it with HTML, CSS, and JavaScript, you can offer a professional, interactive experience that caters to a diverse audience.

With its responsive design, delayed appearance, and customizable options, this button is ideal for any website aiming to boost user engagement and accessibility through Google Translate.