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.

Table of Contents

• 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

• test script
• more validate rule on components structure
• update more components
• a cute logo
• perfect english README

License

MIT