https://github.com/yoctol/react-messenger-message-us

React component for messenger message us plugin
https://github.com/yoctol/react-messenger-message-us

Last synced: about 1 year ago
JSON representation

React component for messenger message us plugin

• Host: GitHub
• URL: https://github.com/yoctol/react-messenger-message-us
• Owner: Yoctol
• License: mit
• Created: 2018-03-20T04:34:53.000Z (about 8 years ago)
• Default Branch: master
• Last Pushed: 2023-07-19T03:51:27.000Z (almost 3 years ago)
• Last Synced: 2025-04-05T09:11:26.697Z (about 1 year ago)
• Language: JavaScript
• Size: 806 KB
• Stars: 10
• Watchers: 11
• Forks: 1
• Open Issues: 11
• Metadata Files:
  • Readme: README.md
  • Changelog: CHANGELOG.md
  • License: LICENSE

Awesome Lists containing this project

README

          
# React Messenger Message Us

> React component for [Messenger message us plugin](https://developers.facebook.com/docs/messenger-platform/discovery/message-us-plugin)

[![npm](https://img.shields.io/npm/v/react-messenger-message-us.svg?style=flat-square)](https://www.npmjs.com/package/react-messenger-message-us)

[![Build Status](https://travis-ci.org/Yoctol/react-messenger-message-us.svg?branch=master)](https://travis-ci.org/Yoctol/react-messenger-message-us)

[![License: MIT](https://img.shields.io/badge/License-MIT-blue.svg)](https://opensource.org/licenses/MIT)

## Screenshot

![](https://user-images.githubusercontent.com/3382565/37636056-82b65fda-2c3a-11e8-92e4-df0121a0044f.png)

## Prerequisite

Whitelist your domain to connect your Facebook Page to your website via the

Facebook tool.

* From UI: Facebook Page Settings > Messenger Platform > Whitelisted Domains

* From API: Use HTTP API or API client likes

  [messaging-api-messenger](https://github.com/Yoctol/messaging-apis/tree/master/packages/messaging-api-messenger#setwhitelisteddomainsdomains)

## Installation

```sh

npm install react-messenger-message-us

```

## Usage

```js

import React from 'react';

import ReactDOM from 'react-dom';

import MessengerMessageUs from 'react-messenger-message-us';

ReactDOM.render(

  ,

  document.getElementById('demo')

);

```

> Note: It will handle sdk initialize automatically for you. See more details in

> [fbsdk official docs](https://developers.facebook.com/docs/javascript/quickstart/).

## Props

```js

static propTypes = {

  pageId: PropTypes.string.isRequired,

  appId: PropTypes.string.isRequired,

  color: PropTypes.string,

  size: PropTypes.string,

  autoLogAppEvents: PropTypes.bool,

  xfbml: PropTypes.bool,

  version: PropTypes.string,

  language: PropTypes.string,

  debug: PropTypes.bool,

};

static defaultProps = {

  color: 'blue',

  size: 'large',

  autoLogAppEvents: true,

  xfbml: true,

  version: '2.11',

  language: 'en_US',

  debug: false,

};

```

## Related

* [react-messenger-customer-chat](https://github.com/Yoctol/react-messenger-customer-chat) - React component for messenger customer chat plugin.

* [react-messenger-checkbox](https://github.com/Yoctol/react-messenger-checkbox) - React component for messenger checkbox plugin.

* [react-messenger-send-to-messenger](https://github.com/Yoctol/react-messenger-send-to-messenger) - React component for messenger send to messenger plugin.

* [messaging-api-messenger](https://github.com/Yoctol/messaging-apis/tree/master/packages/messaging-api-messenger) - Messaging APIs for Messenger.

* [bottender](https://github.com/Yoctol/bottender) - Make Bots in Your Way, Fast and Flexibly.

## License

MIT © [Yoctol](https://github.com/Yoctol/react-messenger-message-us)