Skip to main content

Bottender 1.4: Customizable Session Store, Messenger, LINE Features, Multi-language Documentation

· 5 min read
C. T. Lin

Today we are very excited to introduce Bottender 1.4, featuring:

Besides, we also bring a bunch of TypeScript improvements into this release. If you're using TypeScript with Bottender in your project, you may want to upgrade and see the changes.

Routes Readability Improvement

We add .any to the original route APIs to hint that they trigger the provided action when receiving any events on specific platform:

  • messenger -> messenger.any
  • line -> line.any
  • telegram -> telegram.any
  • whatsapp -> whatsapp.any
  • slack -> slack.any
  • viber -> viber.any

Considering the following example, having .any can make the code easier to read:

function App() {
  return router([
    messenger.postback(HandleMessengerPostback),
    messenger.delivery(HandleMessengerDelivery),
    messenger.read(HandleRead),
    messenger.any(HandleMessengerEvent),
    line.follow(HandleLINEFollow),
    line.unfollow(HandleLINEUnfollow),
    line.join(HandleLINEJoin),
    line.leave(HandleLINELeave),
    line.any(HandleLineEvent),
  ]);
}

Customizable Session Store

Starting from Bottender 1.4, Bottender supports using any custom session store that implemented the SessionStore interface.

To use your custom session store, set driver to your custom key and put the instance of your session store to stores accordingly in your bottender.config.js file:

// bottender.config.js

module.exports = {
  session: {
    driver: 'mysession',
    stores: {
      mysession: new MySessionStore();
    },
  },
};

So, now you can store your sessions in any storage, for example, Firebase and Amazon DynamoDB.

Messenger One-Time Notification (Beta)

The Messenger Platform's One-Time Notification API (Beta) is a feature that allows a page to request a user permission for sending one follow-up message after the 24-hour messaging window has ended. The user will be offered to receive a future notification.

To send a one time notification template, call context.sendOneTimeNotifReqTemplate() with a title and payload:

async function MyAction(context) {
  await context.sendOneTimeNotifReqTemplate({
    title: '<TITLE_TEXT>',
    payload: '<USER_DEFINED_PAYLOAD>',
  });
}

When the user consents to be notified on a specific update, you will get an `optin' event with the payload and one-time token. You will need to store the token somewhere to use it in the future.

function App() {
  return router([
    messenger.optin(async HandleOption(context) {
      const { optin } = context.event;
      if (optin.type === 'one_time_notif_req') {
         // optin.payload -> the payload you sent in  `context.sendOneTimeNotifReqTemplate` request
         // optin.oneTimeNotifToken -> the one-time token you need to store somewhere
      }
    }),
  ]);
}

When the information becomes available, you can use this one-time token to send a follow up message to the user:

const { getClient } = require('bottender');

const messenger = getClient('messenger');

messenger.sendText(
  { oneTimeNotifToken: 'ONE_TIME_TOKEN' },
  'This is a one-time notification.'
);

Messenger Message Reaction Event

Message reaction is a type of event that triggered when a user press and hold any message, and then tap to make the selection from the following types of emojis:

  • smile
  • angry
  • sad
  • wow
  • love
  • like
  • dislike

To handle message reaction events, you must subscribe to the message_reactions field for your page. And then you can do whatever you want when receiving react and unreact events:

const { router, messenger } = require('bottender/router');

function App() {
  return router([
    messenger.reaction.react(async function HandleReactionReact(context) {
      // Handle react here
      context.event.reaction.reaction; // "love"
    }),
    messenger.reaction.unreact(async function HandleReactionUnreact(context) {
      // Handle unreact here
    }),
  ]);
}

It is particularly useful when you want to know the feedback from your users.

Built-In LINE Notify Support

Push API allows you to send messages directly to your users anytime. However, it might cost some money depends on the pricing plan in your country. LINE Notify is a service that helps you build your notification app without the cost we mentioned earlier.

Bottender now supports LINE Notify using the LineNotify class. You can use it to exchange the token and send notifications to the user:

const { LineNotify } = require('bottender');

const lineNotify = new LineNotify({
  clientId: '<LINE_NOTIFY_CLIENT_ID>',
  clientSecret: '<LINE_NOTIFY_CLIENT_SECRET>',
  redirectUri: 'https://example.com/your/notify/redirect/path',
});

const token = await lineNotify.getToken('<AUTHORIZATION_CODE>');
await lineNotify.sendNotify(token, 'Hello bottender!');

To learn more about LINE Notify refer to the LINE Notify Documentation.

LINE Icon and Display Name Switch

Recently, LINE announced that icon and display name for LINE official account can be changed.

To change the icon and display name of your LINE Official Account, provide the sender option:

await context.sendText('Hello, I am Cony!!', {
  sender: {
    name: 'Cony',
    iconUrl: 'https://line.me/conyprof',
  },
});

LINE Emoji in Text Messages

You might have already learned that you can include LINE emojis in your text message:

await context.sendText(
  `Look at this: ${String.fromCodePoint(0x100084)} It's a LINE emoji!`
);

In Messaging API Update for April 2020, LINE announced LINE original emoji in the previous example is deprecated.

Now you can provide the emoji option includes an index, product ID, and emoji ID of the emojis in your text message:

await context.sendText("Look at this: $ It's a LINE emoji!", {
  emojis: [
    {
      index: 14,
      productId: '5ac1bfd5040ab15980c9b435',
      emojiId: '001',
    },
  ],
});

For more emojis, see Sendable LINE Emoji List.

Multi-language Documentation Website

In this version, we start moving our official documentation website from English-only to multi-language. Thanks to Docusaurus and Crowdin Open source Plan, the multi-language setup couldn't be easier.

The first language we try to translate is Traditional Chinese, and almost 70% of the latest documentation has been translated.

You can find the language switch dropdown on the website header:

We'll keep spending a lot of effort on improving our English documents because it's still a lot of important topics we need to cover.

If you're interested in helping translate those documents (especially other than Traditional Chinese), please contact us on Twitter @bottenderjs or send email to bottender@yoctol.com.