Build an e-commerce telegram web app bot?
After version 6 Telegram web app bot features came to life. And in this post, I will teach you how to get started with them.
Let’s get started!
Connect:
Go to Botfather and create a new bot, give it a name and a username. You may customize it more according to your needs I will use a minimal approach.
- send command /mybots
- select your bot that you plan to connect to the web app.
- select Bot Settings.
- select Domain and provide the domain in which your web app will be launched, HTTPS is a must.
importantly: if you don’t have yet the domain you may come to this step at last as well if you do not have a domain yet and have plans to host your app on GitHub pages, netlify, vercel, or so on.
More important by far is that Here we are using the simplistic approach to launch a web app but there are at least three ways now to launch and how you launch your web app is important when data transferring between a web app and a bot.
I will leave the differences at the bottom! For now, let’s have fun and do some exciting parts as a JS developer :):(:. Using HTML, CSS and JavaScript, even React.
Initialize:
In order to connect your Web App to the Telegram client, place the script telegram-web-app.js in the <head> tag before any other scripts, using this code:
<script src="https://telegram.org/js/telegram-web-app.js"></script>Inside normal JS script now we can access window.Telegram.WebApp, for more info, use this link.
As I mentioned above that how we launch our bot affects the way data is transferred, now we can see one of the outcomes which is that WebApp.initData string with raw data transferred to the Web App, convenient for validating data is transferred to the app. only when launched via the menu button, which we used initially.
You also have access to many more features and information via WebApp, e.g. colorScheme, mainButton, themeParams, onEvent, sendData ……….. more.
Here I will leave you alone giving you the opportunity to showcase your HTML, and CSS shopping card building skills and meet with you on your journey to JS.
Data Transfer:
Ooh, how fun was it? now, let’s add some intelligence (a brain) to our freshly baked humanoid with a beautiful body.
Durger King, Telegram’s web app bot example. Hopefully, you have designed your app something like this, and it’s never late to customize it, go ahead.
Before:
Before we do any data transfer, let’s understand what has been emphasized so far about how we launch our web apps.
- When you launch your app via the menu button which we are using currently, as I emphasized earlier, you will get an initData from telegram to the web app, and when you want to send back data to your telegram bot server, e.g. user selected some of your products and want to go on purchasing. so when the user hits the order button, you cannot use WebApp.sendData(someData) feature which I will work only with via keyboard launched apps, but you may have to use the answerWebAppQuery feature in our case.
- When you launch your app via the inline button, it also works the same way as the menu button.
- When you launch your app via the keyboard button! you can send data back to the bot in a service message using Telegram.WebApp.sendData. This makes it possible for the bot to produce a response without communicating with any external servers. Also, you do not get initData.
In our case, we need to send data via answerWebAppQuery, without any servers, using the bot API: https://api.telegram.org/${yourBotToken}/answerWebAppQuery, options.
You will need query_id from initData to send data using this approach.
Payment Integration:
Payment integration is also easy and fun with telegram bots but you need to have a server handling user interaction. You can use any backend language for that, but I teach it using JavaScript if you wish to learn it, feel free to contact me.
There might be some unclear parts for you, as this is my first blog post, but I wish to improve more and appreciate your feedback and support, I will also edit this post constantly as web_app bots are a new thing right now and the Telegram team is working on improving it constantly. Follow me for more updates. I am preparing a crash course on this which will be available on YouTube soon, stay tuned.
