# Boutons Telegram pour les chatbots

{% hint style="info" %}
Nous vous recommandons de lire l’article [Bouton](/doc/fr/chatbot/builder/boutons.md#how-to-create-a-button).
{% endhint %}

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

{% hint style="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.
  {% endhint %}

## 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 »** :

<div data-with-frame="true"><figure><img src="/files/3faf7714c8bd716acf8289ad3199e9143f96ecc0" alt=""><figcaption></figcaption></figure></div>

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

<div data-with-frame="true"><figure><img src="/files/d4efaa4f2ea0707b861f9690600f3cfcdf06e8f3" alt=""><figcaption></figcaption></figure></div>

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

<div data-with-frame="true"><figure><img src="/files/9b75dbe6d1cb3ef563fef173bcb7eb3390cd2e3c" alt="" width="563"><figcaption></figcaption></figure></div>

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.

<div data-with-frame="true"><figure><img src="/files/869e522de99b266ec75e270c34e85e5e99bd40a1" alt="" width="563"><figcaption></figcaption></figure></div>

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) :

<div data-with-frame="true"><figure><img src="/files/6cafb537640df9ed218452d561d7a5913dd0d837" alt="" width="563"><figcaption></figcaption></figure></div>

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

<div data-with-frame="true"><figure><img src="/files/13704b80c35db431aecf2b0091f76e2fafc050de" alt="" width="563"><figcaption></figcaption></figure></div>

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

<div data-with-frame="true"><figure><img src="/files/794eb5db96029360551bc48aa1523d16cec713c6" alt="" width="563"><figcaption></figcaption></figure></div>

<div data-with-frame="true"><figure><img src="/files/8834fe245c477a6fe4e722152a5691a5fa4d89fb" alt="" width="563"><figcaption></figcaption></figure></div>

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.

{% hint style="info" %}
Attention ! Cela peut ne pas fonctionner correctement sur certains appareils iOS.
{% endhint %}

### 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 [@BotFather](https://t.me/botfather).
2. Sélectionnez votre bot dans la liste.
3. Choisissez **Paramètres du bot** > **domaine** et ajoutez le domaine de votre site web.

<div data-with-frame="true"><figure><img src="/files/8b3ae230f354faeb7aade46bf56a44737165b9d1" alt="" width="563"><figcaption></figcaption></figure></div>

Ensuite, allez dans la **domaine** bouton :

<div data-with-frame="true"><figure><img src="/files/40c6495aa827b5625b12aecbc7ec068674dea014" alt="" width="563"><figcaption></figcaption></figure></div>

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

<div data-with-frame="true"><figure><img src="/files/e9cb9483ce8f638f9f94d9982d81f907a0d9ebee" alt="" width="563"><figcaption></figcaption></figure></div>

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

<div data-with-frame="true"><figure><img src="/files/78a23e2b342b01688060bae37566567bbab78da1" alt="" width="563"><figcaption></figcaption></figure></div>

**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.

<div data-with-frame="true"><figure><img src="/files/492294da82eeba30a6c1e3afa9bbd6fc8d091a68" alt="" width="563"><figcaption></figcaption></figure></div>

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.

<div data-with-frame="true"><figure><img src="/files/0bb839d5737d95415ddedec57e64001a6b6b0798" alt="" width="563"><figcaption></figcaption></figure></div>

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 »**:

<div data-with-frame="true"><figure><img src="/files/f26e312279bbf69d784d5d40adb59f7dbe7f6340" alt="" width="563"><figcaption></figcaption></figure></div>

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 :

<div data-with-frame="true"><figure><img src="/files/7cc7d2ec54702f16efc604fd433913c98aecae83" alt="" width="563"><figcaption></figcaption></figure></div>

Visuellement, le bouton ressemble à un bouton inline classique :

<div data-with-frame="true"><figure><img src="/files/83c72c7c592d6e6cb177240e525e5f7d05bfb146" alt="" width="563"><figcaption></figcaption></figure></div>

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

<div data-with-frame="true"><figure><img src="/files/ad196cb235aba7bcebb9492f48a1aae39e712afd" alt="" width="563"><figcaption></figcaption></figure></div>

{% hint style="info" %}
Important !

Telegram ne prend pas en charge les boutons Callback du clavier.
{% endhint %}

{% hint style="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.
{% endhint %}

### Bouton d’application Web Telegram

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

<div data-with-frame="true"><figure><img src="/files/95fcf44d3b236d85ec351597189844da76b86d68" alt="" width="375"><figcaption></figcaption></figure></div>

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 :

<div data-with-frame="true"><figure><img src="/files/d0f9ec1c865a0a87e3aa9cf14c77254019895050" alt="" width="563"><figcaption></figcaption></figure></div>

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.

<div data-with-frame="true"><figure><img src="/files/35c478b99bb19ed77a7053eccc3727d9bb6c31df" alt="" width="563"><figcaption></figcaption></figure></div>

## 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.

<div data-with-frame="true"><figure><img src="/files/4b0f80cfa990382459e481aaab1e76fb1c8af02a" alt="" width="563"><figcaption></figcaption></figure></div>

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

<div data-with-frame="true"><figure><img src="/files/183c22ae0c2049c4763f3962c7b02925ea97e6b2" alt="" width="375"><figcaption></figcaption></figure></div>

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

<div data-with-frame="true"><figure><img src="/files/f56aaf42b8fc06689391cb4d676d7d1ab8933d3c" alt="" width="375"><figcaption></figcaption></figure></div>

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 :

<div data-with-frame="true"><figure><img src="/files/418a3b6b90f139a621892457e7eda2b3c1495013" alt="" width="563"><figcaption></figcaption></figure></div>

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

<div data-with-frame="true"><figure><img src="/files/0b098657e6c6715c780b21545680cc9eed9bc302" alt="" width="563"><figcaption></figcaption></figure></div>

## 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**  :

```
[{"buttons":[],"one_time":true,"index_in_line":0,"line":0}]
```

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

<div data-with-frame="true"><figure><img src="/files/889b65f486a86e48047e6322ffcfdb7398dd5917" alt="" width="563"><figcaption></figcaption></figure></div>

### Boutons de menu du clavier dans Telegram

{% hint style="warning" %}
Nous recommandons de n’utiliser cette fonctionnalité que pour les utilisateurs avancés !
{% endhint %}

### 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).

<div data-with-frame="true"><figure><img src="/files/a571136a0b836d88b72fdcdbf6e7c38950355269" alt="" width="370"><figcaption></figcaption></figure></div>

<div data-with-frame="true"><figure><img src="/files/ae806c9d50a2939a032aff4d6ae75ea963ff250b" alt="" width="563"><figcaption></figcaption></figure></div>

#### **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

<div data-with-frame="true"><figure><img src="/files/a2b552235c56f4d16db64fde29f83d403bae0862" alt="" width="563"><figcaption></figcaption></figure></div>

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

Pour cela, écrivez à [Botfather](https://t.me/BotFather) 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**.

<div data-with-frame="true"><figure><img src="/files/94521bcc4f8b83af4a55f77c038ace873f9f482d" alt="" width="563"><figcaption></figcaption></figure></div>

<div data-with-frame="true"><figure><img src="/files/1ecd4376e8ae8567deea6ad69272d63dba2c0262" alt="" width="563"><figcaption></figcaption></figure></div>

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.

<div data-with-frame="true"><figure><img src="/files/dee2f4a6e59d726ecfec079c71dcbd2a58433bf5" alt="" width="563"><figcaption></figcaption></figure></div>

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

<div data-with-frame="true"><figure><img src="/files/fc5d5ba16634d542c608c63a04fce278282dbafe" alt="" width="563"><figcaption></figcaption></figure></div>

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

<div data-with-frame="true"><figure><img src="/files/bfdf1854d46cf75d84749d7aa22b5cf37f282102" alt="" width="563"><figcaption></figcaption></figure></div>

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 :

<div data-with-frame="true"><figure><img src="/files/c5d808c6be8cb2c5348fbd5d2ebbaba0abbd0a62" alt="" width="563"><figcaption></figcaption></figure></div>

## Comment combiner deux types de boutons

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

<div data-with-frame="true"><figure><img src="/files/1efe965b7ccc5f185f80ca285059da5a6c40c4d9" alt="" width="563"><figcaption></figcaption></figure></div>

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}]

<div data-with-frame="true"><figure><img src="/files/29860fb10ed78d06df4aaaa13b54811eaba659dc" alt="" width="563"><figcaption></figcaption></figure></div>

Voici le résultat :

<div data-with-frame="true"><figure><img src="/files/527533adc8db19ddcf6e414b3e833316819dcfae" alt="" width="563"><figcaption></figcaption></figure></div>

{% hint style="success" %}
**Important :** vous devez respecter cet ordre lors de l’ajout de boutons dans le même bloc :

1. **D’abord,** ajoutez tous les boutons de réponse (clavier).
2. **Ensuite,** ajoutez tous les boutons Inline.

Si cette séquence est inversée, les boutons de réponse seront supprimés lorsque le bloc de message suivant sera envoyé.
{% endhint %}


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.mavibot.ai/doc/fr/chatbot/messageries/telegram/buttons.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.