将tawk.to集成到Angular 6(Angular 2)应用程序中 [英] Integrating tawk.to into Angular 6 (Angular 2) app

问题描述

我想将tawk.to聊天集成到我的Angular 6网站中.

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

Tawk.to提供以下代码:

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-->

代码基本上在我的页面中创建了div:

The code basically creates divs in my page:

但是自然地，当我导航到另一条路线时，html小部件会被破坏.

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.

将tawk.live聊天集成到有角度的应用程序中的最佳方法是什么?

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

推荐答案

1. 将小部件复制到index.html.
3. #bottom-right-corner { position: fixed; bottom: 0; right: 0; margin-bottom: 20px; //specify your margins, this is example. margin-right: 20px; }
4. 完成:)

1. Copy widget to index.html.
2. https://www.tawk.to/knowledgebase/advanced-features/using-a-text-link-or-button-to-open-the-chat-widget/ -> Set as hidden on load.
3. Go to your webpage on which you want Tawk.to integration.
4. <a id="bottom-right-corner" href="javascript:void(Tawk_API.toggle())"></a>
5. #bottom-right-corner { position: fixed; bottom: 0; right: 0; margin-bottom: 20px; //specify your margins, this is example. margin-right: 20px; }
6. Done :)

这篇关于将tawk.to集成到Angular 6(Angular 2)应用程序中的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！