{"id":18851410,"url":"https://github.com/xnerhu/fb-chat-api-buttons","last_synced_at":"2025-04-14T09:52:43.976Z","repository":{"id":57233607,"uuid":"167716277","full_name":"xnerhu/fb-chat-api-buttons","owner":"xnerhu","description":"An extension for facebook-chat-api, which provides slightly better UX for your chat bot by adding buttons.","archived":false,"fork":false,"pushed_at":"2019-02-10T22:50:18.000Z","size":107,"stargazers_count":4,"open_issues_count":0,"forks_count":1,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-04-10T03:17:40.095Z","etag":null,"topics":["bot","facebook-bot","facebook-chat-api","nodejs","npm-package","typescript"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/xnerhu.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2019-01-26T17:17:09.000Z","updated_at":"2022-06-25T11:36:04.000Z","dependencies_parsed_at":"2022-08-27T16:41:28.609Z","dependency_job_id":null,"html_url":"https://github.com/xnerhu/fb-chat-api-buttons","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/xnerhu%2Ffb-chat-api-buttons","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/xnerhu%2Ffb-chat-api-buttons/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/xnerhu%2Ffb-chat-api-buttons/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/xnerhu%2Ffb-chat-api-buttons/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/xnerhu","download_url":"https://codeload.github.com/xnerhu/fb-chat-api-buttons/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248860037,"owners_count":21173339,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["bot","facebook-bot","facebook-chat-api","nodejs","npm-package","typescript"],"created_at":"2024-11-08T03:34:43.489Z","updated_at":"2025-04-14T09:52:43.952Z","avatar_url":"https://github.com/xnerhu.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003cdiv align=\"center\"\u003e  \n  \u003cimg src=\"https://github.com/xNerhu/fb-chat-api-buttons/blob/master/screenshots/button.gif?raw=true\"\u003e\n  \u003ch1\u003eChat Buttons\u003c/h1\u003e\n  \n  [![Travis](https://img.shields.io/travis/xNerhu/fb-chat-api-buttons.svg?style=flat-square)](https://travis-ci.org/xNerhu/fb-chat-api-buttons.svg)\n  [![NPM](https://img.shields.io/npm/v/fb-chat-api-buttons.svg?style=flat-square)](https://www.npmjs.com/package/fb-chat-api-buttons)\n\n  An extension for [`facebook-chat-api`](https://github.com/Schmavery/facebook-chat-api), which provides slightly better UX for your chat bot by adding buttons.\n\u003c/div\u003e\n\n## The Problem\nCurrent use of facebook chat bots, works by sending a text command. Unfortunately it's not enough intuitive. The workaround are buttons, which help with some UX problems.\n\n## How it works\nAfter sending an url, facebook gets informations about website by searching meta tags. These meta tags are a way to express what a given website is about. This is called **prefetching**.\n\u003cbr\u003eFor example, if you send an url to website, which looks like this:\n```html\n\u003c!DOCTYPE html\u003e\n\u003chtml\u003e\n  \u003chead\u003e\n    \u003cmeta property=\"title\" content=\"Your title\" /\u003e\n    \u003cmeta property=\"description\" content=\"Your description\" /\u003e\n  \u003c/head\u003e\n  \u003cbody\u003e\u003c/body\u003e\n\u003c/html\u003e\n```\n\nYou will get this card. As you see, it has title and description.\n[`Chat Buttons`](https://github.com/xnerhu/fb-chat-api-buttons) handles these meta informations which goes to facebook and handles if button has been clicked.\n\n# Installing\n\u003e NOTE: To use buttons, you will need to have a public server.\n\nTo install Chat Buttons, run in terminal:\n```bash\n$ npm install fb-chat-api-buttons\n```\n\n# Quick start\n```ts\nconst express = require(\"express\");\nconst login = require(\"facebook-chat-api\");\nconst { ChatButtons } = require(\"fb-chat-api-buttons\");\n\nlet botCredentials = { email: \"email\", password: \"password\" };\n\nconst app = new express();\nconst buttons = new ChatButtons({\n  app: app,\n  endpoint: \"http://www.example.com:3000/callback\"\n});\n\nlogin(botCredentials, (err, api) =\u003e {\n  buttons.setApi(api);\n\n  api.listen((err, message) =\u003e {\n    if (message.body === \"test\") {\n      buttons.send(\n        {\n          id: \"hello-there\",\n          title: \"I'm a button\",\n          description: \"Click to get a message.\",\n          onClick: (btn, threadID) =\u003e {\n            api.sendMessage({ body: \"Hello there!\" }, threadID);\n          }\n        },\n        message.threadID\n      );\n    }\n  });\n});\n\napp.listen(3000, () =\u003e {\n  console.log(\"Listening on 3000!\");\n});\n```\n\n# Documentation\n\n* [`ChatButtons`](#ChatButtons)\n* [`ChatButtons.setApi`](#setApi)\n* [`ChatButtons.send`](#send)\n* [`IOptions`](#IOptions)\n* [`IButton`](#IButton)\n\n\u003ca name=\"ChatButtons\"\u003e\u003c/a\u003e\n## Class ChatButtons\n**`new ChatButtons(options: IOptions)`**\n\n**Example**:\n```ts\nconst app = new express();\nconst buttons = new ChatButtons({\n  app: app,\n  endpoint: \"http://www.example.com:3000/callback\"\n});\n```\n\n\u003ca name=\"setApi\"\u003e\u003c/a\u003e\n## ChatButtons.setApi\n**Arguments:**\n* `api: any`\n\n**Example**:\n```ts\nlogin(botCredentials, (err, api) =\u003e {\n  buttons.setApi(api);\n});\n```\n\n\u003ca name=\"send\"\u003e\u003c/a\u003e\n## ChatButtons.send\n**Arguments:**\n* `btn: IButton`\n* `threadID: string`\n\n**Example**:\n```ts\nbuttons.send(\n  {\n    id: \"btn-id\",\n    title: \"Title\",\n    description: \"Description\",\n    onClick: (btn, id) =\u003e {\n      api.sendMessage({ body: \"Hello world!\" }, id);\n    }\n  },\n  threadID\n);\n\n```\n\n\u003ca name=\"IOptions\"\u003e\u003c/a\u003e\n## IOptions\n```ts\ninterface {\n  app: Application; // Express application\n  path?: string;\n  endpoint: string;\n  api?: any;\n}\n```\n\n\u003ca name=\"IButton\"\u003e\u003c/a\u003e\n## IButton\n```ts\ninterface {\n  id?: string;\n  metadata?: any;\n  title: string;\n  description?: string;\n  image?: string;\n  onClick?: IButtonCallback;\n}\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fxnerhu%2Ffb-chat-api-buttons","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fxnerhu%2Ffb-chat-api-buttons","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fxnerhu%2Ffb-chat-api-buttons/lists"}