Salut tout le monde, ici Marcus d’ai7bot.com. Nous sommes le 19 mars 2026, et j’ai récemment été confronté à un problème particulier que je parie que beaucoup d’entre vous, créateurs de bots, rencontrez également : garder vos bots Telegram frais et interactifs sans déploiements constants. On connaît tous la routine – vous construisez une fonctionnalité sympa, vous poussez une mise à jour, puis une semaine plus tard, vous avez une autre idée. C’est un bon problème à avoir, mais cela peut donner à votre bot une impression un peu… statique si vous n’y prenez pas garde. C’est pourquoi je me suis plongé dans la fonctionnalité « Web App » de Telegram, en particulier comment l’utiliser pour injecter du contenu dynamique et des mini-applications directement dans l’expérience utilisateur de votre bot, le tout sans jamais quitter Telegram.

Pensez-y. Combien de fois avez-vous cliqué sur un lien d’un bot, été emmené sur un site web externe, fait ce que vous aviez à faire, puis dû naviguer manuellement de retour vers le chat ? Cela casse le flux, n’est-ce pas ? Les Telegram Web Apps (parfois appelées Mini Apps) sont là pour remédier à cela. Ce sont essentiellement des pages web qui s’ouvrent directement dans l’interface de Telegram, se sentant comme une partie native de l’application. Votre bot peut les lancer, leur passer des données et même recevoir des données en retour. C’est un bond énorme pour créer des expériences de bot véritablement interactives et engageantes.

Pourquoi les Telegram Web Apps ? Ma découverte du “Bot Boredom”

Mon exploration des Web Apps a commencé il y a quelques mois. J’ai ce bot personnel, appelons-le ‘RecipeBot’, que j’ai construit pour gérer mes plans de repas et mes listes de courses. C’était assez basique : vous tapiez “ajouter du poulet,” et il ajoutait du poulet à votre liste. “Afficher la liste,” et il sortait un bloc de texte. Ça fonctionnait, mais c’était… ennuyeux. Ma femme a même commenté que cela ressemblait à discuter avec une feuille de calcul glorifiée.

J’ai essayé d’ajouter des claviers en ligne, mais pour des interactions complexes comme réorganiser des éléments ou ajuster des quantités, cela est vite devenu un fouillis de boutons. C’est alors que je me suis souvenu avoir vu quelques bots lancer ce qui semblait être des pages web à l’intérieur de Telegram. Une recherche rapide plus tard, et j’étais accro. L’idée de construire une véritable interface utilisateur pour mon RecipeBot, directement dans Telegram, m’a semblé être une révélation.

La plus grande victoire immédiate ? La possibilité d’avoir un formulaire approprié. Imaginez demander à un utilisateur cinq informations différentes. Avec des interactions de bot traditionnelles, cela équivaut à cinq messages distincts, cinq allers-retours. Avec une Web App, c’est un seul formulaire, rempli d’un coup. C’est une énorme amélioration de l’expérience utilisateur.

Se lancer : Les bases d’une Telegram Web App

D’accord, mais qu’est-ce qu’une Telegram Web App exactement ? Au cœur, c’est juste une page web standard (HTML, CSS, JavaScript) qui réside sur votre serveur. Telegram ouvre cette page dans une WebView spéciale lorsque votre bot la déclenche. La magie se produit avec l’objet Telegram.WebApp en JavaScript, que Telegram injecte dans votre page. Cet objet fournit des méthodes pour interagir avec le client Telegram – fermer l’application, renvoyer des données au bot, changer la couleur de l’en-tête, et plus encore.

Voici le flux de base :

1. Votre bot envoie un message avec un bouton en ligne qui a un champ web_app pointant vers l’URL de votre page web.
2. L’utilisateur touche le bouton.
3. Telegram ouvre votre page web dans une WebView.
4. Votre page web (utilisant Telegram.WebApp) interagit avec l’utilisateur et envoie potentiellement des données à votre bot.
5. Votre bot reçoit les données et continue la conversation.

Regardons un exemple super simple. Imaginez que RecipeBot doit me permettre de choisir rapidement quelques ingrédients courants à partir d’une liste. Au lieu de taper chacun d’eux, je veux une checklist.

Étape 1 : Le côté Bot (Python avec python-telegram-bot)

Tout d’abord, votre bot doit offrir la Web App. Cela se fait avec un InlineKeyboardButton qui utilise le paramètre web_app.

from telegram import InlineKeyboardButton, InlineKeyboardMarkup, WebAppInfo
from telegram.ext import Application, CommandHandler, MessageHandler, filters

# Remplacez par le token de votre bot
TOKEN = "YOUR_BOT_TOKEN"
# Remplacez par l'URL de votre web app hébergée
WEB_APP_URL = "https://your-domain.com/ingredients-picker.html" 

async def start(update, context):
 keyboard = [
 [InlineKeyboardButton("Choisir des ingrédients", web_app=WebAppInfo(url=WEB_APP_URL))]
 ]
 reply_markup = InlineKeyboardMarkup(keyboard)
 await update.message.reply_text("Bienvenue sur RecipeBot ! Appuyez pour choisir des ingrédients :", reply_markup=reply_markup)

async def web_app_data_handler(update, context):
 # Ce gestionnaire capture les données envoyées par la web app
 data = update.effective_message.web_app_data.data
 await update.message.reply_text(f"Vous avez choisi ces ingrédients : {data}")

def main():
 application = Application.builder().token(TOKEN).build()

 application.add_handler(CommandHandler("start", start))
 application.add_handler(MessageHandler(filters.StatusUpdate.WEB_APP_DATA, web_app_data_handler))

 application.run_polling()

if __name__ == "__main__":
 main()

Remarquez le web_app=WebAppInfo(url=WEB_APP_URL). C’est la clé. Lorsque l’utilisateur touche ce bouton, Telegram ouvre WEB_APP_URL. De plus, le MessageHandler(filters.StatusUpdate.WEB_APP_DATA, ...) est crucial pour recevoir des données de la web app.

Étape 2 : Le côté Web App (HTML/JavaScript)

Maintenant, créons une simple page ingredients-picker.html. Cette page doit être hébergée quelque part accessible via HTTPS. J’utilise généralement un serveur Flask simple pour le développement, ou Netlify/Vercel pour les pages statiques.

 
Choisissez Vos Ingrédients
 

  Poulet
  Riz
  Brocoli
  Oignons
  Ail
 Envoyer à RecipeBot
 

 
 

Quelques points clés ici :

• <script src="https://telegram.org/js/telegram-web-app.js"></script> : C’est essentiel ! Cela charge l’objet Telegram.WebApp.
• Telegram.WebApp.ready(); : Appelez toujours cela lorsque votre page est chargée et prête à interagir.
• Telegram.WebApp.expand(); : Cela permet à la Web App de remplir l’espace d’écran disponible, offrant une sensation plus immersive.
• Telegram.WebApp.themeParams.bg_color (et autres) : C’est super cool. Telegram expose les couleurs de thème actuelles de l’utilisateur, vous permettant de styliser votre Web App pour qu’elle corresponde à son client Telegram. Cela rend l’expérience beaucoup plus cohérente.
• Telegram.WebApp.sendData(JSON.stringify(selectedIngredients)); : C’est ainsi que vous envoyez des données à votre bot. Le bot reçoit cela dans le champ web_app_data.data.
• Telegram.WebApp.close(); : Ferme la WebView et renvoie l’utilisateur au chat.

Interactions plus avancées : Passer des données à la Web App

Mon sélecteur d’ingrédients est bien, mais que faire si je veux modifier une liste d’ingrédients existante ? Je dois passer des données *à* la Web App lorsqu’elle s’ouvre. Cela est également possible !

Lorsque vous définissez votre WebAppInfo, vous pouvez ajouter des paramètres de requête à votre URL. Par exemple, si je voulais pré-sélectionner “chicken” et “rice” dans mon sélecteur :

# Côté Bot :
existing_ingredients = ["chicken", "rice"]
encoded_ingredients = "%2C".join(existing_ingredients) # Encodez l'URL si nécessaire
WEB_APP_URL = f"https://your-domain.com/ingredients-picker.html?pre_selected={encoded_ingredients}"

keyboard = [
 [InlineKeyboardButton("Modifier les Ingrédients", web_app=WebAppInfo(url=WEB_APP_URL))]
]

Ensuite, dans votre JavaScript de Web App, vous parseriez ces paramètres de requête :

// Côté Web App (dans votre <script> tag) :
document.addEventListener('DOMContentLoaded', function() {
 const urlParams = new URLSearchParams(window.location.search);
 const preSelectedParam = urlParams.get('pre_selected');

 if (preSelectedParam) {
 const preSelectedIngredients = preSelectedParam.split(',');
 preSelectedIngredients.forEach(ingredient => {
 const checkbox = document.querySelector(`input[type="checkbox"][value="${ingredient}"]`);
 if (checkbox) {
 checkbox.checked = true;
 }
 });
 }
});

Cela ouvre une tonne de possibilités ! Vous pouvez passer des ID d’utilisateur, des ID d’élément spécifiques, des états actuels ou tout autre contexte pertinent à votre Web App, la rendant véritablement dynamique en fonction de la conversation en cours avec le bot.

Mon expérience réelle : RecipeBot 2.0 et au-delà

J’ai complètement retravaillé mon RecipeBot avec des Web Apps. Maintenant, lorsque je tape “/edit_meal_plan”, cela lance une Web App. Cette application dispose d’une vue calendrier appropriée où je peux glisser et déposer des recettes, en ajouter de nouvelles avec un formulaire, et même réorganiser les éléments de ma liste de courses avec des poignées de glissement. Lorsque j’ai terminé, j’appuie sur “Sauvegarder,” et la Web App renvoie une charge utile JSON au bot avec toutes les mises à jour. Le bot traite ensuite cela et confirme les changements.

La différence en termes d’expérience utilisateur est énorme. Ma femme l’utilise vraiment maintenant ! Cela ressemble moins à un chatbot et plus à une mini-application intégrée dans Telegram. L’astuce a été de décomposer les interactions complexes en modules logiques de Web App. Au lieu d’une énorme Web App, j’en ai plusieurs plus petites : une pour choisir des ingrédients, une pour planifier des repas, une pour éditer des recettes individuelles.

J’ai aussi passé du temps à m’assurer que les Web Apps étaient réactives. Puisqu’elles s’ouvrent sur les clients Telegram mobiles et de bureau, il est important qu’elles s’adaptent. Utiliser des requêtes média CSS de base et flexbox/grid a rendu cela assez simple. Et honnêtement, intégrer Telegram.WebApp.themeParams pour correspondre au mode sombre/claire de l’utilisateur a été une petite touche qui a fait une énorme différence en termes de qualité perçue.

Choses à Garder à l’Esprit (Apprises à la Dure)

• HTTPS est Indispensable : L’URL de votre Web App *doit* être HTTPS. Aucune exception. Les certificats auto-signés ne fonctionneront pas.
• Vérification de l’Origine : Telegram envoie souvent un paramètre initData dans le hachage de l’URL (ou via Telegram.WebApp.initData). Cela contient des informations utilisateur et un hachage. Validez toujours ce hachage sur votre serveur pour vous assurer que les données proviennent de Telegram et qu’elles n’ont pas été altérées. C’est crucial pour la sécurité si vous gérez des données utilisateur sensibles. J’ai appris cela en commençant à ajouter des paramètres spécifiques aux utilisateurs dans mes Web Apps – vérifiez toujours la source !
• Gestion des Erreurs : Que faire si votre Web App échoue à se charger ? Ou si l’utilisateur perd la connexion ? Prévoyez ces scénarios. Vous pouvez utiliser Telegram.WebApp.showAlert() ou Telegram.WebApp.showConfirm() pour des retours d’utilisateur dans l’interface Telegram.
• États de Chargement : Les Web Apps se chargent comme n’importe quelle autre page web. Utilisez des indicateurs de chargement ou des écrans de chargement si votre application met un moment à récupérer des données, tout comme vous le feriez avec toute application web.
• Restez Léger : N’oubliez pas qu’elle s’ouvre à l’intérieur de Telegram. Bien que vous puissiez charger des frameworks comme React ou Vue, essayez de garder vos bundles de Web App aussi petits que possible pour une expérience fluide, surtout sur les réseaux mobiles.

À Retenir pour Votre Prochain Projet de Bot

Si vous construisez un bot Telegram et souhaitez améliorer son expérience utilisateur, les Web Apps sont sans aucun doute la solution. Voici ce que vous devez faire :

1. Identifier les Interactions Complexes : Examinez le flux actuel de votre bot. Y a-t-il des endroits où vous demandez plusieurs entrées ? Ou où une interface visuelle clarifierait les choses (par exemple : calendriers, listes de contrôle, formulaires complexes, glisser-déposer) ? Ce sont de parfaits candidats pour des Web Apps.
2. Commencer Simple : N’essayez pas de construire une SPA complète tout de suite. Commencez par une seule et simple Web App comme mon sélecteur d’ingrédients. Faites en sorte que le flux de données entre le bot et la Web App fonctionne de manière fiable.
3. Héberger Votre Web App de Manière Sécurisée : Assurez-vous que votre page web est accessible via HTTPS. Des services comme Netlify, Vercel, ou même un serveur basique avec Nginx et Let’s Encrypt sont d’excellentes options.
4. Adoptez Telegram.WebApp : Prenez le temps de comprendre l’objet JavaScript Telegram.WebApp. C’est votre passerelle vers le client Telegram. Utilisez Telegram.WebApp.ready(), Telegram.WebApp.expand(), Telegram.WebApp.sendData(), et Telegram.WebApp.close() comme vos outils principaux.
5. Correspondre au Thème : utilisez Telegram.WebApp.themeParams pour donner à votre Web App une impression de partie intégrante de Telegram. C’est un petit détail qui a un grand impact.
6. Prioriser la Sécurité (initData) : Si votre Web App gère des données spécifiques à l’utilisateur ou sensibles, apprenez à valider le hachage initData sur votre backend. Cela empêche un accès non autorisé ou la manipulation de données.

Les Web Apps Telegram ont complètement changé ma manière d’aborder la construction de bots. Elles comblent le fossé entre des commandes textuelles simples et des applications riches et interactives, le tout sans obliger l’utilisateur à quitter sa conversation. Si vous êtes prêt à faire en sorte que votre bot se démarque vraiment, c’est sans aucun doute une fonctionnalité que vous devez maîtriser. Allez, construisez quelque chose d’incroyable !

Articles Connexes

• Avenir des Chatbots : Meilleurs Outils IA pour 2026 Révélés
• Améliorez la Fiabilité des Bots avec la Surveillance des Erreurs Sentry
• Mon Bot Python : Configuration Rapide avec l’API Telegram

🕒 Published: March 26, 2026