Membuat Tombol Interaktif Bot Telegram dengan Node.js dan Telegraf

Oleh Sugeng 10 Sep 2026

Pendahuluan

Bot yang hanya membalas teks terasa kaku. Dengan tombol interaktif (inline keyboard), pengguna cukup mengetuk tombol Menu, Bantuan, atau Kembali tanpa mengetik perintah. Artikel ini membahas cara membuat tombol interaktif dengan Node.js dan Telegraf: tombol URL, callback, menu bertingkat, serta contoh kode lengkap yang siap jalan.

Persiapan

Pastikan Anda sudah punya token bot dari BotFather. Jika belum, ikuti panduan daftar bot di BotFather. Siapkan proyek Node.js:

bash
mkdir -p ~/bot-tombol && cd ~/bot-tombol
npm init -y
npm install telegraf

Buat file .env (jangan commit token ke Git):

bash
BOT_TOKEN=123456:ABC-DEF1234ghIkl-zyx57W2v1u123ew11

Pasang dotenv untuk membaca token:

bash
npm install dotenv

Langkah 1: Bot dengan Tombol Dasar

Buat bot.js:

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

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

bot.start((ctx) => {
  return ctx.reply(
    'Halo! Pilih menu di bawah:',
    Markup.inlineKeyboard([
      [Markup.button.callback('Al-Quran', 'menu_quran')],
      [Markup.button.callback('Hadis', 'menu_hadis')],
      [Markup.button.url('Donasi', 'https://masyarakat.id/#kontak')]
    ])
  );
});

bot.action('menu_quran', (ctx) => {
  ctx.answerCbQuery();
  return ctx.reply('Anda memilih Al-Quran. Ketik /quran <kata> untuk mencari.');
});

bot.action('menu_hadis', (ctx) => {
  ctx.answerCbQuery();
  return ctx.reply('Anda memilih Hadis. Ketik /hadis <kata> untuk mencari.');
});

bot.launch(() => console.log('Bot tombol berjalan'));
process.once('SIGINT', () => bot.stop('SIGINT'));
process.once('SIGTERM', () => bot.stop('SIGTERM'));

Jalankan:

bash
node bot.js

Buka bot di Telegram, kirim /start — tiga tombol akan muncul.

Langkah 2: Menu Bertingkat dengan Tombol Kembali

Pola menu bertingkat memakai editMessageText agar chat tidak penuh pesan baru:

javascript
const menuUtama = () =>
  Markup.inlineKeyboard([
    [Markup.button.callback('Panduan VPS', 'vps')],
    [Markup.button.callback('Panduan Bot', 'bot')],
    [Markup.button.callback('Tutup', 'tutup')]
  ]);

const tombolKembali = () =>
  Markup.inlineKeyboard([[Markup.button.callback('Kembali', 'kembali')]]);

bot.command('menu', (ctx) => {
  return ctx.reply('Pilih kategori:', menuUtama());
});

bot.action('vps', (ctx) => {
  ctx.answerCbQuery();
  return ctx.editMessageText('Panduan VPS: Debian, Docker, Nginx, Caddy.', tombolKembali());
});

bot.action('bot', (ctx) => {
  ctx.answerCbQuery();
  return ctx.editMessageText('Panduan Bot: polling vs webhook, PM2, systemd.', tombolKembali());
});

bot.action('kembali', (ctx) => {
  ctx.answerCbQuery();
  return ctx.editMessageText('Pilih kategori:', menuUtama());
});

bot.action('tutup', (ctx) => {
  ctx.answerCbQuery();
  return ctx.deleteMessage();
});

Langkah 3: Webhook vs Polling untuk Bot Tombol

Untuk pengembangan lokal, polling (bot.launch()) paling mudah. Untuk produksi di VPS dengan domain dan HTTPS, gunakan webhook agar hemat resource:

javascript
// webhook.js (ringkas)
const { Telegraf } = require('telegraf');
const bot = new Telegraf(process.env.BOT_TOKEN);

bot.start((ctx) => ctx.reply('Bot webhook aktif!'));

module.exports = bot;
Perbandingan lengkap dibahas di artikel perbedaan webhook dan polling serta panduan deploy bot di VPS Debian 13.

Tabel Jenis Tombol

JenisFungsiContoh
callbackKirim data ke bot tanpa buka linkMenu, pagination, konfirmasi
urlBuka tautan eksternalDonasi, website, channel
switchToCurrentChatIsi inline queryBerbagi bot ke chat lain

Troubleshooting

  • Tombol tidak merespons: pastikan setiap bot.action('id', ...) cocok persis dengan callback('Teks', 'id').
  • Loading tombol muter terus: selalu panggil ctx.answerCbQuery() di awal handler.
  • Error 409 Conflict: bot dijalankan dua kali (polling ganda). Matikan proses lama atau pakai satu mode saja.
  • Token invalid 401: cek .env, pastikan tanpa spasi dan tanpa tanda kutip berlebih.

Kelebihan dan Kekurangan

Kelebihan tombol interaktif:

  • Pengalaman pengguna jauh lebih baik.
  • Mengurangi salah ketik perintah.
  • Bisa membuat menu, pagination, dan konfirmasi.

Kekurangan:

  • Perlu handler action untuk setiap tombol.
  • Pesan dengan keyboard perlu diedit manual bila menu berubah.

Kesimpulan

Tombol inline keyboard membuat bot Telegram terasa seperti aplikasi mini. Mulai dari tombol callback sederhana, menu bertingkat dengan tombol kembali, hingga webhook produksi — semuanya bisa dibangun hanya dengan Node.js dan Telegraf dalam satu file.

Artikel Terkait