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
Pure vanilla JS Facebook Customer Chat integration
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:
Option | Default | Required | Description |
---|---|---|---|
locale | en_GB | false | Facebook chat locale |
version | v2.12 | false | Facebook Customer Chat SDK version |
autoLogAppEvents | true | false | as Facebook. Automatically log app events |
lib | true | false | Unique id to determine if component is loaded. You probably don't need to change this. |