How to pass parameters to Telegram Web App

Question

I have a bot that sends a message with two buttons: Add and Delete (for example). These buttons open the Telegram Web App, which I added using @botfather /newapp, where I put the link to my web application.

const { Telegraf, Markup } = require('telegraf')
require('dotenv').config()

const bot = new Telegraf(process.env.BOT_TOKEN)

bot.command('/command', ctx => {
  ctx.reply('Open web app', Markup.inlineKeyboard([
    Markup.button.url('Add', 'https://t.me/bot_name/app_name),
    Markup.button.url('Delete', 'https://t.me/bot_name/app_name)
  ]))
})

All I need is pass parameters to web app. For example, for each button I need next URLs:

https://t.me/bot_name/app_name?type=add
https://t.me/bot_name/app_name?type=delete

But if I do this, the web application will still not have these parameters in URL. These parameters are dynamic and that's why I can't create separate apps with different URL's like https://web_app.com/add and https://web_app.com/delete.

Also I can't use Markup.button.url('Button', 'https://web_app.com?type=add') because it will open in browser - not like Telegram Web App.

Answer 1

Well, I am currently working on the same scenario and passing query params to telegram web app just works. Using Telegraf lib:

ctx.reply('Open web app', {
  reply_markup: {
    resize_keyboard: true,
    inline_keyboard: [
      {
        text: 'Date only',
        web_app: {
          url: 'https://expented.github.io/tgdtp/?hide=time'
        }
      },
      {
        text: 'Date range',
        web_app: {
          url: 'https://expented.github.io/tgdtp/?min=2022-05-01&max=2022-05-20'
        }
      }
    ]
  }
)

Example telegram web app repo with query params