Integrating tawk.to into Angular 6 (Angular 2) app

问题

I'd like to integrate tawk.to chat into my Angular 6 website.

Tawk.to provides the following code:

<!--Start of Tawk.to Script--> 
<script type="text/javascript"> var Tawk_API=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/17f35g40afc2c34e96e75909/default'; s1.charset='UTF-8'; s1.setAttribute('crossorigin','*'); s0.parentNode.insertBefore(s1,s0); })(); </script> 
<!--End of Tawk.to Script-->

The code basically creates divs in my page:

But naturally when I navigate to another route the html widget gets destroyed.

I'm thinking of using a service for fetching the external script and a component for displaying the widget. But I'm not sure how well it is going to work.

What's the best approach to integrate tawk.to live chat into an angular app ?

回答1:

You can add script files in body tags at index.html

Adding CSS and JavaScript. The temptation is to add the external files directly to your index.html file.

<body>
  <app-root></app-root>

     <!--Start of Tawk.to Script--> 
    <script type="text/javascript"> var Tawk_API=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/17f35g40afc2c34e96e75909/default'; s1.charset='UTF-8'; s1.setAttribute('crossorigin','*'); s0.parentNode.insertBefore(s1,s0); })(); </script> 
    <!--End of Tawk.to Script-->

</body>

回答2:

First Create your own tawk.to account

After you can receive some code form there like as Once the code is active on your website, you will be able to chat with visitors. then go to your index.html and Paste the code below on your website the before the </body> tag.

sample code

<!--Start of Tawk.to Script-->
<script type="text/javascript">
var Tawk_API=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/17f35g40afc2c34e96e75909/default';
s1.charset='UTF-8';
s1.setAttribute('crossorigin','*');
s0.parentNode.insertBefore(s1,s0);
})();
</script>
<!--End of Tawk.to Script-->

来源：https://stackoverflow.com/questions/51865485/integrating-tawk-to-into-angular-6-angular-2-app

标签

angular

tawk.to