Integrating tawk.to into Angular 6 (Angular 2) app

2020-07-29 00:43发布

站内问答 / Angular
2415 4 4

I'd like to integrate tawk.to chat into my Angular 6 website.

Tawk.to provides the following code:

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

The code basically creates divs in my page:

enter image description here

But naturally when I navigate to another route the html widget gets destroyed.

I'm thinking of using a service for fetching the external script and a component for displaying the widget. But I'm not sure how well it is going to work.

What's the best approach to integrate tawk.to live chat into an angular app ?

4条回答
迷人小祖宗
2楼-- · 2020-07-29 01:03

First Create your own tawk.to account

After you can receive some code form there like as Once the code is active on your website, you will be able to chat with visitors. then go to your index.html and Paste the code below on your website the before the </body> tag.

sample code 

<!--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-->
查看更多
0人赞 添加讨论(0) 举报
冷血范
3楼-- · 2020-07-29 01:09

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>
查看更多
0人赞 添加讨论(0) 举报
女痞
4楼-- · 2020-07-29 01:15

in case anyone else is struggling with this I managed to make some progress, my stack is ionic 5 and angular 8, first I created a component in charge of loading Tawk to my PWA, with this simple code

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);
  }
}

The referenced the component on my app.component.html like this

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

Then found out from here https://www.tawk.to/knowledgebase/advanced-features/using-a-text-link-or-button-to-open-the-chat-widget/ that you can set the widget as hidden by default.

Finally, just call this function whenever you want to open the chat

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

Also, you can use this._window.Tawk_API to access any of the method defined on https://www.tawk.to/javascript-api/#onChatStarted

Only limitation that I'm still facing, is the following

  1. Client opens the chat and sends a message

  2. Operator receives the message and is typing a response

  3. Client closes the chat before receiving response

  4. operator sends the response

  5. WebApp makes a soft click noise but no notification.

I guess I'll need to make some sort of workaround through push notification, so when an operator is chatting with someone and the person closes the chat, a notification is sent "manually"

查看更多
0人赞 添加讨论(0) 举报
We Are One
5楼-- · 2020-07-29 01:18
  1. Copy widget to index.html.
  2. https://www.tawk.to/knowledgebase/advanced-features/using-a-text-link-or-button-to-open-the-chat-widget/ -> Set as hidden on load.
  3. Go to your webpage on which you want Tawk.to integration.
  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. Done :)
查看更多
0人赞 添加讨论(0) 举报
登录 后发表回答
相关问题
查看全部
相关文章
查看全部
收藏的人(4)