Add a Sticky Translate Button to Your Website

This guide provides the necessary HTML, CSS, and JavaScript to add a functional "Sticky Translate" button. This solution enables translation on user click and also via a special URL like yourpage.html#googtrans(en|es).

Prerequisite: Font Awesome Icon Library

Place this single line inside your <head> section. This is required for the icon on the button to appear.

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.0/css/all.min.css">

Part 1: HTML Code

Place this code inside your <body> tag, preferably right after it opens.

<!-- The sticky button the user can click -->
<button id="translate-btn">
    <i class="fa-solid fa-language"></i> Translate
</button>

<!-- An empty div that Google Translate's script will use -->
<div id="google_translate_element"></div>

Part 2: CSS Code

Place this CSS inside a <style> tag in your <head> section.

/* Prevents Google's top bar from pushing the page down */
html {
    top: 0 !important;
}

#translate-btn {
    position: fixed;
    top: 50%;
    right: 0;
    transform: translateY(-50%);
    z-index: 1001;
    background-color: #007bff;
    color: white;
    writing-mode: vertical-rl;
    padding: 1.2rem 0.6rem;
    border-radius: 10px 0 0 10px;
    box-shadow: -2px 2px 8px rgba(0,0,0,0.2);
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    cursor: pointer;
    border: none;
    transition: all 0.3s ease;
}

#translate-btn:hover {
    background-color: #0056b3;
    padding-right: 0.8rem;
}

#translate-btn .fa-solid {
    transform: rotate(90deg);
}

/* This is the container Google's script will use */
#google_translate_element {
    display: none; 
    position: fixed;
    top: 1rem;
    right: 1rem;
    z-index: 1002;
}

Part 3: JavaScript Code

Place this script right before the closing </body> tag.

<script>
// This function must be globally available for the Google script's callback
function googleTranslateElementInit() {
  new google.translate.TranslateElement({pageLanguage: 'en'}, 'google_translate_element');
  
  // Show Google's widget and hide our custom button once initialized
  const translateElement = document.getElementById('google_translate_element');
  if (translateElement) translateElement.style.display = 'block';

  const customTranslateBtn = document.getElementById('translate-btn');
  if (customTranslateBtn) customTranslateBtn.style.display = 'none';
}

// This function dynamically loads the Google Translate script
function activateGoogleTranslate() {
  // Prevent loading the script multiple times
  if (document.querySelector('script[src*="translate.google.com"]')) {
    return;
  }
  const script = document.createElement('script');
  script.src = "https://translate.google.com/translate_a/element.js?cb=googleTranslateElementInit";
  script.async = true;
  document.body.appendChild(script);
}

// Main logic runs after the page content has loaded
document.addEventListener("DOMContentLoaded", () => {
    const translateBtn = document.getElementById('translate-btn');

    // **This logic makes the URL work!**
    // Check if the URL hash requests an automatic translation
    if (window.location.hash.includes("#googtrans")) {
        // If yes, load the Google Translate script immediately.
        activateGoogleTranslate();
    } else {
        // If no, and the button exists, set up the click listener for it.
        if (translateBtn) {
            translateBtn.addEventListener('click', activateGoogleTranslate);
        }
    }
});
</script>

Summary: How to Use

  1. Add the Font Awesome Link: Copy the code from the Prerequisite step and paste it into your page's <head>.
  2. Add the HTML: Copy the code from Part 1 and paste it into your page's <body>.
  3. Add the CSS: Copy the code from Part 2 and place it inside a <style> tag within your page's <head>.
  4. Add the JavaScript: Copy the code from Part 3 and paste it at the very bottom of your page, just before the closing </body> tag.

With these parts integrated, your website will have a professional sticky translate button and will support direct URL translation.