Wir empfehlen, den Artikel Button zu lesen.

Sie können in Telegram sowohl Antwort-Buttons (normale oder Tastatur-Buttons) als auch Inline-Buttons (Buttons im Text) verwenden.

Wichtig: Button-Einschränkungen

Beachten Sie die folgenden Plattformbeschränkungen beim Erstellen von Buttons:

  • Antwort-Buttons (Tastatur): maximal 12 Buttons pro Zeile.
  • Inline-Buttons: maximal 8 Buttons pro Zeile.
  • Button-Text: auf 32 Zeichen begrenzt.
  • Button-Farbe: kann nicht angepasst werden. Buttons verwenden den Standardstil der Plattform.

So erstellen Sie einen Button in einem Block

Um einen Button in einem Chatbot zu erstellen, gehen Sie zu den Blockeinstellungen und klicken Sie auf den Reiter „Buttons“:

Daraufhin öffnen sich die Einstellungen zum Hinzufügen und Bearbeiten des Buttons. Klicken Sie dann auf Hinzufügen:

Ein Einstellungsfenster wird geöffnet, in dem Sie die Bezeichnung, Aktion und zusätzliche Optionen des Buttons festlegen können.

Die folgenden Button-Typen sind nur für den Telegram-Bot verfügbar:

  • Teilen-Button – ermöglicht Benutzern das Teilen von Inhalten.
  • Callback-Button – sendet eine stille Callback-Abfrage an Ihren Bot.
  • Telegram WebApp – öffnet eine Mini-Anwendung (z. B. ein Widget oder eine Website) innerhalb von Telegram.
  • Telegram-Login – autorisiert Benutzer über ihr Telegram-Konto.

Es gibt auch andere Buttons in Telegram, wie Zahlung, Telefonnummer oder Standort anfordern und Link senden.

Teilen-Button

Wählen Sie beim Erstellen des Buttons „Teilen (nur Telegram)“ und füllen Sie die Felder aus (optionales zusätzliches Textfeld):

Dieser Button ermöglicht es, die Informationen durch Auswahl eines Kontakts aus Ihrer Liste weiterzuleiten.

Geben Sie die URL, die Sie teilen möchten, im Feld „Teilen-Link“ des Buttons ein.

Sobald ein Kontakt ausgewählt ist, werden die Inhalte aus den Feldern „Teilen-Link“ und „Zusätzlicher Text“ gesendet. Verwenden Sie dies, um Links zu Telegram-Kanalbeiträgen und anderen Inhalten zu teilen.

Achtung! Es funktioniert möglicherweise nicht korrekt auf einigen iOS-Geräten.

Website-Login-Button

Damit der Login-Button funktioniert, muss Ihr Bot zunächst für die Zieldomain autorisiert werden. Diese Konfiguration erfolgt über @BotFather.

Schritte zur Konfiguration:

  1. Öffnen Sie einen Chat mit @BotFather.
  2. Wählen Sie Ihren Bot aus der Liste aus.
  3. Wählen Sie Bot-Einstellungen > Domain und fügen Sie die Domain Ihrer Website hinzu.

Gehen Sie als nächstes zum Domain-Button:

Hinweis: Der Button zeigt Domain bearbeiten an, wenn eine Domain vorhanden ist, oder Domain festlegen, wenn eine hinzugefügt werden muss.

Sie werden aufgefordert, die Domain für Ihren Bot einzurichten:

Korrektes Domain-Format:

Geben Sie Ihre Domain als mavibot.ai oder als ihredomain.com ein, wenn Sie eine mit MaviBot verbundene Website haben.

Nächster Schritt:

Sobald Ihre Domain verifiziert und konfiguriert ist, können Sie mit der Erstellung des Autorisierungs-Buttons fortfahren.

Geben Sie im Feld Text die Bezeichnung ein, die auf dem Button erscheinen soll.

Geben Sie dann die URL der Seite im Feld Link an, auf der die Autorisierung stattfinden soll.

Die restlichen Felder werden benötigt, wenn ein separater Bot für die Autorisierung verwendet wird (Sie benötigen die Berechtigung zum Senden von Nachrichten für diesen Bot): insbesondere müssen Sie den Namen des Bots angeben.

Wenn Sie in der Lage sein müssen, Nachrichten vom angegebenen Bot zu senden, aktivieren Sie unbedingt das Kontrollkästchen „Berechtigung vom Benutzer zum Senden von Nachrichten vom Bot anfordern“:

Telegram-Login-Button

Callback-Button

Ein Callback-Button ist ein Feedback-Button, bei dem der Kunde etwas sieht und wir im Bot den benötigten Callback erhalten, um einen beliebigen Block des Trichters zu starten.

Die Erstellung ist recht einfach: Klicken Sie im Feld Buttons auf die Schaltfläche Hinzufügen. Geben Sie im sich öffnenden Formular den Text ein, wählen Sie den Typ - Callback-Button (Telegram) und geben Sie den Callback-Text ein, der beim Klicken auf den Button zurückgegeben werden soll:

Optisch sieht der Button wie ein normaler Inline-Button aus:

Nach dem Klicken auf den Button sehen Sie den konfigurierten Callback in der Kundenkarte:

Es ist wichtig!

Telegram unterstützt keine Callback-Tastatur-Buttons.

Bitte beachten Sie!

Wenn der Button-Typ „Callback“ ausgewählt ist, wird der Button nur als Callback angezeigt, wenn sich der Text des Buttons vom Text des Callbacks unterscheidet.

Telegram-Webanwendungs-Button

Dieser Button ermöglicht es, die Website als Webanwendung in Telegram zu öffnen.

Geben Sie beim Hinzufügen des Buttons seine Bezeichnung an, wählen Sie den Typ des Telegram-Web-App-Buttons und geben Sie den Link zur Website an, die als Webanwendung geöffnet werden soll:

  • Sie können einen Link über eine Variable angeben:

Die Verwendung einer Variable für einen Link ist sehr praktisch, wenn sich die Zielseite oder Website-Adresse häufig ändert.

So funktioniert es:

  1. Definieren Sie eine Variable (z. B. landing_page_url) in Ihren Projekteinstellungen.
  2. Referenzieren Sie diese Variable (z. B. #{landing_page_url}) in allen Web-App-Buttons in Ihren Flows.

Vorteil: Anstatt die URL in jedem einzelnen Button-Block manuell zu aktualisieren, müssen Sie nur den Wert der Variable einmal in den Projekteinstellungen ändern, und alle Buttons werden automatisch aktualisiert.

Alternative: Sie können natürlich auch eine direkte, statische URL direkt in den Button-Einstellungen angeben.

So erstellen Sie Buttons für Telegram-API-Funktionen

Während die direkte Arbeit mit der Telegram Bot API, insbesondere für Anfänger, eine Herausforderung sein kann, bietet MaviBot eine viel zugänglichere Alternative.

Methode: generierten Code verwenden

Sie können den vorgenerierten Button-Code aus den erweiterten Einstellungen verwenden, sodass Sie keine API-Aufrufe manuell schreiben müssen.

Schritte:

  1. Navigieren Sie zu Ihren Blockeinstellungen und öffnen Sie den Abschnitt Buttons.
  2. Verwenden Sie die Oberfläche, um alle erforderlichen Buttons (Text, Links, Funktionen) hinzuzufügen und zu konfigurieren.
  3. Das System generiert automatisch den korrekten Telegram-API-Code im Hintergrund.

Dieser Ansatz ermöglicht es Ihnen, komplexe Tastaturen visuell zu erstellen, während die Plattform die zugrunde liegende technische Implementierung übernimmt.

Klicken Sie auf „Erweiterte Einstellungen“, um den generierten Telegram-API-Code für Ihre Buttons anzuzeigen.

Testen Sie Ihre Buttons und kopieren Sie dann den generierten Code aus Erweiterte Einstellungen in eine Variable wie buttons.

Diese Funktion sendet eine Nachricht über die Telegram-API mit den folgenden Parametern: 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):

Übergeben Sie die Variable buttons an die Funktion im Parameter reply\_markup:

Ihre Buttons erscheinen im Chat mit dem von Ihnen festgelegten Layout und Stil.

So löschen Sie Antwort-Buttons

Während Tastatur-Buttons normalerweise automatisch verschwinden, können sie manchmal sichtbar bleiben.

Um verbleibende Antwort-Buttons zwangsweise zu löschen, fügen Sie den folgenden Code in das Feld Erweiterte Einstellungen ein:

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

Diese leere Button-Konfiguration weist Telegram an, die benutzerdefinierte Tastatur auszublenden.

Tastaturmenü-Buttons in Telegram

Wir empfehlen die Verwendung dieser Funktion nur für fortgeschrittene Benutzer!

Tastatur-Buttons

Um die Tastatur-Buttons (Antwort) als dauerhaftes Telegram-Menü verwenden zu können, reicht es aus, der Variable tg_permanent_reply_buttons einen beliebigen Wert zuzuweisen (die Variable wird als Konstante des Projekts deklariert).

Variable: tg_permanent_reply_buttons

Das Setzen der Variable tg_permanent_reply_buttons gibt Ihnen vollständige manuelle Kontrolle über die Sichtbarkeit der Antworttastatur (Buttons unter der Nachricht). Das gesamte automatische Ausblendverhalten der Plattform wird deaktiviert.

Geltungsbereich: Diese Einstellung gilt für alle Antwort-Buttons, die im Bot erstellt wurden, während die Variable aktiv ist.

Rückkehr zum automatischen Verhalten

Um das standardmäßige automatische Ausblenden der Tastatur wiederherzustellen:

  1. Entfernen Sie die Variable tg_permanent_reply_buttons aus Ihren Projekteinstellungen.
  2. Erstellen Sie alle Antwort-Buttons neu, die ursprünglich erstellt wurden, während die Variable aktiv war. Buttons, die unter der „permanenten“ Regel erstellt wurden, behalten diesen Zustand bei und müssen neu erstellt werden, um das neue, automatische Verhalten zu übernehmen.

So erstellen Sie ein Menü in Telegram

Derjenige, der den Telegram-Bot erstellt hat, kann ein solches Menü erstellen.

Schreiben Sie dazu Botfather in Telegram.

Geben Sie den Befehl /mybots ein, und die Liste Ihrer Bots öffnet sich. Wählen Sie den gewünschten aus. Ein Menü öffnet sich für Sie. Hier müssen Sie Bot bearbeiten und dann Befehle bearbeiten auswählen.

Geben Sie alle Befehle und ihre Beschreibungen in einer einzigen Nachricht ein, wobei Sie für Befehlsnamen Kleinbuchstaben verwenden. Sie erhalten eine Bestätigung, wenn die Liste aktualisiert wurde.

Sie können das Menü jetzt in Ihrem Telegram-Chat mit dem Bot sehen und verwenden.

Wenn Sie auf die Menüschaltfläche klicken, öffnet sich eine Liste der Befehle, die zuvor in BotFather registriert wurden:

Gehen Sie als nächstes zu Mavibot und öffnen Sie das Projekt, mit dem dieser Telegram-Bot verbunden ist.

Erstellen Sie die Blöcke Start oder Trigger, schreiben Sie Befehle in die Bedingungen und in das Feld „Nachrichtentext“ die Texte, die als Antwort empfangen werden sollen.

Beispiel:

So kombinieren Sie zwei Button-Typen

Erstellen Sie einen Block mit einem Antwort-Button (Tastatur), den Sie visualisieren möchten.

Erstellen Sie den nächsten Block (einen Timer von 0 Sekunden) mit Inline-Buttons (Buttons im Text), die platziert werden müssen, ohne die Antwort-Buttons zu entfernen. Zum Beispiel: [{"type": "inline", "text": "BUTTON NAME", "line": 0, "index_in_line": 0}]

Hier ist das Ergebnis:

Wichtig: Sie müssen diese Reihenfolge beim Hinzufügen von Buttons im selben Block einhalten:

  1. Zuerst fügen Sie alle Antwort-Buttons (Tastatur) hinzu.
  2. Dann fügen Sie alle Inline-Buttons hinzu.

Wenn diese Reihenfolge umgekehrt wird, werden die Antwort-Buttons entfernt, wenn der nächste Nachrichtenblock gesendet wird.