Member Avatar for EmilyJohnson

Hello Everyone,

I want to integrate google flags with my website, which translate languages on click event on same page. How-ever I successfully integrated google translate with dropdown option but want to integrate google flag translations on my website.

Any type of help is appreciated.

Thanks In Advance.

  • 2 Contributors
  • 2 Replies
  • 477 Views
  • 1 Month Discussion Span
  • Latest Post Latest Post by EmilyJohnson

Dani AI

Generated

A short, practical summary (followup for ; thanks to for pointing to widget-style solutions):

Yes — flag icons can be made to trigger Google Translate on the same page by using the Google Website Translator widget as the engine and wiring custom buttons to it. However, don’t present flags as the only affordance for language choice: government and UX guidance recommend native-language labels and accessible controls instead of flags, since flags map to countries, not languages. (digital.gov)

Common client-side pattern (works quickly but is brittle): include Google’s translate element, hide its default control, then create flag buttons that open the translator menu iframe and simulate a click on the language item. Example (concept only):

<div id="google_translate_element" style="display:none"></div>

<script>
function googleTranslateElementInit(){
  new google.translate.TranslateElement({pageLanguage:'en'}, 'google_translate_element');
}

function translateTo(langName){
  var frame = document.querySelector('.goog-te-menu-frame');
  if(!frame) return;
  var items = frame.contentDocument.querySelectorAll('.goog-te-menu2-item span.text');
  items.forEach(function(s){ if(s.textContent.trim() === langName) s.click(); });
}
</script>
<script src="//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script>

This approach and variants are described in practical examples and Q&A threads; use it for prototypes or intranets, but expect breakage if Google changes the widget DOM or policy. Also note Google’s Website Translator access and recommended alternatives for production (Google Cloud Translation API). (stackoverflow.com)

If the site needs SEO, stable UX, or commercial guarantees, serve real localized pages (separate URLs, hreflang) or use a server-side/proxy translation solution or a maintained plugin (WordPress, Drupal) that offers flags+labels with SEO options. Google recommends not indexing automated translations and explains best practices for multilingual sites. (developers.google.com)

Quick troubleshooting / best-practice checklist:

  • Wait until element.js has loaded before trying the iframe click; protect against null frames.
  • Test across browsers and logged-in vs anonymous Google accounts (language ordering can differ).
  • Check CSP, cookies and same-origin issues; some sites block the widget.
  • Prefer native-language labels + ARIA/alt text alongside any flags for accessibility and clarity.

If the thread later shows "problem solved," these notes may help for hardening or reimplementing the same feature in a production-ready way.

Recommended Answers

All 2 Replies

Member Avatar for EmilyJohnson

thnks for your reply

the problem is solved.

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.