Organizing country-specific and multilingual content

There does exist a JavaScript widget called Website Translator made by Google Translate that will allow users to choose a language from a dropdown and have the text of a site translated on the fly. Sounds too good to be true? It sort of is. If you read this post from 2020, that says they wanted to discontinue it but decided to leave it up for non-commercial use due to the pandemic (so there's one good thing that came out of the pandemic). That said, it still functions. For a demo of how it works: https://paddykelly.vanillastaging.com/

The code goes right in the JavaScript of the Theme:

/**
 * Get the current nonce from scripts in the head.
 **/

const getNonce = () => {
    const scripts = document.querySelectorAll('script');
    for (let i = 0; i < scripts.length; i++) {
      if (scripts[i].nonce) {
        return scripts[i].nonce;
      }
    }
    console.warn('Failed to retrieve a nonce. Check to see if your scripts work.');
};

const NONCE = (document.querySelector('script')?.nonce) ? document.querySelector('script')?.nonce : getNonce();

/**
 * Add style tag to the head.
 * 
 * @author Patrick Kelly <pkelly@higherlogic.com>
 *
 * @params styles String Valid CSS styles.
 */
const injectCSS = (styles) => {
  const head = document.querySelector('head');
  const styleTag = document.createElement('style');
  styleTag.innerHTML = (styles) ? styles : '';
  head.appendChild(styleTag);
}


/**
 * Add JavaScript into the head.
 * 
 * @author Patrick Kelly <pkelly@higherlogic.com>
 *
 * @params script String Valid JavaScript scripts.
 */
const injectJS = (script) => {
  const body = document.querySelector('body');
  const scriptTag = document.createElement('script');
  scriptTag.setAttribute('nonce', NONCE);
  scriptTag.innerHTML = (script) ? script : '';
  body.appendChild(scriptTag);
}


/**
 * Add HTML into the body.
 * 
 * @author Patrick Kelly <pkelly@higherlogic.com>
 *
 * @params what String Valid HTML.
 * @params where String Existing DOM element where you will put it.
 */
const injectHTML = (what, where, position) => {
    const targetPosition = position ?? 'beforebegin';
    const target = document.querySelector(where) ?? document.querySelector('body');
    target.insertAdjacentHTML(targetPosition, what);
}

/**
 * Add JS into the head.
 * 
 * @author Patrick Kelly <pkelly@higherlogic.com>
 *
 * @params validUrl The URL to the JavaScript file to be included.
 */
const injectJSFile = (validUrl) => {
  const body = document.querySelector('body');
  const scriptTag = document.createElement('script');
  scriptTag.setAttribute('nonce', NONCE);
  scriptTag.async = true;
  scriptTag.src = (validUrl) ? validUrl : '';
  body.appendChild(scriptTag);
}

const googleTranslateScript = `
    function googleTranslateElementInit() {
        new google.translate.TranslateElement({
        pageLanguage: 'en',
        layout: google.translate.TranslateElement.InlineLayout.VERTICAL
        }, 'google_translate_element');
    }
`;

const googleTranslateSrc = 'https://translate.google.com/translate_a/element.js?cb=googleTranslateElementInit';

const googleTranslateHtml = `
    <div class="google-translate-wrapper">
      <!-- GOOGLE TRANSLATE START -->
    <div id="google_translate_element"></div>
      <!-- GOOGLE TRANSLATE END -->
    </div>
`;
const googleTranslateCss = `
    .google-translate-wrapper {
        min-height: 60px;
        top: 68px;
        right: 20px;
        text-align: right;
        position: absolute;
        display: inline-block;
    }
    #google_translate_element {
        max-width: 300px;
        margin: auto;
        text-align: left;
    }
    .skiptranslate.goog-te-gadget, a.skiptranslate.goog-te-gadget {
    text-shadow: 0 0 3px #fff;
    color: black;
}
`;
onVanillaReady(() => {
  window.addEventListener('load', () => {
      injectCSS(googleTranslateCss);
      injectJS(googleTranslateScript);
      injectHTML(googleTranslateHtml, '.headerNavigation', 'afterend');
      injectJSFile(googleTranslateSrc);
  });
});

Hey @saramaloney the code works like a charm. You did good. There was maybe something I forgot to mention. When you inspect the page with the developer tools you see this error:

That is telling us that the browser refused to load the Google script for security reasons. You have to tell our application, to tell the browser that it's OK to load scripts from the domain googleapis.com. We thought about that, too. In the Dashboard under security you simply add the domain here:

The "*" means any script coming from googleapis.com or any of its subdomains (in this case translate-pa.googleapis.com). I save it. And voilá: