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:

 

Code:

 

// 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.global) {

        window.global = 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

    LazyLoad.js(['//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit'],

     function () { });

});




Step 1: 

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

![](upload://jiEnFnIHJjRURgmYtqK7PCaaZVR.png)

Step 2: 

Within the Javascript section add the code.

![](upload://aXCw3J3kTCRaJCFApvNXPmfjbmu.png)

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

 

![](upload://g7415Cd45gt1gz2O5m3pxJ0e0qu.png)

 

Did you find this useful?

 

Please let us know!

![](upload://A8vh9N9C91VzQ9zr1YxsvRUwH0G.png)

2 Likes

We are using https://localizejs.com/ it works amazingly and only requires simple line of embed code.

Hi, thank you for the javascript widget, it’s really useful. However, my users are noticing an error - on the translated versions, any input fields of type “date” on Knack don’t work. As you can see in this screenshot, the date field changes to “NaNa” when you click on a date.
Does anyone have good ideas for how to solve this?
Screenshot 2022-09-02 at 10.57.57

You can also try MotionPoint for Website Translation if you want a managed service.

1 Like