How to implement google translate widget in knack?

Hello Folks!


As you know, web pages can be translated into another language using google translate, however this functionality can also be applied in KNACK.


If you are working on an application that needs to be managed by users globally, it is necessary that it has the ability to adapt to the language of each country.


In this new entry we'll outline how to make your knack app multilingual.


Follow this instructions and add the following code in the builder of your application:




// Replace scene_XXX with the id of the scene where you want to

// locate the google translate widget

$(document).on('knack-scene-render.scene_XXX', function (e, v) {


// Replace view_YYY with the id of the view where the element that the

// widget uses will be injected

    $('#view_YYY').append('<div id="google_translate_element"></div>');


    // Prevent issues

    if (! { = window;



    // Init function

    window.googleTranslateElementInit = global.googleTranslateElementInit =

     function googleTranslateElementInit() {


        new google.translate.TranslateElement({

            pageLanguage: 'en', // Set initial language

            layout: google.translate.TranslateElement.InlineLayout.SIMPLE

        }, 'google_translate_element');



    // Load Google Library


     function () { });


Step 1: 

Search for the API & Code item in the builder of your application: 


Step 2: 

Within the Javascript section add the code.


At the end, you’ll see the google translate widget implemented in your Knack APP.




Did you find this useful?


Please let us know!


We are using it works amazingly and only requires simple line of embed code.