Create a serverless chat demo with Telegram (2023)

Twilio conversationsis an omnichannel messaging platform that allows you to create engaging conversational experiences across multiple channels, including chat, SMS, WhatsApp, and Facebook Messenger. But what if you want to add another channel, like Telegram?

Conversational webhooksprovide a way to associate a unique screen, bot, or other integration with each conversation. This can be used to add a Telegram bot to Conversations.

This hereFast start conversationscreate a demo application that provides a simple Javascript based chat UI usingCodeSandbox.io. In this demo, we add and use a Telegram bot to the conversationTwilio Featuresfor the implementation of the back-end logic.

General description

This blog post provides a step-by-step guide to creating a serverless chat demo with Telegram and ChatUI, using Twilio functions to implement the back-end logic. The guide walks you through integrating a Telegram bot into the conversation, adding another participant via ChatUI, and setting up a scoped webhook to process Telegram messages. The document includes a high-level diagram and flow, along with code snippets for each step in the process. In addition, the publication provides the prerequisites and configuration needed to run the features.

previous requirements

• A Twilio account (if you don't have one,You can register here for free)
• A Telegram account
• learn and startTwilio Features
• get used to itFast start conversationsand have the Conversations demo app ready with CodeSandbox.io

High-level diagram and step-by-step configuration

The high-level diagram and flow are shown in the following image. Illustrates how messages are sent and received between Twilio, Telegram, and Conversation Demo conversations (chat UI). Let's start!

Step 0: Sign up for the Telegram callback

To start,create a Telegram bot. Install the Telegram Messenger app on your device and then search forBotVader.

BotFather is a bot that allows you to create new bot accounts and manage your existing bots. Use it to create a new bot and choose a username for it by sending commands to BotFather. You should see the conversation and commands with BotFather as shown below, but you can start the prompt with/To startand BotFather will guide you.

After the Telegram bot is created and the token is acquired, an HTTP Post request is required to set up the callback for new Telegram messages. This is realized in/in thatfunction to be executed once to set the callback. Alternatively, you can use curl to perform the same task.

navigate toTwilio Features Sectionin the console and create a new service. After a service is created, create a function called/in thatand replace the existing code in the Function Editor with the following:

Step 1: Telegram sends a callback message

Telegram sends HTTP Post to the webhook registered in step 0 for every message sent to the bot.

Step 2: Handle the incoming Telegram message

This function is a webhook that handles incoming Telegram messages. Several tasks are performed here:

1. Find the existing conversation and join the Telegram chat ID.
2. If they don't exist, a new conversation and participant identity are created.
3. The message is forwarded to the conversation.
4. The big chat webhook is configured to handle outgoing messages to Telegram. The chat ID is used as a parameter to compile the webhook address, ensuring consistency in Telegram.

Below is the code of the function. To use it, you need to create a new function in your function service called/receive messagesand replace the existing code with the following.

/receipt message

Step 3: Set up the Chat UI and add it to the conversation

It's time to add another chat participant to talk to your Telegram participant. we recycleconversation application examplevanFast start conversations, follow the instructions to set it up.

Once the chat demo is running, find the SID of the chat in step 2 and add the chat participant with the following command. You can see more details inAdd a chat participant. vanTWILIO_ACCOUNT_SIDjTWILIO_AUTH_TOKENcan be found in the Twilio console.

Step 4 and 5: The conversation sends messages to the ChatUI and vice versa

In a conversation, messages are automatically sent to all participants. This means that everyone in the conversation receives the message at the same time. When a participant responds to a message, that response is also sent to the entire conversation. This ensures that everyone is kept up to date with all messages and replies, ensuring a smooth and efficient communication process. This feature also helps avoid confusion or misunderstandings that can occur when messages are only sent to certain participants, as everyone can see the entire conversation and all replies.

Step 6: The conversation sends messages to the scoped webhook

In step 2, the scoped webhook is registered withonMessage added. Therefore, each new message in the conversation triggers an HTTP POST to the webhook.

Step 7: The scoped webhook sends a message to Telegram

He/New messageThe feature plays an important role in integrating a Telegram bot into Twilio conversations. Check the HTTP POST of the conversation to determine the origin of the message. if the source isSDK, send the message to Telegram via HTTP POST. This feature is essential for smooth communication between the conversation participants and the Telegram bot.

The code for this function is easy to understand. It uses the Axios library to send an HTTP POST request to the Telegram API. The request contains the chat ID and the body of the message. If the source of the message is not "SDK", the function will not execute any code.

Below is the code of the function.New message.

Configure features in the Twilio console

After you complete all the steps mentioned above, you will see 3 features on your Twilio console. These features are essential to the overall functionality of your Twilio application and must be configured correctly for your application to function properly. To run these functions correctly, it is important to make sure that all variables and dependencies are set correctly. Taking the time to double check these settings can save you a lot of time and frustration in the long run and ensure that your Twilio application runs smoothly and efficiently.

• TWILIO_ACCOUNT_SID – The Twilio account SID is a 34-character alphanumeric identifier that begins with the letters "AC" and can be found on the dashboard when you log into the Twilio console. See thishelp pagefor more details.
• TWILIO_AUTH_TOKEN - The authentication token acts as a password to access the Twilio API; you can use thisguideto find it.
• WEBHOOK_BASE_URL - This is the endpoint of the Twilio function used as a webhook to receive messages from the conversation. For this guide, yestelegram2conversaciones-4852.twil.io, you can find the URL in the Twilio Functions console.
• TELEGRAM_API_TOKEN – The Telegram token you received from BotFather in step 0.

Test Telegram-bot

Finally, after setting up the Telegram Bot, you can start sending messages. The bot receives your messages and forwards them to the chat demo you created earlier. Likewise, all messages sent from the chat demo are routed to the bot. This seamless integration between the bot and the chat demo enables direct communication between users and the bot. To get a better idea of ​​how this works, see the screenshots below that illustrate how the messages are presented.

Conclusion

This guide provides a step-by-step process on how to create a serverless chat demo with Telegram and ChatUI using Twilio features. By following the instructions in this document, you can seamlessly integrate a Telegram bot into your Twilio conversations and enable smooth and efficient communication between participants. With the right tools and resources, you can create compelling conversational messaging experiences that span multiple channels and meet the needs of your audience.

Hao Wang is a Principal Solutions Engineer at Twilio helping customers get the most out of Twilio products. He can be reached at hwang0 [at]twilio. withOLinkedIn.