Telegram Mini App — Panduan Langkah demi Langkah

Apa Itu?#

Telegram Mini App memungkinkan pelanggan Anda membuka menu digital restoran langsung di dalam Telegram — tanpa menginstal aplikasi dan tanpa beralih ke browser. Menu terlihat seperti bagian asli dari Telegram: menyesuaikan dengan tema pengguna, mendukung tombol "Kembali" dan gerakan.

Keuntungan#

• 📱 Di dalam Telegram — pelanggan tidak perlu beralih ke browser
• 🎨 Tampilan Asli — warna, font, dan tema menyesuaikan dengan Telegram
• 🔗 Deep Links — tautan langsung ke menu restoran tertentu
• 🌍 Bahasa Otomatis — bahasa diambil dari pengaturan Telegram pengguna
• 🍪 Tanpa cookies — banner cookie tidak ditampilkan di dalam Telegram

Mulai Cepat#

Langkah 1 — Buat Bot#

Buka @BotFather di Telegram dan kirimkan:

/newbot

1. Masukkan nama bot (misalnya, Cenaly Menu Bot)
2. Masukkan username (misalnya, MeniMenuBot) — harus diakhiri dengan Bot
3. Simpan Bot Token yang diterima (format: 123456789:ABCdefGHI...)

Mengapa Bot Token Diperlukan?#

Bot Token adalah kunci rahasia untuk mengelola bot secara programatik melalui Telegram Bot API. Untuk pengaturan dasar Mini App (langkah 2–4) tidak diperlukan — semuanya dilakukan melalui BotFather. Namun, ini diperlukan jika Anda ingin:

• Mengirim pesan ke pelanggan — pemberitahuan status pesanan, promosi, pesan selamat datang
• Menambahkan tombol inline dalam pesan bot (misalnya, tombol "📋 Buka Menu" — lihat bagian di bawah)
• Membuat bot Telegram untuk menerima pesanan — bot dapat menerima dan memproses pesanan
• Mengatur Webhook — menerima peristiwa dari Telegram (tekanan tombol, perintah pengguna)
• Mengintegrasikan dengan CRM atau sistem POS — pemrosesan pesanan otomatis melalui bot

Langkah 2 — Buat Mini App#

Kirimkan perintah BotFather:

/newapp

1. Pilih bot dari daftar
2. Title — nama aplikasi (misalnya, Cenaly)
3. Description — deskripsi (misalnya, Digital restaurant menu)
4. Photo — unggah gambar 640×640 px (ikon aplikasi)
5. GIF — animasi (opsional). Untuk melewati, kirimkan /empty
6. Web App URL — masukkan alamat aplikasi klien Anda:

https://cenaly.com

7. Short Name — nama pendek untuk tautan (misalnya, menu)

Setelah itu, Anda akan mendapatkan tautan kerja seperti:

https://t.me/YourBot/menu

Langkah 3 — Tambahkan tombol "Menu" di chat bot#

Kirimkan BotFather:

/setmenubutton

1. Pilih bot
2. Kirimkan URL:

https://cenaly.com

3. Masukkan teks tombol (misalnya, Open Menu atau 📋 Menu)

Sekarang saat membuka chat dengan bot, tombol yang membuka aplikasi Anda akan muncul di bagian bawah layar.

Langkah 4 — Izinkan domain#

Kirimkan BotFather:

/setdomain

Pilih bot dan masukkan domain:

cenaly.com

Ini akan mengizinkan Telegram Web App bekerja di domain Anda dan semua subdomainnya (misalnya, locationid.cenaly.com).

Deep Links — tautan ke restoran tertentu#

Telegram mendukung parameter startapp, yang diteruskan ke aplikasi saat dibuka. Gunakan ini untuk tautan ke restoran tertentu:

Contoh#

Jika LOCATION_ID restoran Anda adalah lnc2w74z:

https://t.me/YourBot/menu?startapp=lnc2w74z
https://t.me/YourBot/menu?startapp=lnc2w74z__ru
https://t.me/YourBot/menu?startapp=lnc2w74z__en

Tombol Inline dari bot#

Jika bot Anda mengirim pesan ke pelanggan, Anda dapat menambahkan tombol inline yang membuka menu:

Opsi 1 — Tombol Web App (terbuka langsung)#

{
  "inline_keyboard": [[{
    "text": "📋 Buka Menu",
    "web_app": {
      "url": "https://LOCATION_ID.cenaly.com/ru"
    }
  }]]
}

Opsi 2 — Tombol Deep Link#

{
  "inline_keyboard": [[{
    "text": "📋 Buka Menu",
    "url": "https://t.me/YourBot/menu?startapp=LOCATION_ID__ru"
  }]]
}

Apa yang bekerja secara otomatis#

Setelah terhubung di dalam Telegram, fitur-fitur berikut aktif secara otomatis:

QR-kode untuk restoran#

QR-kode yang sudah ada dengan URL seperti https://lnc2w74z.cenaly.com akan terus berfungsi seperti biasa — melalui browser.

Untuk integrasi tambahan dengan Telegram, Anda dapat menempatkan QR-kode kedua di meja dengan tautan ke bot:

https://t.me/YourBot/menu?startapp=lnc2w74z

Memeriksa Fungsionalitas#

1. Buka tautan https://t.me/YourBot/menu di ponsel
2. Tekan Start (jika membuka bot untuk pertama kali)
3. Tekan tombol 📋 Menu di panel bawah chat
4. Pastikan aplikasi terbuka dan memuat menu
5. Coba buka deep link: https://t.me/YourBot/menu?startapp=LOCATION_ID

Masalah Umum#

Tautan Berguna#

• Dokumentasi Telegram Mini Apps
• BotFather
• Telegram Bot API — Tombol Web App