https://github.com/hungdev/react-customer-chat
Simple component integrate facebook customer chat plugin to your react web
https://github.com/hungdev/react-customer-chat
chat customer customer-care customer-service customer-support facebook fb message plugin react
Last synced: 5 days ago
JSON representation
Simple component integrate facebook customer chat plugin to your react web
- Host: GitHub
- URL: https://github.com/hungdev/react-customer-chat
- Owner: hungdev
- Created: 2019-03-31T09:03:23.000Z (over 6 years ago)
- Default Branch: master
- Last Pushed: 2019-03-31T11:35:38.000Z (over 6 years ago)
- Last Synced: 2025-08-30T21:38:00.065Z (about 1 month ago)
- Topics: chat, customer, customer-care, customer-service, customer-support, facebook, fb, message, plugin, react
- Language: JavaScript
- Homepage: https://www.npmjs.com/package/react-customer-chat
- Size: 9.66 MB
- Stars: 4
- Watchers: 1
- Forks: 2
- Open Issues: 0
-
Metadata Files:
- Readme: readme.md
Awesome Lists containing this project
README
# React Customer Chat
Simple component integrate facebook customer chat plugin to your react web
# Install
```js
npm install react-customer-chat --save
```
## [Setting Up the Plugin](https://developers.facebook.com/docs/messenger-platform/discovery/customer-chat-plugin#steps)
Option 1: Setup Using Developer Steps
1. Click `Settings` at the top of your Page
2. Click `Messenger Platform` on the left
3. Edit whitelisted domains for your page in the `Whitelisted Domains` section
Option 2: Using the Setup Tool
1. Go to Page Settings > Messenger Platform
2. In the 'Customer Chat Plugin' section, click the 'Set Up' Button.
The setup tool provides a simple UI for customizing the greeting message, theme color, displayed response time, and setting the whitelisted domains for the plugin.
[see more](https://developers.facebook.com/docs/messenger-platform/discovery/customer-chat-plugin#setup_tool)
> See more details in [Customer Chat Plugin official docs](https://developers.facebook.com/docs/messenger-platform/discovery/customer-chat-plugin) and [Customer Chat SDK official docs](https://developers.facebook.com/docs/messenger-platform/discovery/customer-chat-plugin/sdk).
* How To Find Facebook Page ID?
Go to the Facebook page you own/admin > “About” > “Page Info.”
Now, at the very bottom, you can find the “Facebook Page ID”.
### Note:
For security reasons, the plugin will only render when loaded on a domain that you have whitelisted. Refer to [whitelisted_domains reference](https://developers.facebook.com/docs/messenger-platform/reference/messenger-profile-api/domain-whitelisting) to learn how to whitelist your domain programmatically.
> Domain Name and HTTPS Required
Domains must meet the following requirements to be whitelisted:
Served over HTTPS
Use a fully qualified domain name, such as https://www.messenger.com/. IP addresses and localhost are not supported for whitelisting.
# Usage:
```javascript
import CustomerChat from 'react-customer-chat'
```
# Props
* pageId: your page id
* include attribute [Customizing the Plugin](https://developers.facebook.com/docs/messenger-platform/discovery/customer-chat-plugin#customization)
# Pull request
Pull requests are welcome!