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