Nomenclature Predictably Misunderstood
Miss any of our Open RFC calls?Watch the recordings here! »

messenger-bot-components

0.2.1 • Public • Published

Messenger Bot Components

npm Build Status Coverage Status npm type definitions GitHub

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

# 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

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

Install

npm i messenger-bot-components

DownloadsWeekly Downloads

1

Version

0.2.1

License

MIT

Unpacked Size

49.9 kB

Total Files

59

Last publish

Collaborators

  • avatar