How We Moved a Web Service to Telegram Mini Apps
Added a second arrow so that the carousel could be scrolled in both directions.
Added numbering for cards in the collection.
We removed the button from ChatGPT and moved it to the second step of the “carousel” – now we show it under the profile that the user opened.
We also had to change the mechanics of the “Write to interlocutor” button, which, when pressed, was supposed to take the user to his Telegram account and allow him to send a message.
The problem was that Telegram did not transmit information about clicking the “Write to interlocutor” button. This created a “blind spot”: we did not understand who the user actually contacted or at least made an attempt to contact. We had to rename the button to “Get contact”. When clicking on it, the next message sent was a mini-card with the “Write to interlocutor” button and the “Generate greeting using ChatGPT” button.
When we click on “Get contact”, we send a bounce to the user whose contact we requested. This is useful for two reasons:
We warned the interlocutor that a person from the Network might write to him.
If for some reason the other person does not write themselves, the second person can initiate the meeting.
The most difficult part was transferring the participant questionnaire, which is filled out by the user, to the Mini App.
The first problem was that moving the questionnaire to Mini Apps broke the traffic attribution. Webview in Telegram is perceived by Yandex.Metrica as a new browser, and the connection between the browser from which the user got to our bot and the webview browser was broken. This prevented us from understanding the conversion: which people went to the landing page, which of them filled out the questionnaire and became users of the service. It was unclear which of the traffic sources worked better. Correctly setting up Yandex.Metrica also took us a lot of time.
The second problem was related to iPhones. Since Mini Apps on iOS uses Safari, additional nuances arose: for example, when setting focus on the input field, Safari “brings” the user to the center of the free space above the keyboard. But in Mini Apps, it did this only visually. In fact, you saw the input field on the screen, and the text was displayed above. Even after hiding the keyboard, when Safari should return everything to its place, this did not happen. Because of this, if there were any buttons on the page, clicks on them were not registered, since the buttons were drawn below their actual position.
There were few such problems, but to fix them, we had to make many edits to the general bank ui-kit.
Results of the transition
Improved interaction with users.
Not only were we able to provide a convenient and accessible interface within the popular messenger, but we also increased one of our main markers — sixth-month retention — twofold. Mainly due to the seamlessness of the service in Telegram, where notifications and main actions happen in one place without switching between applications and sites.
We reduced time2market and began to bring tasks to sales faster.
Improved user feedback rates.
We were able to significantly expand the platform’s functionality with search, chats, and an events calendar, thus increasing activity in the service by 42% year-on-year.
Some tips for working with Telegram Mini Apps
1. Use initData to manage access and authorization
When developing Mini Apps, it is important that user authorization is secure. Use initData to verify their authenticity. The user has several entry points to Mini Apps: inline button, bot menu button, inline mode, direct link, attachment menu (keyboard button).
initData is passed in all cases except keyboard button. Authentication is performed on your server by decrypting initData and comparing it to expected values.
2. Local development
Unfortunately, the Mini Apps screen in Telegram is always small, which places special demands on the design. For local development of Mini Apps, I recommend reading this articleIf you want, you can do it all with ngrok without using self-sign certificates.
3. Experiment with built-in buttons – MainButton, BackButton and SettingsButton
Important: when working with buttons in Mini App, do not forget to unbind events assigned to buttons using the offClick method, so that when you click you do not call all its previous functions. In addition, you can customize the main button of the bot – set the functionality and change the name.
4. Use showAlert, showPopup, showConfirm to organize notifications and dialogs with users
They are limited in customization, but you won't need to implement these windows yourself.
5. One of the useful features is HapticFeedback
It adds vibration when you click on elements of your interface. You can see how it works in the bot @yoldi_hapticfeedback_bot.
