Boutons Telegram pour chatbots

circle-info

Nous vous recommandons de lire l’article Bouton.

Vous pouvez utiliser à la fois les boutons de réponse (boutons classiques ou clavier) et les boutons Inline (boutons dans le texte) dans Telegram.

circle-info

Important : limitations des boutons

Veuillez tenir compte des restrictions de la plateforme suivantes lors de la création de boutons :

  • Boutons de réponse (clavier) : maximum de 12 boutons par ligne.

  • Boutons intégrés : Maximum de 8 boutons par ligne.

  • Texte du bouton : Limité à 32 caractères.

  • Couleur du bouton : ne peut pas être personnalisé. Les boutons utilisent le style par défaut de la plateforme.

Comment créer un bouton dans un bloc

Pour créer n’importe quel bouton dans un chatbot, allez dans les paramètres du bloc et cliquez sur « Boutons » :

Les paramètres permettant d’ajouter et de modifier le bouton s’ouvriront alors. Cliquez ensuite sur Ajouter:

Une fenêtre de paramètres s’ouvrira, vous permettant de définir le libellé du bouton, l’action et des options supplémentaires.

Les types de boutons suivants sont uniquement disponibles pour le bot Telegram:

  • bouton de partage – permet aux utilisateurs de partager du contenu.

  • bouton de rappel – envoie une requête de rappel silencieuse à votre bot.

  • Telegram WebApp – ouvre une mini-application (par exemple, un widget ou un site web) dans Telegram.

  • Connexion Telegram – autorise les utilisateurs via leur compte Telegram.

Il existe également d’autres boutons disponibles dans Telegram, tels que le paiement, la demande d’un numéro de téléphone ou d’une géolocalisation, et l’envoi d’un lien.

bouton de partage

Lors de la création du bouton, sélectionnez «Partager (Telegram uniquement) » et remplissez les champs (champ de texte supplémentaire facultatif) :

Ce bouton vous permet de transmettre les informations en sélectionnant un contact dans votre liste.

Entrez l’URL que vous souhaitez partager dans le « Lien à partager » .

Une fois un contact sélectionné, le contenu des champs « Lien à partager » et « Texte supplémentaire » sera envoyé. Utilisez cette option pour partager des liens vers des publications de chaînes Telegram et d’autres contenus.

circle-info

Attention ! Cela peut ne pas fonctionner correctement sur certains appareils iOS.

Bouton de connexion au site web

Pour que le bouton de connexion fonctionne, votre bot doit d’abord être autorisé pour le domaine cible. Cette configuration se fait via @BotFather.

Étapes de configuration :

  1. Ouvrez une conversation avec @BotFatherarrow-up-right.

  2. Sélectionnez votre bot dans la liste.

  3. Choisissez Paramètres du bot > domaine et ajoutez le domaine de votre site web.

Ensuite, allez dans la domaine bouton :

Remarque : Le bouton affichera Modifier le domaine si un domaine existe, ou Définir le domaine s’il faut en ajouter un.

Il vous sera demandé de configurer le domaine de votre bot :

Format correct du domaine :

Entrez votre domaine comme mavibot.ai ou comme yourdomain.com si vous avez un site web connecté à MaviBot.

Étape suivante :

Une fois votre domaine vérifié et configuré, vous pouvez passer à la création du bouton d’autorisation.

Dans l’onglet Texte champ, entrez le libellé qui apparaîtra sur le bouton.

Ensuite, fournissez l’URL de la page dans le Lien champ où l’autorisation aura lieu.

Les champs restants seront nécessaires si un bot séparé est utilisé pour l’autorisation (vous devez obtenir l’autorisation d’envoyer des messages pour ce bot) : en particulier, vous devrez indiquer le nom du bot.

Si vous devez pouvoir envoyer des messages depuis le bot spécifié, veillez alors à cocher la case « Demander l’autorisation à l’utilisateur d’envoyer des messages depuis le bot »:

Bouton de connexion Telegram

bouton de rappel

Le bouton Callback est un bouton de retour d’information : le client voit une chose, et dans le bot nous recevons le callback nécessaire pour lancer n’importe quel bloc du tunnel.

C’est assez simple à créer : dans le Boutons champ, cliquez sur le Ajouter bouton. Dans le formulaire qui s’ouvre, saisissez le texte, indiquez le type — Bouton Callback (Telegram) — et saisissez le Texte du callback qui doit être renvoyé lorsque vous cliquez sur le bouton :

Visuellement, le bouton ressemble à un bouton inline classique :

Après avoir cliqué sur le bouton, vous verrez le Callback configuré dans la fiche du client :

circle-info

Important !

Telegram ne prend pas en charge les boutons Callback du clavier.

circle-info

Veuillez noter !

Si le « Callback » est sélectionné, le bouton s’affichera comme callback uniquement si le texte du bouton diffère du texte du callback.

Bouton d’application Web Telegram

Ce bouton vous permet d’ouvrir le site web comme une application web dans Telegram.

Lors de l’ajout du bouton, spécifiez son libellé, sélectionnez le type de bouton Telegram Web App et fournissez le lien vers le site web qui s’ouvrira en tant qu’application web :

  • Vous pouvez spécifier un lien via une variable :

Utiliser une variable pour un lien est très pratique lorsque la page cible ou l’adresse du site web change fréquemment.

Comment ça fonctionne :

  1. Définissez une variable (par exemple, landing_page_url) dans les paramètres de votre projet.

  2. Référencez cette variable (par exemple, #{landing_page_url}) dans tous les boutons Web App de vos flux.

Avantage : au lieu de mettre à jour manuellement l’URL dans chaque bloc de bouton individuel, vous n’avez besoin de modifier la valeur de la variable qu’une seule fois dans les paramètres du projet, et tous les boutons seront automatiquement mis à jour.

Alternative : vous pouvez, bien sûr, toujours spécifier directement une URL statique dans les paramètres du bouton.

Comment créer des boutons pour les fonctions de l’API Telegram

Travailler directement avec l’API Telegram Bot peut être difficile, surtout pour les débutants, mais MaviBot offre une alternative beaucoup plus accessible.

Méthode : utiliser du code généré

Vous pouvez utiliser le code de bouton pré-généré depuis les paramètres avancés, ce qui élimine le besoin d’écrire les appels API manuellement.

Étapes :

  1. Accédez aux paramètres de votre bloc et ouvrez Boutons section.

  2. Utilisez l’interface pour ajouter et configurer tous les boutons dont vous avez besoin (texte, liens, fonctions).

  3. Le système générera automatiquement en arrière-plan le code Telegram API correct.

Cette approche vous permet de créer visuellement des claviers complexes tandis que la plateforme gère l’implémentation technique sous-jacente.

Cliquez « Paramètres avancés » pour afficher le code Telegram API généré pour vos boutons.

Testez vos boutons, puis copiez le code généré depuis Paramètres avancés dans une variable comme buttons.

Cette fonction envoie un message via l’API Telegram avec les paramètres suivants : tg_send_message (platform_id, text,client_message_id, reply_markup, sparse_mode, disable_web_page_preview, protect_content, disable_notification, message_thread_id, entities) :

Passez la variable des boutons à la fonction dans le paramètre reply_markup :

Vos boutons apparaîtront dans la conversation avec la mise en page et le style que vous avez définis.

Comment supprimer les boutons de réponse

Bien que les boutons du clavier disparaissent généralement automatiquement, ils peuvent parfois rester visibles.

Pour supprimer de force les boutons de réponse persistants, insérez le code suivant dans le Paramètres avancés :

Cette configuration de bouton vide indique à Telegram de masquer le clavier personnalisé.

Boutons de menu du clavier dans Telegram

circle-exclamation

Boutons du clavier

Pour pouvoir utiliser les boutons du clavier (réponse) comme menu Telegram permanent, il suffit d’assigner une valeur quelconque à la variable tg_permanent_reply_buttons (la variable est déclarée comme constante du projet).

Variable : tg_permanent_reply_buttons

Définir la tg_permanent_reply_buttons variable vous donne un contrôle manuel total sur la visibilité du clavier de réponse (boutons sous le message). Tout comportement de masquage automatique de la plateforme est désactivé.

Portée : ce paramètre s’applique à tous les boutons de réponse créés dans le bot tant que la variable est active.

Revenir au comportement automatique

Pour rétablir le masquage automatique standard du clavier :

  1. Supprimez la tg_permanent_reply_buttons variable des paramètres de votre projet.

  2. Recréez tous les boutons de réponse qui ont été créés à l’origine lorsque la variable était active. Les boutons créés sous la règle « permanente » conservent cet état et doivent être recréés pour hériter du nouveau comportement automatique.

Comment créer un menu dans Telegram

La personne qui a créé le bot Telegram peut créer un tel menu.

Pour cela, écrivez à Botfatherarrow-up-right dans Telegram.

Entrez la commande /mybots, et la liste de vos bots s’ouvre. Choisissez celui dont vous avez besoin. Un menu s’ouvre pour vous. Ici, vous devez sélectionner Modifier le bot, puis Modifier les commandes.

Saisissez toutes les commandes et leurs descriptions dans un seul message, en utilisant des lettres minuscules pour les noms de commandes. Vous recevrez une confirmation lorsque la liste sera mise à jour.

Vous pouvez maintenant voir et utiliser le menu dans votre conversation Telegram avec le bot.

Lorsque vous cliquez sur le bouton du menu, une liste des commandes qui ont été précédemment enregistrées dans BotFather s’ouvrira :

Ensuite, allez dans Mavibot, ouvrez le projet auquel ce bot Telegram est connecté.

Créez les Départ ou Déclencheur blocs, écrivez les commandes dans les conditions, et dans le « Texte du message » champ — les textes qui seront reçus en réponse.

Exemple :

Comment combiner deux types de boutons

Créez un bloc avec un bouton de réponse (clavier), que vous devez visualiser.

Créez le bloc suivant (un minuteur de 0 seconde) avec des boutons inline (boutons dans le texte), qui doivent être placés sans supprimer les boutons de réponse. Par exemple : [{"type": "inline", "text": "NOM DU BOUTON", "line": 0, "index_in_line": 0}]

Voici le résultat :

circle-check

Mis à jour