npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

chatfuel-api

v2.1.0

Published

A library to simplify sending messages and broadcasts to a Chatfuel bot over Facebook Messenger

Downloads

19

Readme

Chatfuel Messages and Broadcast API

Build Status

A library to simplify sending messages and broadcasts to a Chatfuel bot.

Chatfuel JSON API

Chatfuel Broadcast API

Requirements

Node version 6 and later are required. Earlier versions are not supported.

Install

npm install chatfuel-api

Usage

import { Chatfuel, broadcast } from 'chatfuel-api';

Sending JSON Responses to Chatfuel

Instantiate the Chatfuel class for each JSON message sent to Chatfuel

new Chatfuel();

To render the complete JSON response, call the method

.render();

Methods

Sending Text Messages

.addText('Your text here')
.render()

Sending Image Messages

.addImage('URL of Image')
.render()

Sending Video Messages

.addVideo('URL of Video')
.render()

Sending Audio Messages

.addAudio('URL of Audio File')
.render()

Sending File Messages

.addFile('URL of File')
.render()

Creating Buttons

Types of buttons: block, link, json, call

.addButton('button type', 'attr', 'button title', extensions)
.render('button');

The attr argument depends on the button type

| Button Type | 'attr' Argument | | ----------- | ----------------------------------- | | block | name of the block | | link | url | | json | url of callback | | call | phone number format: +19268881413 |

When using a link button, the default behavior is to open the link in a new window. You can however enable Messenger extensions and open the link in a webview by passing true as the last argument.

.addButton('link', 'https://url.com', 'Link', true)
.render('button')

Sending A Button Block

Buttons cannot be sent to your bot by themselves. They must be accompanied with at least text. Use a button block to send upto 3 buttons with text.

Define your buttons variable first, then pass it to the button block method.

const buttons = new Chatfuel()
    .addButton('link', 'https://test.com/test', 'URL Button')
    .addButton('block', 'Test Block', 'Block Button')
    .addButton('block', 'Another Block', 'Block Button 2')
    .render('button');

const message = new Chatfuel().addButtonBlock('Text', buttons).render();

Sending Gallery Messages

Galleries are composed of gallery cards. It is necessary to define your cards first, then build the gallery response. Gallery cards can also include buttons.

const buttons = new Chatfuel()
    .addButton('link', 'https://link.com', 'Test Button')
    .render('button');

const message = new Chatfuel()
    .addGalleryCard('Test Title', 'https://test.url', 'Test Subtitle', buttons)
    .addGallery()
    .render();

Sending Quick Replies

.addQuickReply(type, attr, 'Title')
.render('qr')

Quick Replies have two types: Block and JSON. Depending on the type you specify, the attr argument changes.

| Type | Attr | | ----- | --------------------------------------------- | | block | Array of block names ['Block 1', 'Block 2'] | | json | URL of callback |

Quick Replies can be attached to the following methods by including the quick relpies as the last argument : addText(), addImage(), addVideo(), addAudio(), addFile(), addButtonBlock()

const qReplies = new Chatfuel()
    .addQuickReply('block', ['Block 1'], 'Yes')
    .addQuickReply('block', ['Block 2'], 'No')
    .render('qr');

const textMessage = new Chatfuel().addText('Testing Text Message', qReplies).render();

Set Attribute

Chatfuel Attributes can be set by sending the attribute with a button or simply by sending only the attribute. Only JSON and Block buttons are supported.

Sending only the attribute

const message = new Chatfuel().addAttributes('attribute').render();

Sending an attribute with a JSON Callback Button

const message = new Chatfuel()
    .addAttributes('attribute', 'json', 'json button', 'https://callback.url')
    .render();

Sending multiple attributes with a Block Button

const attributes = {
    attribute1: '1',
    attribute2: '2',
};

const message = new Chatfuel()
    .addAttributes(attributes, 'block', 'block button', ['Block Name'])
    .render();

Sending Redirect to Block Messages

.addRedirect('block 1', 'block 2')
.render()

Sending Broadcasts to Chatfuel

To send broadcasts you'll need the botId, blockId, userId and token from the Chatfuel dashboard. You'll also need to specify the message tag. More information can be found here: Message Tags

Create an object that specifies these options and pass it to the broadcast function.

const options = {
    // required
    botId: 'Your Bot URL',
    blockId: 'Block Name',
    token: 'Found in Bot Settings',
    userId: 'Facebook Messenger User ID',
    tag: 'See above URL',

    // optionally set attributes for the user
    attributes: {
        attribute1: 'attr1',
        attribute2: 'attr2',
    },
};

The broadcast function returns a promise, so use basic promise handling for the response and error.

broadcast(options)
    .then(() => {
        // no response is given
    })
    .catch((err) => {
        console.log(err);
    });

Examples

Send a text and image message

const message = new Chatfuel()
    .addText('Test Text')
    .addImage('https://imageUrl.png')
    .render();

Send a text, image, video and two quick replies

const qReplies = new Chatfuel()
    .addQuickReply('json', 'https://test.com/test?a=yes', 'JSON Yes Button')
    .addQuickReply('json', 'https://test.com/test?a=no', 'JSON No Button')
    .render('qr');

const response = new Chatfuel()
    .addText('This is a test')
    .addImage('https://test.com/test.png')
    .addVideo('https://test.com/test.mp4', qReplies)
    .render();

Sending a gallery message from a loop

If you have external data such as a JSON response where you want to create a gallery card in a loop, first extract all the data that you want in the cards into an object in an array.

Example:

const galleryArray = [];
// define data
galleryArray.push({defined data});

Then build the gallery response from the new array.

const gallery = new Chatfuel();
for (let i = 0; i < galleryArray.length; ) {
    gallery.addGalleryCard(
        galleryArray[i].cardTitle,
        galleryArray[i].vehicleImage,
        galleryArray[i].cardSubtitle,
        galleryArray[i].buttons
    );
    i += 1;
}
gallery.addGallery();
gallery.render();
res.send(gallery.template);

Tests

There are over 80 tests to verify everything is working.

Running the tests are easy

npm test

License

This project is licensed under the MIT License - see the LICENSE file for details