Created
October 3, 2020 13:12
-
-
Save jamesmundy/c73a07cc7276e8e6b32102e9ecb7b063 to your computer and use it in GitHub Desktop.
Tawk.to Service for Angular
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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){}); | |
} | |
} |
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.
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
I see an error which says 'Tawk_API' is not defined