# Editor

Der Editor öffnet sich über den Punkt „Editor“ im Menü der App. Er ist eine Karte, auf der die Blöcke und die Verbindungen zwischen ihnen liegen — das Schema der App. Am Schema sehen Sie, welcher Bildschirm sich zuerst öffnet und wohin die Person nach jedem Tippen gelangt.

![Schema der Mini-App: Start-Block und erster Bildschirm](https://support.watbot.org/_media/de/02-mini-apps/_images/builder.webp?v=1791781229)

## Schema: Blöcke, Ausgänge und Verbindungen

**Ein Block** ist ein Schritt der App. Es gibt drei Arten von Blöcken:

- Bildschirme und alles, was über einem Bildschirm angezeigt wird: Fenster, Menüs, Dialoge, Meldungen;
- Blöcke ohne Bildschirm — sie tun zwischen den Bildschirmen etwas: prüfen eine Bedingung, schreiben einen Eintrag in eine Liste, senden eine Nachricht vom Bot;
- Dienstblöcke — „Start“ und „Notiz“.

Die vollständige Übersicht steht auf der Seite [Blöcke und Aktionen](https://support.watbot.org/de/mini-apps/blocks).

**Ein Ausgang** ist eine Zeile im unteren Teil des Blocks. Bei einem Bildschirm werden seine Buttons, Listeneinträge und andere antippbare Elemente zu Ausgängen; bei einem Block ohne Bildschirm sind es die Ergebnisse seiner Arbeit, zum Beispiel „Ja“ und „Nein“ bei einer Bedingung. Ausgänge für „hat geklappt“ sind grün, für „hat nicht geklappt“ rot.

**Eine Verbindung** ist eine Linie von einem Ausgang zu dem Block, der sich als Nächstes öffnet oder ausgeführt wird.

- Um eine Verbindung zu ziehen, ziehen Sie vom Kreis am Ausgang zum gewünschten Block.
- Lassen Sie die Verbindung an einer freien Stelle der Karte los, öffnet sich die Liste der Blöcke: Der gewählte Block wird erstellt und sofort verbunden. Oben in der Liste steht „Zuletzt verwendet“, der Punkt „Mehr“ öffnet das Fenster „Block hinzufügen“.
- Um eine Verbindung zu löschen, bewegen Sie den Mauszeiger auf die Linie und klicken Sie auf das Symbol, das darauf erscheint.
- Ein Ausgang mit Verbindung hat den Pfeil „Zum Block springen, zu dem dieser Ausgang führt“.

![Verbindung auf einer leeren Stelle losgelassen: Blockliste](https://support.watbot.org/_media/de/02-mini-apps/_images/connect-menu.webp?v=1791781229)

Der Ausgang „Fortsetzen“ löst von selbst aus, sobald die App den Block erreicht hat. So können Sie in einem Schritt zum Beispiel einen Bildschirm öffnen und sofort ein Fenster darüber anzeigen.

**Der Startblock** trägt die Markierung „Start“ — mit ihm beginnt die App. In einer neuen App ist das der Block „Start“, der mit dem ersten Bildschirm verbunden ist. Einen anderen Block machen Sie zum Startblock über das Blockmenü → „Als Startblock festlegen“.

## Leiste über der Karte

![Leiste über der Karte mit dem Button „KI-Hilfe“](https://support.watbot.org/_media/de/02-mini-apps/_images/toolbar-ai.webp?v=1791781229)

| Button | Was er tut |
|---|---|
| Pfeile „Rückgängig“ und „Wiederholen“ | Machen Aktionen im Schema rückgängig und stellen sie wieder her: Hinzufügen, Löschen, Verschieben, Bearbeiten eines Blocks, Verbindung. Tastenkürzel — Strg+Z und Strg+Y, auf dem Mac — ⌘Z und ⇧⌘Z |
| „Kartenfarbe und Raster“ | Farbschema der Karte, Art des Rasters und Art der Steuerung — Maus oder Touchpad |
| „Leere Verbindungen ausblenden“ | Blendet Ausgänge aus, die nirgendwohin führen. Solange sie ausgeblendet sind, können Sie von ihnen keine neue Verbindung ziehen |
| „App-Code“ (Symbol „</>“) | Eigenes JavaScript für die ganze App — siehe [Code in der App](https://support.watbot.org/de/mini-apps/code) |
| „KI-Hilfe“ | Öffnet den KI-Chat zu dieser App und der geöffneten Version — siehe [App im KI-Chat bauen](https://support.watbot.org/de/mini-apps/ai-builder) |
| „Vorschau“ | Öffnet die App neben dem Schema |
| „Block hinzufügen“ | Öffnet das Fenster zur Auswahl eines Blocks |
| „Version N“ oder „Veröffentlichen“ | Versionen der App und Veröffentlichung — siehe [Versionen und Veröffentlichung](https://support.watbot.org/de/mini-apps/publish) |

Ein Rechtsklick auf eine freie Stelle der Karte öffnet ein Menü: „Block hinzufügen…“, „Notiz hinzufügen“, „Einfügen“.

## Block hinzufügen

Das Fenster „Block hinzufügen“ bietet eine Suche nach Name und Beschreibung und links Kategorien: „Alle“, „Bildschirme“, „Overlays“, „Daten und Logik“, „Chatbot“, „Listen“, „Dienstblöcke“.

Blöcke für die Terminbuchung von Kunden — in der Kategorie „Terminbuchung“.

Ein Klick auf eine Karte setzt den Block auf die Karte. Die Enter-Taste in der Suche fügt den ersten gefundenen Block hinzu.

## Aktionen mit einem Block

Ein kurzer Klick auf einen Block öffnet seine Einstellungen. Ziehen können Sie einen Block an jeder Stelle.

Im Kopf des Blocks gibt es zwei Symbole:

- „▶“ — „Vorschau ab diesem Block“: Die App startet nicht mit dem Startblock, sondern mit dem gewählten.
- „⋯“ — das Blockmenü.

| Menüpunkt | Was er tut |
|---|---|
| „Umbenennen“ | Ändert den Namen des Blocks im Schema. Derselbe Name erscheint in der Auswertung und im Debugging |
| „Als Startblock festlegen“ | Die App beginnt mit diesem Block. Der Punkt fehlt bei Blöcken, die keine Startblöcke sein können — bei Fenstern, Dialogen und Blöcken, die mit Daten arbeiten |
| „In Modalfenster umwandeln“ / „In Bildschirm umwandeln“ | Macht aus einem Bildschirm ein modales Fenster und umgekehrt — siehe unten |
| „Kopie erstellen“ | Setzt eine Kopie des Blocks daneben |
| „Kopieren“ | Legt den Block in die Zwischenablage, um ihn an anderer Stelle oder in einer anderen Version einzufügen |
| „Link kopieren“ | Der Link öffnet den Editor direkt bei diesem Block |
| „Löschen“ | Löscht den Block und seine Verbindungen |

![Blockmenü „⋯“](https://support.watbot.org/_media/de/02-mini-apps/_images/block-menu.webp?v=1791781229)

Um mehrere Blöcke auszuwählen, markieren Sie sie mit dem Häkchen an der Stelle des Blocksymbols, klicken Sie bei gedrückter Umschalttaste auf die Blöcke oder schalten Sie das Werkzeug „Rahmenauswahl“ ein. Über der Karte erscheint die Leiste „N Blöcke ausgewählt“: Die Auswahl können Sie kopieren und löschen. Die Tastenkürzel Strg+C und Strg+V (auf dem Mac — ⌘C und ⌘V) kopieren die Auswahl und fügen sie unter dem Mauszeiger ein.

## Notizen

Eine Notiz ist ein farbiger Zettel auf der Karte mit einer Erklärung für alle, die die App bauen. Zum Ablauf der App gehört sie nicht.

- Hinzufügen: Rechtsklick auf die Karte → „Notiz hinzufügen“ oder der Block „Notiz“ im Fenster „Block hinzufügen“.
- Ein Klick auf den Zettel öffnet die Bearbeitung des Textes. Strg+Enter (auf dem Mac — ⌘Enter) speichert, Esc bricht ab.
- Die Farbe wählen Sie im Menü des Zettels: „Gelb“, „Grün“, „Blau“, „Rosa“, „Lila“, „Grau“. Die Größe ändern Sie an der Ecke.

![Notiz auf der Karte und ihr Menü: Farben, Kopieren, Löschen](https://support.watbot.org/_media/de/02-mini-apps/_images/note.webp?v=1791781229)

## Bildschirm-Editor

Ein Klick auf den Block „Bildschirm“ öffnet das Fenster „Bildschirm bearbeiten“. Links sehen Sie ein Smartphone mit dem Bildschirm, rechts die Einstellungen. Der Umschalter „iOS“ / „Android“ in der Überschrift zeigt, wie der Bildschirm auf dem jeweiligen System aussieht. Änderungen übernehmen Sie mit dem Button „Speichern“.

### Art des Bildschirms

Bei einem leeren Bildschirm steht auf dem Smartphone die Frage „Welche Art von Bildschirm?“:

| Art | Was das ist |
|---|---|
| „Standardfenster“ | Kopfzeile und Bereiche mit Elementen |
| „Tabs unten“ | Abschnitte mit einer Leiste von Registerkarten unten. Jede Registerkarte hat ihren eigenen Inhalt |
| „HTML-Code“ | Der ganze Bildschirm ist Ihr HTML-Code. Beschrieben auf der Seite [Code in der App](https://support.watbot.org/de/mini-apps/code) |

![Leerer Bildschirm: Auswahl der Bildschirmart](https://support.watbot.org/_media/de/02-mini-apps/_images/screen-kind.webp?v=1791781229)

### Bereiche

Ein Standardfenster wird aus Bereichen zusammengesetzt — „Woraus soll der Bildschirm bestehen?“:

| Bereich | Was er enthält | Wichtigste Einstellungen |
|---|---|---|
| „Kopfzeile“ | Titel und Buttons oben | „Titel der Kopfzeile“, „Farbe der Kopfzeile“, „Farbe des Titels“, „Durchscheinend in iOS“, „Keinen Rand anzeigen“, Buttons |
| „Inhalt“ | Text, Buttons, Felder, Listen und andere [Elemente](https://support.watbot.org/de/mini-apps/elements) | „Hintergrundfarbe des Bereichs“, „Innenabstand“, „Elemente“ |
| „Raster“ | Elemente in Spalten und Zeilen | „Zeilen“, „Spaltenbreite“ — „Automatisch“ oder ein Anteil von 12, „Vertikale Ausrichtung“, „Breite begrenzen“ |

Eine Kopfzeile gibt es pro Bildschirm nur einmal. Inhaltsbereiche und Raster kann es mehrere geben; einen weiteren fügt der Button „+“ unter dem letzten Bereich auf dem Smartphone hinzu.

Ein Klick auf einen Bereich oder ein Element auf dem Smartphone öffnet rechts seine Einstellungen. Der Link „Zurück zum Bildschirm“ über den Einstellungen führt zurück.

![Bildschirmeditor: Kopfzeile auf dem Telefon gewählt, rechts ihre Einstellungen](https://support.watbot.org/_media/de/02-mini-apps/_images/header-settings.webp?v=1791781229)

**Buttons der Kopfzeile** sind in vier Gruppen aufgeteilt: „Schaltflächen am Anfang“, „Schaltflächen am Ende“, „Primäre Schaltflächen“, „Sekundäre Schaltflächen“ — bis zu vier in jeder. Für einen Button legen Sie „Name der Schaltfläche“, „Symbol“, „Farbe“, „Füllung“, „Form“ und „Größe“ fest. Jeder Button der Kopfzeile ist ein Ausgang des Blocks.

**Registerkarten.** Auf einem Bildschirm „Tabs unten“ gibt es bis zu neun Registerkarten. Für eine Registerkarte legen Sie „Name der Registerkarte“, das Symbol und „Zähler“ fest — ein Abzeichen mit einer Zahl oder einem Text. Gemeinsame Einstellungen: „Farbe der Registerkartenleiste“, „Farbe der Registerkarte“, „Farbe der ausgewählten Registerkarte“.

**Anzeigebedingung.** Die Kopfzeile, einen Inhaltsbereich, ein Raster und jeden Button der Kopfzeile können Sie nicht allen zeigen: Schalten Sie in ihren Einstellungen die „Anzeigebedingung“ ein. Wie Bedingungen festgelegt werden, steht auf der Seite [Daten der App](https://support.watbot.org/de/mini-apps/data).

Ein Raster hat bis zu 50 Zeilen und bis zu 12 Spalten pro Zeile. Ein Bereich hat bis zu 100 Elemente.

### Der Bildschirm im Schema

Den Bildschirm sehen Sie direkt im Block im Schema. Ein hoher Bildschirm wird auf die Höhe des Smartphones zugeschnitten — die Leiste „Vollständig anzeigen“ unten im Block klappt ihn auf, „Einklappen“ wieder zu.

![Hoher Bildschirm auf der Karte und die Leiste zum Aufklappen](https://support.watbot.org/_media/de/02-mini-apps/_images/screen-expand.webp?v=1791781229)

## Bildschirm und Fenster

Ein Bildschirm öffnet sich an der Stelle des vorherigen. Ein modales Fenster wird über dem aktuellen Bildschirm angezeigt und schließt sich, ohne die Person von diesem Bildschirm wegzuführen.

Der Block „Modales Fenster“ hat zwei Arten:

- „Fenster über dem Bildschirm“;
- „Blatt von unten“ — mit den Einstellungen „Höhe des Blattes“ (25, 50, 75 oder 100 %) und „Ziehgriff anzeigen“.

Die Einstellungen „Bei Tippen außerhalb schließen“ und „Bildschirm abdunkeln“ gibt es bei beiden Arten.

![Modales Fenster als Bottom Sheet und seine Einstellungen](https://support.watbot.org/_media/de/02-mini-apps/_images/modal-settings.webp?v=1791781229)

Einen fertigen Bildschirm können Sie in ein Fenster umwandeln und ein Fenster in einen Bildschirm: Blockmenü → „In Modalfenster umwandeln“ oder „In Bildschirm umwandeln“. Elemente und Verbindungen bleiben erhalten. Den Startbildschirm und einen Bildschirm aus HTML-Code können Sie nicht in ein Fenster umwandeln.

Die übrigen Blöcke, die über einem Bildschirm angezeigt werden — Menü, Dialog, Aktionsleiste, Meldung —, sind auf der Seite [Bildschirme und Overlays](https://support.watbot.org/de/mini-apps/blocks/screens) beschrieben.

## Farben und dunkles Thema

Die Farbe eines Elements wählen Sie aus der Palette der Version: „Primär“, „Sekundär“, „Tertiär“, „Erfolg“, „Warnung“, „Gefahr“, „Hell“, „Mittel“, „Dunkel“. Der Punkt „Standard“ lässt die vom System festgelegte Farbe stehen.

Jede Farbe der Palette hat zwei Werte — „Farbe für helles Thema“ und „Farbe für dunkles Thema“. Die App wählt den passenden selbst.

- Den Wert einer Farbe ändern Sie direkt in der Auswahlliste: Button „Bearbeiten“, dann der Stift bei der Farbe. Die Farbe ändert sich überall, wo sie verwendet wird.
- Der Button „Farbe hinzufügen“ legt eine eigene Farbe an: „Farbname“ und zwei Werte. Die Palette fasst bis zu 50 Farben.
- Eine eigene Farbe können Sie löschen. Vergewissern Sie sich vorher, dass sie nirgends verwendet wird.

![Palettenfarbe bearbeiten: Werte für helles und dunkles Design](https://support.watbot.org/_media/de/02-mini-apps/_images/color-edit.webp?v=1791781229)

Die Palette wird in der Version gespeichert: Eine neue Version erhält eine Kopie der Palette der Version, aus der sie erstellt wurde.

Ob das Thema hell oder dunkel ist, entscheidet der Ort, an dem die App geöffnet wird: In Telegram übernimmt die App das Thema des Messengers, im Browser das Thema des Systems, in der Vorschau das Thema des Kontos.

## Vorschau

Der Button „Vorschau“ öffnet rechts neben dem Schema die Leiste „Vorschau · Version N“ mit einem Smartphone. Darin läuft die echte App mit der Version, die im Editor geöffnet ist — auch einer unveröffentlichten.

| Element der Leiste | Was es tut |
|---|---|
| „iOS“ / „Android“ | Darstellung wie auf dem gewählten System |
| „Geöffnet aus“ | Als ob die App vom gewählten Ort aus geöffnet worden wäre: „Browser“, „Startbildschirm (PWA)“, „Telegram“, „MAX“, „Web-Chat“. So prüfen Sie die Zweige des Blocks „Startquelle“ |
| „Von vorn beginnen“ | Setzt die Variablen der Vorschau zurück und öffnet die App ab dem Startblock |
| „Aktuellem Block folgen“ | Das Schema scrollt selbst zu dem Block, der gerade in der App geöffnet ist, und hebt ihn hervor |
| „Debugging“ | Öffnet die Debugging-Leiste links neben dem Smartphone |

![Vorschau-Leiste mit der App](https://support.watbot.org/_media/de/02-mini-apps/_images/preview.webp?v=1791781229)

Unter dem Smartphone steht die Zeile „Jetzt: …“ mit dem Namen des geöffneten Blocks. Ein Klick darauf zeigt den Block im Schema.

> [!WARNING]
> Die Vorschau arbeitet mit echten Daten: Variablen und Listeneinträge werden gespeichert. Ein in der Vorschau hinzugefügter Eintrag erscheint in der Liste des Projekts.

Jede Person, die den Editor geöffnet hat, hat einen eigenen Vorschau-Nutzer: Zwei Teammitglieder kommen sich mit Variablen nicht in die Quere. Im Bereich „Nutzer“ und in der Auswertung wird die Vorschau nicht mitgezählt.

### Debugging

Die Debugging-Leiste hat zwei Tabs.

- **„Pfad“** — welche Blöcke das Szenario nach jedem Tippen durchlaufen hat: welcher Ausgang ausgelöst hat, welcher Bildschirm angezeigt wurde, wo das Szenario angehalten hat. Ein Klick auf einen Schritt zeigt den Block im Schema. Das Papierkorb-Symbol — „Pfad leeren“.
- **„Variablen“** — die Werte der Variablen nach dem letzten Schritt. Geänderte sind mit „geändert“ markiert, hinzugekommene mit „neu“. Es gibt eine Suche nach dem Namen.

![Debugging: der Szenarioweg neben der Vorschau](https://support.watbot.org/_media/de/02-mini-apps/_images/debug.webp?v=1791781229)

Fehler von Anfragen und Code, die in der Vorschau aufgetreten sind, landen im [Fehlerprotokoll](https://support.watbot.org/de/mini-apps/users) mit der Markierung „Vorschau“.

## Wenn etwas nicht funktioniert

- **„Diese Version wird gerade von einer anderen Anfrage bearbeitet.“** Die Version speichert gleichzeitig eine andere Person oder ein anderer Tab. Wiederholen Sie die Aktion.
- **„Das Limit für die Anzahl der Seiten/Blöcke ist erreicht…“** Die Version hat mehr als 10 000 Blöcke oder ist größer als 50 MB. Löschen Sie überflüssige Blöcke.
- **„Die App startet mit dem Startbildschirm, er kann kein Modalfenster werden.“** Legen Sie zuerst einen anderen Bildschirm als Startbildschirm fest.
- **„Dateien dieses Typs (…) können in der App nicht verwendet werden.“** In den Bildschirm ist eine Datei eines verbotenen Typs geraten, zum Beispiel SVG. Ersetzen Sie sie durch ein Bild im Format JPEG, PNG, GIF, WebP oder AVIF.
- **„Validierungsfehler. Details im Element-Bearbeitungsformular.“** Eines der Felder ist falsch ausgefüllt — es ist in den Einstellungen des Elements hervorgehoben.