Add support for new Messenger Customer Chat SDK

[gbertoncelli]

It would be nice to add to this package the possibility to integrate the new Customer chat SDK platform. Right now this can be added only manually with plain javascript because the sdk.js is no more valid for this platform and instead another script has to be loaded and in case someone has only to integrate the Messenger in the Angular application this package appear to be useless.

Complete documentation of the customer chat platform can be found here.

[craigcosmo]

@HighSoftWare96 Do you have workaround?

RIght now I'm using this.facebookService.CustomerChat.showDialog(); it give me error showDialog() is undefined. I guess because of this issue ?

[gbertoncelli]

Sorry but the only workaround I've found was to use the embed chat code inside the index file...

[craigcosmo]

@HighSoftWare96 Thanks.

I put the init code in the index.html

<!-- Load Facebook SDK for JavaScript -->
<div id="fb-root"></div>
<script>
	window.fbAsyncInit = function() {
		FB.init({
			xfbml: true,
			version: 'v3.3',
		})
	}
	;(function(d, s, id) {
		var js,
			fjs = d.getElementsByTagName(s)[0]
		if (d.getElementById(id)) return
		js = d.createElement(s)
		js.id = id
		js.src =
			'https://connect.facebook.net/vi_VN/sdk/xfbml.customerchat.js'
		fjs.parentNode.insertBefore(js, fjs)
	})(document, 'script', 'facebook-jssdk')
</script>

<!-- Your customer chat code -->
<div
	class="fb-customerchat"
	attribution="setup_tool"
	page_id="2629140093930438"
	theme_color="#0084ff"
></div>

Then in my components, I use it like this

userClickBanner(){
	FB.CustomerChat.showDialog()
}

And I got the error

ERROR in src/app/modules/product/list/list.ts(207,4): error TS2304: Cannot find name 'FB'.

I miss something? The FB var supposed to be global right?

[gbertoncelli]

You have to add the Facebook script Il mer 24 lug 2019, 16:11 craigcosmo <[email protected]> ha scritto:

…

@HighSoftWare96 <https://github.com/HighSoftWare96> Thanks. I put the init code in the index.html <!-- Load Facebook SDK for JavaScript --> <div id="fb-root"></div> <script> window.fbAsyncInit = function() { FB.init({ xfbml: true, version: 'v3.3', }) } ;(function(d, s, id) { var js, fjs = d.getElementsByTagName(s)[0] if (d.getElementById(id)) return js = d.createElement(s) js.id = id js.src = 'https://connect.facebook.net/vi_VN/sdk/xfbml.customerchat.js' fjs.parentNode.insertBefore(js, fjs) })(document, 'script', 'facebook-jssdk') </script> <!-- Your customer chat code --> <div class="fb-customerchat" attribution="setup_tool" page_id="2069914009930438" theme_color="#0084ff" ></div> Then in my components, I use it like this userClickBanner(){ FB.CustomerChat.showDialog() } And I got the error ERROR in src/app/modules/product/list/list.ts(207,4): error TS2304: Cannot find name 'FB'. I miss something? — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub <#149?email_source=notifications&email_token=AFN4532HATCCNSIAORTD6MTQBBPKTA5CNFSM4G2P3H72YY3PNVWWK3TUL52HS4DFVREXG43VMVBW63LNMVXHJKTDN5WW2ZLOORPWSZGOD2WOXJQ#issuecomment-514648998>, or mute the thread <https://github.com/notifications/unsubscribe-auth/AFN4537QMGOZGFHSO2J7XVLQBBPKTANCNFSM4G2P3H7Q> .

[SkyZeroZx]

Currently create a dedicate library for Messager Chat of Facebook
If you are interested you could see it here in NPM with its documentation or github

https://www.npmjs.com/package/ngx-facebook-messenger

https://github.com/SkyZeroZx/ngx-facebook-messenger