@botbuildercommunity/adapter-twilio-whatsapp

Twilio WhatsApp Adapter (beta)

This is part of the Bot Builder Community Extensions project which contains various pieces of middleware, recognizers and other components for use with the Bot Builder JavaScript SDK v4.

The Twilio WhatsApp adapter for the Microsoft Bot Framework allows you to add an additional endpoint to your bot for use with Twilio WhatsApp. The goal of this adapter is to support WhatsApp via Twilio as seamlessly as possible. All supported features on WhatsApp are mapped to the default Bot Framework SDK.

To send messages with WhatsApp in production, you have to wait for WhatsApp to formally approve your account. But, that doesn't mean you have to wait to start building. Twilio Sandbox for WhatsApp lets you test your app in a developer environment.

This adapter supports the limited capabilities of Twilio WhatsApp, including;

• Send and receive text messages
• Send and receive text messages with attachments (image, audio, video, document, location)
• Send proactive notifications
• Track message deliveries (sent, delivered and read receipts)
• User authentication via OAuth (provided by Azure Bot Service)

Status

Currently the Twilio WhatsApp channel is in beta.

Products in Beta may occasionally fall short of speed or performance benchmarks, have gaps in functionality, and contain bugs.

APIs are stable and unlikely to change as the product moves from Beta to Generally Available (GA). We will do our best to minimize any changes and their impact on your applications. Products in Beta are not covered by Twilio's SLA's and are not recommended for production applications.

Installation

To install:

npm install @botbuildercommunity/adapter-twilio-whatsapp --save

Usage

1. Use your existing Twilio account or create a new Twilio account.
2. Go to the Twilio Sandbox for WhatsApp and follow the first steps.
3. At the Configure your Sandbox step, add your endpoint URLs. Those URLs will be defined by the snippet below, by default the URL will be [your-bot-url]/api/whatsapp/messages. The status callback url is optional and should only be used if you want to track deliveries of your messages.
4. Go to your Dashboard and click on Show API Credentials.
5. Implement the snippet below and add your Account SID, Auth Token, your phone number and the endpoint URL you configured in the sandbox.
6. Give it a try! Your existing bot should be able to operate on the WhatsApp channel via Twilio.

const { TwilioWhatsAppAdapter } = require('@botbuildercommunity/adapter-twilio-whatsapp');

const whatsAppAdapter = new TwilioWhatsAppAdapter({
    accountSid: '', // Account SID
    authToken: '', // Auth Token
    phoneNumber: '', // The From parameter consisting of whatsapp: followed by the sending WhatsApp number (using E.164 formatting)
    endpointUrl: '' // Endpoint URL you configured in the sandbox, used for validation
});

// WhatsApp endpoint for Twilio
server.post('/api/whatsapp/messages', (req, res) => {
    whatsAppAdapter.processActivity(req, res, async (context) => {
        // Route to main dialog.
        await bot.run(context);
    });
});

Advanced

• Send and receive attachments
• Send and receive location messages
• Send proactive notifications
• Implement channel-specific functionality
• Monitor the status of your WhatsApp outbound message
• User authentication within a conversation

Send and receive attachments

The Bot Framework SDK supports the task of sending rich messages to the user. The Twilio WhatsApp adapter is using the same principles as the Bot Framework SDK. (official documentation).

Attachments to WhatsApp messages can be of many different file types, including JPG, MP3, and PDF. Read more about the supported file types in the Twilio FAQ. The file type can be found by looking at the contentType property of the attachment.

Example

const reply = {
    type: 'message',
    text: 'This is a message with an attachment.',
    attachments: [
        {
            contentType: 'image/png',
            contentUrl: 'https://docs.microsoft.com/en-us/bot-framework/media/how-it-works/architecture-resize.png'
        }
    ]
};

await context.sendActivity(reply);

You can send media messages up to 5 MB in size. At this time, Twilio will not transcode media for outgoing WhatsApp messages, so if you need to send a media object that is larger than 5 MB, please reduce the file size before sending it to Twilio.

Send and receive location messages

Twilio WhatsApp offers the ability to send and receive location messages.

Sending

Location messages can be sent in two ways. By using a JSON attachment or by sending the location directly via channelData.

Attachment

const replyWithLocation = {
    type: 'message',
    text: `Microsoft Nederland`,
    attachments: [
        {
            contentType: 'application/json',
            content: {
                elevation: null,
                type: 'GeoCoordinates',
                latitude: 52.3037702,
                longitude: 4.7501761,
                name: 'Schiphol'
            }
        }
    ]
};

await context.sendActivity(replyWithLocation);

ChannelData

const replyWithLocation = {
    type: 'message',
    text: 'name', // The name of the location being sent (Location must exist in Google maps for the hyperlink to work on Mac/Windows WhatsApp client)
    channelData: {
        persistentAction: 'geo:{latitude},{longitude}|{label}'
    }
};

await context.sendActivity(replyWithLocation);

Receiving

if (context.activity.attachments && context.activity.attachments.length > 0) {
    for (attachment of context.activity.attachments) {
        if (attachment.contentType === 'application/json' && attachment.content.type === 'GeoCoordinates') {
            console.log('Received location!');
            await context.sendActivity('Received a location' +
            `${attachment.name} (${attachment.content.name}) (${attachment.content.latitude},${attachment.content.longitude})`);
        }
    }
}

Send proactive notifications

Proactive notifications are supported using the same principles as the Bot Framework SDK. Read more about how to send proactive notifications to users.

A WhatsApp session begins with a user initiated message to your app. Sessions are valid for 24 hours after the most recently received message, during which time you can communicate with them using free form messages. In order to send a message outside the 24 hour Session window, you must use a pre-approved template (see Sending Notifications section).

Example

// Capture conversation reference
conversationReference = TurnContext.getConversationReference(context.activity);

// Send pro-active message
await whatsAppAdapter.continueConversation(conversationReference, async (turnContext) => {
    await turnContext.sendActivity(`Proactive message!`);
});

Implement channel-specific functionality

The Twilio WhatsApp channel is using whatsapp as the channel id. Within the TurnContext, you can use the following snippet to detect if the request is coming from the Twilio WhatsApp channel and to implement your custom logic. if (context.activity.channelId === 'whatsapp')

Using the channelData object on new message activities is currently only supported for passing persistentAction, which can be used to send location messages.

Monitor the status of your WhatsApp outbound message

If you configure the status callback url in Twilio Configuration, multiple status events will be broadcasted to your bot. You can use this functionality to monitor the status of your WhatsApp outbound message. Possible values include: 'messageRead', 'messageDelivered', 'messageSent', 'messageQueued', 'messageFailed'.

Within the TurnContext you are able to differentiate between the events by reading the value of context.activity.type. If you are using an ActivityHandler, you should use the onUnrecognizedActivityType method.

Example

if (context.activity.type === WhatsAppActivityTypes.MessageRead) {}

User authentication within a conversation

It is possible to use the native Bot Service OAuth functionality by passing in the optional BotFrameworkAdapterSettings object. Sample code for adding OAuth to your bot can be found here.

const whatsAppAdapter = new TwilioWhatsAppAdapter({
    accountSid: '', // Account SID
    authToken: '', // Auth Token
    phoneNumber: '', // The From parameter consisting of whatsapp: followed by the sending WhatsApp number (using E.164 formatting)
    endpointUrl: '' // Endpoint URL you configured in the sandbox, used for validation
}, {
    appId: '', // MicrosoftAppId
    appPassword: '' // MicrosoftAppPassword
});