Installation on Pages with JavaScript Frameworks – Hand Talk

Pages that use AngularJS, Ember, Backbone.js, or other front-end frameworks can also use our plugin without any issues. The website translator plugin has no dependencies, has minimal impact on global variables, and does not need to be updated or reinitialized when the page content changes. You just need to make sure that the window, once initialized, is not removed due to state/route changes or changes in the page structure.

For example: When using routing with Angular Route or AngularUI Router, we must determine which element in our template will be used to open the child templates, using the ng-view or ui-view attribute/element, respectively. In other words, everything inside those elements will be replaced by the new template.

Remember that, by default, when initialized, the plugin window is injected at the end of the <body> element. You can change the element where the window will be injected in the settings. A good example of how to use the plugin in these cases is this:

<html>
 <head>
 </head>
 <body>
   <ui-view></ui-view>
 
   <script src="https://plugin.handtalk.me/web/latest/handtalk.min.js"></script>
   <script>
     var ht = new HT({
       token: "..."
     });
   </script>
 </body>
</html>

Placing the script at the end of the body tag is not mandatory, but it is a good practice that should be encouraged. Putting the script at the end will cause it to execute only when your page has loaded, so the plugin will not increase the perceived loading time.

Related articles