How to create messages with reply buttons

[atTheShikhar]

Hey,
I'm a beginner with telegraf and telegram bots in general ,
I want to ask how can i create message replies with buttons like shown in the image.

I've searched the docs and all i found was keyboard markup but that comes from the bottom of the screen

[dcdunkan]

Hi, there is a lot of examples of Inline Keyboard (That's what they named it 😁).

See from Line 61 to Line 125 of the ./docs/examples/keyboard-bot.js

They should help you. Those uses Markup class. But, you can either do it in the raw method:

For example,

bot.command("inline", (ctx) => {
    ctx.reply("Hi there!", {
        reply_markup: {
            inline_keyboard: [
                /* Inline buttons. 2 side-by-side */
                [ { text: "Button 1", callback_data: "btn-1" }, { text: "Button 2", callback_data: "btn-2" } ],

                /* One button */
                [ { text: "Next", callback_data: "next" } ],
                
                /* Also, we can have URL buttons. */
                [ { text: "Open in browser", url: "telegraf.js.org" } ]
            ]
        }
    });
});

But, comparing to the examples, these methods are a bit complicated to write all the time. And that is what telegraf simplified for us to create inline buttons using Markup. Hope it helps.

[SpiffGreen]

At least you should have shared your reply. Who knows you might in turn help others

[albertogparrado]

if want insert text html with button?

[nimafam]

what about, the keyboard button, how can I handle callback data?
`bot.start(async (ctx) => {

/**
 * Get token for API calling and
 * has saved the token into the cookie.json
 */

axios(config)
    .then(function (response) {

        let user = response.data.userData.user
        let token = response.data.userData.token


        fs.writeFileSync('./cookies.json', JSON.stringify(token, null, 0))
    })
    .catch(function (error) {
        console.log('error: ', error);
    });

await ctx.telegram.sendMessage(ctx.chat.id, 'منو زیر به شما کمک می کند تا سرویس مورد نظر خود را پیدا کنید', {
    parse_mode: 'html',
    reply_markup: {
        keyboard: [
            [
                {text: 'سوالات پرتکرار', callback_data: 'faqCategories'},
                // {text: 'آموزش', callback_data: 'trainingList'},
                {text: 'قیمت رمزارزها', callback_data: 'cryptoPrice'}
            ],
            [{text: 'راه‌های ارتباطی', callback_data: 'contactUs'}],
            [{text: 'بستن منو', callback_data: 'close'}],
        ]
    }
})

})`

[h3li0p4us3]

you can handle callback using :
bot.action('cryptoPrice', (ctx) => { // do ur action here like : ctx.answerCbQuery('قیمت رمز ارز ها در حال حاضر قابل نمایش نیستند !'); });

[ndhet]

How do I retrieve args data?, just like checking cryptoprice btc

[Pan4er]

how to make webApp button?

[bek-shoyatbek]

https://stackoverflow.com/questions/67675449/how-to-open-urls-using-telegraf-js-markup-inline-keyboard-in-telegram-in-app-br