Google Translate integration into Knack

[ChrispinP]

This issue is for referencing how to integrate Google Translate into Knack.

Embedded Dropdown:

Rendered Top Menu after selecting a language:

Key Concepts:

1. Whilst you can load the JS file for Google Translate with your other JS Files or within Knack's KnackInitAsync function, the Google Translate embed works best if its loaded within the jQuery event handler for the specified view element(s) for any rendered scene (page) you want the Google Translate to appear on. This allows the Google Translate embed to render on each scene whether you are landing there for the first time, navigating between pages, or reloading the page, allowing it to be persistent. Loading External JS Files in Knack
2. We prepend the HTML div element so that it appears before the specified view but append also works if it needs to be below a view instead.
3. We use .globalThis instead of .global in regards to the window variable. In a web browser this references the WindowProxy around the actual global object. globalThis property
4. Within the Google Translate function itself, pageLanguage allows you to set the 2 digit language code for the initial starting language. We set it to en for English
5. Next, includedLanguages allows you to specify all the language codes to show in the embedded dropdown that a user can select. It is important that the language specified as the initial starting language is not also in the includedLanguages selection otherwise an unwanted bug will occur. Users will always be able to revert back to the original language via the embedded top bar that Google Translate renders. Language Codes
6. Next, the layout should be set to HORIZONTAL for desktop and it also reduces screen space. VERTICAL can be used if designing for a more vertical mobile layout. The SIMPLE layout does not work within Knack since it hyperlinks the button making it unusable.

The below JS code only needs to be placed once. If the KnackInitAsync function is present in the app's JS code or the KTL function, make sure this code block is after them. In this code we specify 2 view numbers, be sure to update them to the corresponding view ids in the app where you want the Google Translate dropdown to appear. Add more lines to append/prepend to additional view elements.

/******************************/
/*** Google Translate Embed ***/
/******************************/
$(document).on('knack-scene-render.any', function (event, view) {
  $('#view_1202').prepend('<div id="google_translate_element"></div>');
  $('#view_688').prepend('<div id="google_translate_element"></div>');
  if (!window.globalThis) {
        window.globalThis = window;
    }
  window.googleTranslateElementInit = globalThis.googleTranslateElementInit =

  function googleTranslateElementInit() {
       new google.translate.TranslateElement({
          pageLanguage: 'en', // Set initial language
          includedLanguages: 'ar,de,es,fr,fi,hi,ko,vi,zh-CN', //Show only certain languages
          layout: google.translate.TranslateElement.InlineLayout.HORIZONTAL //SIMPLE, VERTICAL, or HORIZONTAL
        }, 'google_translate_element');
    };
  LazyLoad.js('//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit', function () {
        console.log('Google Translate Loaded!');
  });
});

[ChrispinP]

This work was done in response to #14846 so that we could have a working solution for the Google Translate embed feature that can be implemented for any Knack app. 😎