Skip to main content

Bottender 1.3: WhatsApp Support, TypeScript Improvement

· 3 min read
C. T. Lin

We are excited to introduce Bottender 1.3 today, featuring:

WhatsApp Support

Since we released Bottender in 2017, WhatsApp support has been a highly requested feature because of its popularity.

As a result, we managed to implement the support with Twilio API for WhatsApp in this release. Twilio API for WhatsApp is one of the most popular ways to send and receive messages programmatically in WhatsApp.

In Bottender v1.3, you may enable whatsapp webhook in your bottender.config.js file to start listening to the WhatsApp requests:

module.exports = {
  channels: {
    whatsapp: {
      enabled: true,
      path: '/webhooks/whatsapp',
      accountSid: process.env.WHATSAPP_ACCOUNT_SID,
      authToken: process.env.WHATSAPP_AUTH_TOKEN,
      phoneNumber: process.env.WHATSAPP_PHONE_NUMBER,
    },
  },
};

Moreover, Bottender provides the WhatsApp routes for you to define WhatsApp specific routing:

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

function App() {
  return router([
    whatsapp.message(HandleMessage),
    whatsapp.media(HandleMedia),
    whatsapp.received(HandleReceived),
    whatsapp.sent(HandleSent),
    whatsapp.delivered(HandleDelivered),
    whatsapp.read(HandleRead),
    whatsapp(HandleWhatsapp),
  ]);
}

Slack Request Signing

We now support request signing for verification instead of tokens. According to Slack's announcement, verification by the token is deprecated now. We highly recommend our users to upgrade if you're using this feature.

To upgrade, get your Slack app's signing secret from Slack console and paste it to your .env and bottender.config.js accordingly. See our doc for detailed instruction.

# .env

SLACK_ACCESS_TOKEN=__YOUR_ACCESS_TOKEN_HERE__
SLACK_SIGNING_SECRET=__YOUR_SECRET_HERE__
# SLACK_VERIFICATION_TOKEN= # deprecated, use SLACK_SIGNING_SECRET
// bottender.config.js

module.exports = {
  channels: {
    slack: {
      enabled: true,
      path: '/webhooks/slack',
      accessToken: process.env.SLACK_ACCESS_TOKEN,
      signingSecret: process.env.SLACK_SIGNING_SECRET,
      // verificationToken: process.env.SLACK_VERIFICATION_TOKEN, // deprecated, use signingSecret
    },
  },
};

Slack Slash Command

Plus, we add support for Slack Slash Command. It can handle commands like /todo ask @crushermd to bake a birthday cake for @worf in #d-social and access arguments in Bottender context:

To determine whether the event is a slash command event, you may check the boolean value - context.event.isCommand:

async function App(context) {
  if (context.event.isCommand) {
    // handling the slash command event
  }
}

You can get the command from context.event.command and its arguments from context.event.text and use them in the reply:

async function App(context) {
  if (context.event.isCommand) {
    await context.sendText(
      `I received slash command '${context.event.command}' with arguments: '${context.event.text}'`
    );
  }
}

You also need to add commands in Slack's console to enable this feature. See our doc for detailed setup in Slack's console.

TypeScript Support in Create Bottender App

In Bottender v1.3, Create Bottender App makes configuring TypeScript very simple. In fact, almost everything is configured for you out of the box. To create a TypeScript application, the only thing you need to do is to add --typescript to your command:

npx create-bottender-app my-app --typescript

Besides, you could still use the dev command to develop your TypeScript application:

bottender dev

If tsconfig.json present, it will watch and compile your TypeScript files for you.

More Exported TypeScript Types

In previous releases, most of the types we defined didn't get exported to the Bottender users. It makes our TypeScript users sometimes have to redefine the same types in their codebase.

In Bottender v1.3, you may import defined types to type hint your TypeScript application:

import {
  MessengerTypes,
  WhatsappTypes,
  LineTypes,
  TelegramTypes,
  SlackTypes,
  ViberTypes,
} from 'bottender';

However, there are still some types that need to be exported or polished. We will keep an eye on it and try our best to investigate more TypeScript use cases.

If you have some problems with using TypeScript in Bottender, feel free to open an issue in Bottender repo. Let's improve it together!