Access to html widget from angularjs controller

I'd like to integrate the Tawk.to widget into my angularjs application.

<!--Start of Tawk.to Script-->
    <script type="text/javascript">
        var $_Tawk_API={},
            $_Tawk_LoadStart=new Date();

        (function(){
            var s1=document.createElement("script"),
                s0=document.getElementsByTagName("script")[0];

            s1.async=true;
            s1.src='https://embed.tawk.to/552e2462fd29683e1f71e7c8/default';
            s1.charset='UTF-8';
            s1.setAttribute('crossorigin','*');
            s0.parentNode.insertBefore(s1,s0);
        })();
    </script>
<!--End of Tawk.to Script-->

That widget is loaded asynchronously. I just need to invoke the method Tawk_API.toggle() Watching the $_Tawk_API object, is a possible solution ? I don't know how I can reference the $_Tawk_API object from my angular controller.

Any advice ?

Thank you in advance.

Upvotes: 0

Views: 1431

Answers (1)

Here are my solutions:

AngularJS solution:

// inside the controller
angular.element($window).bind('load', function() {
  // here not only the page is loaded, 
  // but also all asynchronous requests are completed
  Tawk_API.toggle(); // I can call any api methods
}

JQuery solution:

 $(window).on('load', function(){
   // here not only the page is loaded, 
   // but also all asynchronous requests are completed
   Tawk_API.toggle(); // I can call any api methods;
});

Upvotes: 1

Related Questions