Laravel

Google Translate Integration with Clean UI and Language Persistence

Shahroz Javed

Jun 29, 2025 . 41 views

Introduction

Adding Google Translate to your website allows users from around the world to access your content in their preferred language. In this blog post, you'll learn how to implement a clean and simple Google Translate dropdown with custom styling, hidden Google toolbar, and localStorage to remember the selected language.

Why This Setup?

The default Google Translate widget includes a visible toolbar and minimal styling options. This setup improves user experience by hiding unnecessary elements, supporting multiple languages, and storing the selected language across sessions using localStorage.

Steps

01: Add the Translate Wrapper and Script

Here's the full HTML code to add the translate widget, hide the toolbar, and apply minimal styles.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Google Translate Integration</title>

    <style>
      iframe.VIpgJd-ZVi9od-ORHb-OEVmcd {
        display: none !important;
      }
      .goog-te-banner-frame.skiptranslate {
        display: none !important;
      }
      body {
        top: 0px !important;
      }
      #translate_wrapper {
        margin: 20px;
        display: inline-block;
        padding: 6px 12px;
        border: 1px solid #d1d5db;
        border-radius: 6px;
        background-color: #f9fafb;
        font-family: Arial, sans-serif;
      }
      #translate_label {
        font-size: 14px;
        color: #111827;
        margin-right: 8px;
        display: inline-block;
      }
      select.goog-te-combo {
        padding: 5px 8px;
        border-radius: 4px;
        border: 1px solid #9ca3af;
        background-color: white;
        font-size: 14px;
        color: #111827;
        cursor: pointer;
      }
    </style>
  </head>
  <body>
    <p>
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Atque harum
      commodi sed repudiandae cumque? Ipsum cumque ipsam eum optio enim quam
      earum modi voluptatum fugiat. Eaque cumque maxime inventore accusantium!
    </p>

    <div id="translate_wrapper">
      <div id="google_translate_element"></div>
    </div>

    <script type="text/javascript">
      function googleTranslateElementInit() {
        new google.translate.TranslateElement(
          {
            pageLanguage: "en",
            includedLanguages: "en,fr,es,de,it,ur,zh-CN,ar,hi,tr",
            layout: google.translate.TranslateElement.InlineLayout.SIMPLE,
          },
          "google_translate_element"
        );
      }
    </script>

    <script src="https://translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script>
  </body>
</html>

02: Output

The result is a clean dropdown interface for language switching. The dropdown is styled, the Google toolbar is completely hidden, and users can switch between languages like English, French, Urdu, Arabic, and more.

Conclusion

This setup gives you a functional, elegant language switcher using Google Translate with no branding distractions. It supports multiple languages and can be embedded in any HTML or Laravel Blade page with ease.

Main Menu