Select Language Drop down for Knack App

Help Center Get Answers
1

Has anyone tried to you language translation services like google translator or other for the knack app.

I was looking at using google translator JavaScript plugin but I don't know how and where to embed this code in knack app.

Here is the code

<div id="google_translate_element"></div><script type="text/javascript">
function googleTranslateElementInit() {
new google.translate.TranslateElement({pageLanguage: 'en', layout: google.translate.TranslateElement.InlineLayout.SIMPLE}, 'google_translate_element');
}
</script><script type="text/javascript" src="//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script>

 

Thanks for your help.  

2

I managed to create a reasonable work around for language support using JavaScript and Google Translate for Websites. Here are the steps.

Step 1: Go to google translate for website and create your code snippet by filling a simple form. https://translate.google.com/manager/website

You will get a code snippet something like this /*See Explanation*/ 

<div id="google_translate_element"></div> /*For HTML Embed in your knack app*/

<script type="text/javascript">
function googleTranslateElementInit() {new google.translate.TranslateElement({pageLanguage: 'en',layout:google.translate.TranslateElement.InlineLayout.SIMPLE}, 'google_translate_element');}
</script> /*JavaScript Code 1 - Actual JavaScript Function*/

<script type="text/javascript" src="//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script> /*JavaScript Code 2 - Load .js file from google apis */

Step 2 - In your API & Code Settings, paste following code

$(document).on('knack-scene-render.any', function(event, scene) {
var script = document.createElement("script");
script.type = "text/javascript";
script.src = "//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"; //JavaScript Code 2 - Load .js file from google apis //
document.body.appendChild(script);
});
$(document).on('knack-scene-render.any', function(event, scene) {
var script = document.createElement("script");
script.type = "text/javascript";
script.text = "function googleTranslateElementInit() {new google.translate.TranslateElement({pageLanguage: 'en',layout:google.translate.TranslateElement.InlineLayout.SIMPLE}, 'google_translate_element');}"; //JavaScript Code 1 - Actual JavaScript Function//
document.body.appendChild(script);
});

Step 3 - Now you are good to go with JavaScript, all you need is embed this html code in any view of your app. Most of the time knack don't allow you to use <div> tag in rich text field. So you can use <span> or <p> tags also make sure you give the right id.

<div id="google_translate_element"></div> 
or
<span id="google_translate_element"></span> 
or

<p id="google_translate_element"></p>

Optional - If you want to have all pages to have a language select button you can change ID of any permanent element of the app Like I replaced .kn-current-user-intro text (i.e. "logged in as") with the google translate HTML code above. So now a language select drop-down is on every page right next to settings and other user pages. I did that with this JavaScript Code

$(document).on('knack-page-render.any', function(event, page) {
 $(".kn-current-user-intro").text('')//to replace text to blank//;$(".kn-current-user-intro").attr('id','google_translate_element');//to assign element id google_translate_element// 
});

 

Screen Shot 

Hope this helps. Feel free to comment. I am still testing this may be it can be improved. My JavaScript is not so good.

 

Ajay 

3

Check out localize.js easy to set up. no complex programming.

4

If you are familiar with JavaScript or jQuery, or have access to a developer, this may be something you could develop into Knack on your own. You can add your own custom code by hovering over Settings in the Builder (the gear icon) and selecting API & Code. Your JavaScript code can be added into the Javascript tab (reference attached picture).

You can find more information about extending Knack's capabilities here: Other Customization Options or check out our Developers Docs.

Perhaps one of our users has already found a solution for this. You can try asking our community in our API & Customization Forum.

You can also post a project in our Builder Network if you want to connect with a developer to take care of this for you.

Feel free to reach out if you have any other questions.

Thanks!

Sarto Jama

Customer Success

sarto@knack.com