Question

我想将tawk.to集成到我的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.live聊天集成到有角度的应用程序中的最佳方法是什么？

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

Answer 2

首先创建自己的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 3

万一其他人都在为此挣扎，我设法取得了一些进展，我的堆栈是离子5和角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上定义的任何方法

以下是我仍然要面对的局限性

客户端打开聊天并发送消息
操作员收到消息并输入回复
客户端在收到响应之前关闭聊天
操作员发送响应
WebApp发出柔和的点击声，但没有通知。

我想我需要通过推送通知做出某种解决方法，因此当操作员与某人聊天并且该人关闭聊天时，会“手动”发送通知

Answer 4

将小部件复制到index.html。
https://www.tawk.to/knowledgebase/advanced-features/using-a-text-link-or-button-to-open-the-chat-widget/->设置为隐藏在加载状态。
转到要与Tawk。集成的网页。
<a id="bottom-right-corner" href="javascript:void(Tawk_API.toggle())"></a>
#bottom-right-corner { position: fixed; bottom: 0; right: 0; margin-bottom: 20px; //specify your margins, this is example. margin-right: 20px; }
完成：）

将tawk.to集成到Angular 6（Angular 2）应用程序中

4 个答案: