Creating Interactive Menus with TPY: Buttons and Inline Keyboards

Creating Interactive Menus with TPY

Inline Keyboard Basics

Inline keyboards allow you to add clickable buttons to your messages. Users can interact with these buttons without typing commands.

PYTHON

// Simple inline keyboard
var keyboard = [
    [{text: "🔍 Search", callback_data: "search"}],
    [{text: "📚 Categories", callback_data: "categories"}],
    [{text: "ℹ️ Help", callback_data: "help"}]
];
bot.sendInlineKeyboard(keyboard, "What would you like to do?");

Multi-Row Keyboards

You can organize buttons into multiple rows for better layout:

PYTHON

// Keyboard with multiple rows
var keyboard = [
    [{text: "🔥 Popular", callback_data: "popular"}, {text: "✨ New", callback_data: "new"}],
    [{text: "📁 Categories", callback_data: "categories"}, {text: "🏷️ Tags", callback_data: "tags"}],
    [{text: "⚙️ Settings", callback_data: "settings"}, {text: "❓ Help", callback_data: "help"}]
];
bot.sendInlineKeyboard(keyboard, "Browse content:");

Handling Button Clicks

When a user clicks a button, it sends a callback query to your bot. You need to handle these callbacks in your commands.

PYTHON

// In your command that handles callback_data="categories"
var categories = ["Technology", "Gaming", "Education", "Entertainment"];
var catKeyboard = [];
for (var i = 0; i < categories.length; i++) {
    catKeyboard.push([{text: categories[i], callback_data: "cat_" + i}]);
}
bot.sendInlineKeyboard(catKeyboard, "Select a category:");

URL Buttons

Buttons can also link to external websites:

PYTHON

var keyboard = [
    [{text: "📘 Documentation", url: "https://docs.example.com"}],
    [{text: "💬 Support Chat", url: "https://t.me/support"}],
    [{text: "🔙 Back", callback_data: "main_menu"}]
];
bot.sendInlineKeyboard(keyboard, "Need help? Check these resources:");

Dynamic Menus

Create dynamic menus that change based on user data or context:

PYTHON

var userRole = User.getProperty("role");
var keyboard = [];

// Common options for all users
keyboard.push([{text: "👤 Profile", callback_data: "profile"}]);

// Admin-only options
if (userRole === "admin") {
    keyboard.push([{text: "⚙️ Admin Panel", callback_data: "admin"}]);
    keyboard.push([{text: "📊 Statistics", callback_data: "stats"}]);
}

// Premium member options
if (userRole === "premium" || userRole === "admin") {
    keyboard.push([{text: "✨ Premium Features", callback_data: "premium"}]);
}

bot.sendInlineKeyboard(keyboard, "Menu:");

Updating Messages

You can edit existing messages to update menus without sending new messages:

PYTHON

// After user clicks a button, update the message
var newKeyboard = [
    [{text: "✅ Option Selected", callback_data: "selected"}],
    [{text: "🔙 Back", callback_data: "back"}]
];

api.editMessageText({
    message_id: request.message_id,
    text: "You selected an option. What would you like to do next?",
    reply_markup: {inline_keyboard: newKeyboard}
});

Learn More

For more interactive menu examples, visit:

🔗 Telebot Creator Documentation

Best Practices

Keep menus simple and intuitive. Use emojis to make buttons visually appealing. Always provide a way for users to go back to the main menu.

📚 Source

This tutorial is based on the official Telebot Creator Documentation. Visit their site for the most up-to-date information and advanced guides.

#tpy #keyboards #buttons #interactive

Creating Interactive Menus with TPY: Buttons and Inline Keyboards