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

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

angular

将tawk.to集成到Angular 6（Angular 2）应用程序中,angular,tawk.to,Angular,Tawk.to,我想将tawk.to聊天集成到我的Angular 6网站中 Tawk.to提供以下代码：  <script type="text/javascript"> var Tawk_API=Tawk_API||{}, Tawk_LoadStart=new Date(); (function(){ var s1=document.createElement("script"),s0=document.getElement

我想将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-->


var Tawk_API=Tawk_API | |{}，Tawk_LoadStart=new Date（）；（function（）{var s1=document.createElement（“脚本”），s0=document.getElementsByTagName（“脚本”）[0]；s1.async=true；s1.src=truehttps://embed.tawk.to/17f35g40afc2c34e96e75909/default'；s1.charset='UTF-8'；s1.setAttribute（'crossorigin'，'*'）；s0.parentNode.insertBefore（s1，s0）；}（）；

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

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

我正在考虑使用一个获取外部脚本的服务和一个显示小部件的组件。但我不确定它会起多大作用

将tawk.to live chat集成到angular应用程序中的最佳方法是什么？

您可以在index.html的body标签中添加脚本文件
添加CSS和JavaScript。诱惑是将外部文件直接添加到index.html文件中

<body> <app-root></app-root>  <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>  </body>

var Tawk_API=Tawk_API | |{}，Tawk_LoadStart=new Date（）；（function（）{var s1=document.createElement（“脚本”），s0=document.getElementsByTagName（“脚本”）[0]；s1.async=true；s1.src=truehttps://embed.tawk.to/17f35g40afc2c34e96e75909/default'；s1.charset='UTF-8'；s1.setAttribute（'crossorigin'，'*'）；s0.parentNode.insertBefore（s1，s0）；}（）；
首先创建自己的
之后，您可以收到一些代码表单，如一旦代码在您的网站上激活，您将能够与访问者聊天。然后转到您的
index.html
并将下面的代码粘贴到网站的
标记之前
示例代码

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

var Tawk_API=Tawk_API | |{}，Tawk_LoadStart=new Date（）；（功能（）{ var s1=document.createElement（“脚本”），s0=document.getElementsByTagName（“脚本”）[0]； s1.async=true； s1.src=https://embed.tawk.to/17f35g40afc2c34e96e75909/default'; s1.字符集='UTF-8'； s1.setAttribute（'crossorigin'，'*'）； s0.parentNode.insertBefore（s1，s0）； })();
如果有其他人正在努力解决这个问题，我设法取得了一些进展，我的堆栈是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); } }
用户在my app.component.html上引用了如下组件

<ion-app> <ion-router-outlet id="content1"></ion-router-outlet> <app-tawk-chat [id]="_enviroment.tawkId"></app-tawk-chat> </ion-app>
此外，您还可以使用此._window.Tawk_API访问在上定义的任何方法
我仍然面临的唯一限制是

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

操作员收到消息并正在键入响应

客户端在收到响应之前关闭聊天

操作员发送响应

WebApp发出软点击噪音，但没有通知
我想我需要通过推送通知来解决一些问题，因此，当操作员与某人聊天时，此人关闭聊天时，会“手动”发送通知

将小部件复制到index.html

->加载时设置为隐藏

转到您希望Tawk.to集成的网页

#右下角{位置：固定；底部：0；右侧：0；页边距底部：20px；//指定您的页边距，这是示例。右侧页边距：20px；}

完成：）

嗨，我不久前提出了这个问题。但是，首先，这是一个角度相关的问题。第二，这将在所有页面中创建一个小部件，但我只在某些路径上需要它（前端用户页面，但不在管理面板页面上）。嘿，@sr9yar你有什么发现吗？是的，有人知道如何仅在某些页面上添加吗？我通过以下方式取得了一些进展，我只在某些页面上显示聊天，但当我离开时，小部件仍然显示出来，现在正在努力获取它removed@HardikMasalawala，我不习惯用角形8
openChat() { window.Tawk_API.maximize(); }