Messenger Bot Components

Component kit of Messenger platform. Friendly for developers and help you validate structure of bot message. This project is write by TypeScript, so you can use it with Snippets.

Usage
Features
Document
Notes
Contributing
TODO

Usage

# Install this dependency first
npm install messenger-bot-components --save

// index.js
import { TemplateGeneric, ButtonUrl, ButtonPostback } from 'messenger-bot-components'

const body = {
  recipient: {
    id: 'USER_ID'
  },
  message: new TemplateGeneric([
    new TemplateGeneric.Element('Generic template Title', {
      imageUrl: 'A image',
      subtitle: 'It\s useful!!',
      defaultAction: new TemplateGeneric.Element.DefaultAction(
        'https://webview',
        {
          webviewHeightRatio: TemplateGeneric.Element.DefaultAction.WebviewHeightRatio.COMPACT,
          messengerExtensions: true,
          fallbackUrl: 'https://website-not-support-messenger-extensions'
        }
      ),
      buttons: [
        new ButtonUrl('Report Issue', 'https://github.com/ALiangLiang/messenger-bot-components/issues'),
        new ButtonPostback('Start Chatting', 'DEVELOPER_DEFINED_PAYLOAD')
      ]
    })
  ])
}

console.dir(JSON.stringify(JSON.parse(body)))
// Output the schema that you can send to Messenger

// Directly send to Messenger and client.
SendToMessenger(body)

Features

Friendly code
Snippets (If your IDE support it. e.g. VS Code)
Type and parameter checking and restrictions (If you write with TypeScript)

Document

The docuement generated by typedoc

Notes

All components follow a rule. The required parameters are all placed in foward arguments. Other optional parameters setting in last argument.
For example:

// In url button, the first two arguments are required.
// Last argument with object is used to setting optional parameters.
new ButtonUrl(
  'View Website', /* required */
  'https://peterssendreceiveapp.ngrok.io/view?item=103', /* required */
  {
    messengerExtensions: true,  /* optional */
    webviewHeightRatio: 'tall', /* optional */
    fallbackUrl: 'https://peterssendreceiveapp.ngrok.io/' /* optional */
  }
);

Contributing

Messenger Platform API is still on dev. So we need update the module usually. If you like this package, welcome to help me maintain the tool. :)

TODO

License

MIT

ALiangLiang/messenger-bot-components