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

Hello, @Soluntech I’d love to hear your tips on this:
I’m using the google translate widget in my client’s app and it works ok. There are two main issues we are noticing:
When you first switch it to a different language, the page turns blank. You then need to hit the refresh button once or several times, before it shows the actual Knack page in a translated form. Any idea why that’s happening?

Also - we have some views on the user interface that display files (templates), which users are supposed to download. This works fine in the original language, but once the widget has been used to set the page to a different language, you can’t click on download links any more. Any tips on this?

Many thanks in advance!