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

Question

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:

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 ?

score 3 · Answer 1 · answered Apr 28 '20 at 16:29

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

Client opens the chat and sends a message
Operator receives the message and is typing a response
Client closes the chat before receiving response
operator sends the response
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"

Murat Savur · Answer 2 · 2018-10-31T05:41:59.513

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>

score 0 · Answer 3 · answered Jan 08 '19 at 04:53

0

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

answered Jan 08 '19 at 04:53

core114

5,155
16
92
189

2

Hi, I created this question some time ago. But, firstly this is an angular related question. Secondly, this will created a widget in all pages, but I only needed it on certain routes (frontend user pages, but not on admin panel pages) – sr9yar Jan 08 '19 at 07:31
Hey, @sr9yar did you got something? – MeVimalkumar Jan 29 '19 at 09:50
yea did anyone find out how to add on certain pages only? – iBlehhz May 10 '19 at 05:07
I manage to make small progress by following https://github.com/rjcoupe/ngx-tawk I manage to show the chat only on certain pages, but when I navigate away the widget stills shown, now struggling to get it removed – Camilo Casadiego Apr 28 '20 at 14:24
@HardikMasalawala , Actuality i'm not used with angular 8 – core114 Aug 13 '20 at 09:55

score 0 · Answer 4 · answered May 19 '20 at 13:25

Copy widget to index.html.
https://www.tawk.to/knowledgebase/advanced-features/using-a-text-link-or-button-to-open-the-chat-widget/ -> Set as hidden on load.
Go to your webpage on which you want Tawk.to integration.
<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; }
Done :)

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

4 Answers4

Linked