Home

Awesome

<a href="https://beyonk.com"> <br /> <br /> <img src="https://user-images.githubusercontent.com/218949/144224348-1b3a20d5-d68e-4a7a-b6ac-6946f19f4a86.png" width="198" /> <br /> <br /> </a>

Svelte Facebook Customer Chat

js-standard-style CircleCI

Pure vanilla JS Facebook Customer Chat integration

facebook customer chat

Install

$ npm install --save-dev @beyonk/svelte-facebook-customer-chat

Usage (With Svelte)

<CustomerChat ref:fb page_id="163258547622199" theme_color="#05a092"  />

<script>
  import CustomerChat from '@beyonk/svelte-facebook-customer-chat'

	export default {
		components: {
			CustomerChat
		}
	}
</script>

The attributes you pass to the CustomerChat component are as per facebook documentation.

You definitely need to pass the attribute page_id.

Usage (Vanilla JS)

<div id="my-chat"></div>

<script>
  import CustomerChat from '@beyonk/svelte-facebook-customer-chat'

	const chat = new CustomerChat({
		target: document.querySelector('#my-chat'),
		data: {
			page_id: '1234567890',
			theme_color: '#ff0000'
		}
	})
</script>

Other (non facebook attributes)

There are a number of configuration attributes you can pass, but all are optional.

List of possible options in the module:

OptionDefaultRequiredDescription
localeen_GBfalseFacebook chat locale
versionv2.12falseFacebook Customer Chat SDK version
autoLogAppEventstruefalseas Facebook. Automatically log app events
libtruefalseUnique id to determine if component is loaded. You probably don't need to change this.

License

MIT License