angular - 将 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 应用程序中的最佳方法是什么？

score 1 · Accepted Answer

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

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

客户端打开聊天并发送消息
操作员收到消息并正在键入响应
客户在收到回复前关闭聊天
操作员发送响应
WebApp 会发出轻柔的点击噪音，但没有通知。

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

score 0 · Accepted Answer

您可以在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>

score 0 · Accepted Answer

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

score 0 · Accepted Answer

首先创建您自己的tawk.to 帐户

在您可以在那里收到一些代码表格后，就像代码在您的网站上激活后，您将能够与访问者聊天。然后转到您的 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-->

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

4 回答 4

Related

Reference