Tawk.to Service for Angular

gistfile1.txt

import { DOCUMENT } from "@angular/common";
import { Inject, Injectable, Renderer2, RendererFactory2 } from "@angular/core";
import { Observable, Subject } from "rxjs";

declare var Tawk_API: any;

@Injectable()
export class TawkService {

    private loaded: boolean;
    private loadSubject: Subject<boolean> = new Subject<boolean>();
    private renderer: Renderer2;

    constructor(
        private rendererFactory: RendererFactory2,
        @Inject(DOCUMENT) private _document: Document,
        private LocalStorageService: LocalStorageService) {
            this.renderer = rendererFactory.createRenderer(null, null);
            this.load();
        }

    private load(){
        if(this.loaded)
            return;

        const s = this.renderer.createElement('script');
        s.type = 'text/javascript';
        s.text = `TAWK_INTEGRATION_SCRIPT`;
        this.renderer.appendChild(this._document.body, s);
        Tawk_API.onLoad = this.loadedEvent.bind(this);
    }

    private loadedEvent(){
        this.loaded = true;
        this.loadSubject.next(this.loaded);
    }

    public UpdateTawkUser(user: any) {
        this.loadedWrapper(() => {this.updateAtrributes(user)});
    }

    private loadedWrapper(func: any){ 
        if(!this.loaded){
            var sub = this.loadSubject.asObservable().subscribe({
                next: () => {
                    func();
                    sub.unsubscribe();
                },
                error: () => {}
                });
        } else {
            func();
        }
    }

    public ExpandChatWindow(show: boolean = false){
        this.loadedWrapper(() => show ? Tawk_API.maximize() : Tawk_API.minimize());
    }

    public SetChatVisibility(show: boolean = false) {
        this.loadedWrapper(() => show ? Tawk_API.showWidget() : Tawk_API.hideWidget());
    }

    private updateAtrributes(user: any){
        Tawk_API.setAttributes({
            'name'  : `${user.firstname} ${user.surname}`,
            'email' : user.email,
            'id'  : user.id,
        }, function(error){});
    }
}

Hi Your code is great and work well in my project on chrome browser. But on Firefox I face some issue , Do u also face the same . While navigating from one page to other in firefox browser I face issue with Tawk script. My ui breaks

Your code works in chrome but not in mobile. Anyone can run it in android or IOS?

Hi, Your code is working just fine for chrome. but the setAttribute and other functionality like prechartSubmit is not working. i tried to update the email name as well as message as soon as a button clicked but it's not working as expected.

I see an error which says 'Tawk_API' is not defined

I ran into similar issues, but after some work, got things setup correctly. If you're getting the 'Tawk_API' is not defined error, this is because you haven't included the widget script. That's the widget code that you've received from Tawk. For example:

s.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/{YOUR_PROPERTY_ID}/{WIDGET_ID}\'; ' +
              's1.charset=\'UTF-8\'; ' +
              's1.setAttribute(\'crossorigin\',\'*\'); ' +
              's0.parentNode.insertBefore(s1,s0); ' +
              '})();'

This code tells Angular to insert this Javascript into that dynamically created <script> element. Doing so will allow the next line (the one where the Tawk_API variable is called) to be set. By adding the declare var Tawk_API : any in the line above, you're telling Angular that the variable exists. The s.text line makes it so.