将 tawk.to 集成到 Angular 6 (Angular 2) 应用程序中

Question

我想将 tawk.to chat 集成到我的 Angular 6 网站中。

Tawk.to 提供以下代码：

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

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

我正在考虑使用一个服务来获取外部脚本和一个组件来显示小部件。但我不确定它的效果如何。

将 tawk.to 实时聊天集成到 Angular 应用中的最佳方法是什么？

Answer 1

如果其他人为此苦苦挣扎，我设法取得了一些进展，我的堆栈是 ionic 5 和 angular 8，首先我创建了一个组件，负责将 Tawk 加载到我的 PWA，使用这个简单的代码

import {Component, Inject, Input, OnDestroy, OnInit, Renderer2} from '@angular/core';
import {DOCUMENT} from '@angular/common';

@Component({
  selector: 'app-tawk-chat',
  templateUrl: './tawk-chat.component.html',
  styleUrls: ['./tawk-chat.component.scss'],
})
export class TawkChatComponent implements OnInit {

  @Input() id: string;
  script = this._renderer.createElement('script');

  constructor(private _renderer: Renderer2, @Inject(DOCUMENT) private _document, ) {}

  ngOnInit() {
    this.script.text = `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/${this.id}/default';
      s1.charset = 'UTF-8';
      s1.setAttribute('crossorigin', '*');
      s0.parentNode.insertBefore(s1, s0);
    })();`;
    this._renderer.appendChild(this._document.body, this.script);
  }
}

像这样在我的 app.component.html 上引用的组件

<ion-app>
  <ion-router-outlet id="content1"></ion-router-outlet>
  <app-tawk-chat [id]="_enviroment.tawkId"></app-tawk-chat>
</ion-app>

然后从这里https://www.tawk.to/knowledgebase/advanced-features/using-a-text-link-or-button-to-open-the-chat-widget/发现可以将小部件设置为默认隐藏。

最后，只要你想打开聊天就调用这个函数

openChat() {
    window.Tawk_API.maximize();
  }

另外，您可以使用 this._window.Tawk_API 访问https://www.tawk.to/javascript-api/#onChatStarted 上定义的任何方法

我仍然面临的唯一限制是以下

1. 客户端打开聊天并发送消息

2. 操作员收到消息并正在输入响应

3. 客户端在收到回复前关闭聊天

4. 操作员发送响应

5. WebApp 发出轻柔的点击声，但没有通知。

我想我需要通过推送通知来解决一些问题，所以当操作员与某人聊天并且该人关闭聊天时，会“手动”发送通知

Answer 2

您可以在 index.html

的正文标签中添加脚本文件

添加 CSS 和 JavaScript。诱惑是将外部文件直接添加到您的 index.html 文件中。

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

Answer 3

首先创建你自己的tawk.to account

您可以在那里收到一些代码表格后，例如 一旦代码在您的网站上处于活动状态，您就可以与访问者聊天。 然后转到您的index.html 和 将下面的代码粘贴到您的网站上 </body> 标记之前。

示例代码

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

Answer 4

1. 将小部件复制到 index.html。
2. https://www.tawk.to/knowledgebase/advanced-features/using-a-text-link-or-button-to-open-the-chat-widget/ -> 加载时设置为隐藏。
3. 转到您想要 Tawk.to 集成的网页。
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. 完成:)