将tawk.to集成到Angular 6 (Angular 2)应用程序中
我想把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应用程序中的最佳方法是什么？
回答 4
Stack Overflow用户
发布于 2020-04-29 00:29:59
如果其他人在这个问题上苦苦挣扎，我设法取得了一些进展，我的堆栈是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上定义的任何方法
我仍然面临的唯一限制是：
- Client打开聊天并发送一条消息
- 操作员收到消息并键入response
- Client在收到response
- operator发送response
- WebApp之前关闭聊天notification.
发出软单击噪音但没有发出notification.
我想我需要通过推送通知做一些变通，所以当操作员与某人聊天时，这个人关闭了聊天，一个通知会被“手动”发送。
Stack Overflow用户
发布于 2018-10-30 23:06:50
您可以在index.html的body标记中添加脚本文件
添加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>Stack Overflow用户
发布于 2019-01-08 12:53:52
首先创建您自己的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-->https://stackoverflow.com/questions/51865485
复制相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号