Sending and receiving WhatsApp with the Twilio API and .NET Blazor
This Tutorial demonstrates how to send and receive WhatsApp messages within a Blazor environment running on . NET.
tl;dr You find a full working copy on https://github.com/abierhaus/twilio-whatsapp-example. Besides, the code also includes methods for storing the received messages.
The goal is to provide a straightforward quick-start application to send and receive WhatsApp messages via the Twilio API.
We use the Twilio MessageResource API to send WhatsApp Messages. For receiving WhatsApp, we use the suggested Twilio WebHook approach.
Prerequisites
- Visual Studio 2019 or Visual Studio Code
- Twilio Account (you can get one free for testing purpose)
- Setup the Twilio WhatsApp sandbox (https://www.twilio.com/console/sms/whatsapp/sandbox)
- Access to a cloud/ hosting provider like Microsoft Azure or Amazon WebServices
Setting up the project
- Create a new project with template “Blazor App” in Visual Studio with project name WhatsApp-test
- Select .NET 5 as a framework and Blazor Server App as a template
3. Install Twilio NuGet packages with the package manager console
- Install-Package Twilio
- Install-Package Twilio.AspNet.Common
- Install-Package Twilio.AspNet.Core
or within the Visual Studio NuGet Package Manager
4. Configure appsettings.json with your Twilio Account SID, Auth-Token, and WhatsApp Channel number
5. Create a class with the name “TwilioService.” This service will be used for sending WhatsApp with the Twilio API
6. Use the following code for the service class; you can copy it from https://github.com/abierhaus/twilio-whatsapp-example/blob/master/twilio-whatsapp-example/Services/TwilioService.cs
The Send method will take the number and the message as parameters. After getting the configuration's credentials, we use the internal Twilio API Method CreateAsync to create a message and send it. In this example, we do not use the return type. However, it is worth taking a look into its properties since it contains, e.g., status information.
Register this service class in the Startup.cs in the ConfigureServices method.
7. Create a blazor page “Send” which should contain a “To” and “Content” input and a simple send button. The code should inject the TwilioService and the following method
Now you can start the application and navigate to the send page.
Note: Dont forget to set up your sandbox account like described in the prerequisites and register your own phone number. Otherwise you won’t be able to send WhatsApp messages
8. Create a class called “WhatsAppReceiver” that inherits from the TwilioController and create an index method that uses incoming message as a parameter and returns an async Task of TwMLResult. The code example below takes the parameter. It sends a return message back to the sender.
For your application, you can work with the incoming message object.
Register the WhatsAppReceiver as an endpoint in your startup configure method.
9. Now, you can deploy your application to the web hoster. After deployment, you have to set up the URL to the WhatsAppReceiver controller in https://www.twilio.com/console/sms/whatsapp/sandbox on the “WHEN A MESSAGE COMES IN” parameter. In my case, it is https://sandbox-twilio-whatsapp-example.azurewebsites.net/WhatsAppReceiver
Twilio will now send all incoming messages to this endpoint.
10. Now, you can reply to your own test message on your private mobile account and receive a message back
The sample should also work with Twilio SMS, however, I did not test it yet.
