# Widget erstellen und einrichten

## Ein Widget erstellen

1. Öffnen Sie das Projekt und wählen Sie „Widgets“ im Menü.
2. Klicken Sie auf „Erstellen“.

Das Widget wird sofort erstellt, ohne Formular, und öffnet sich im Baukasten. Es hat bereits die Überschrift „Hallo!“ und die Beschreibung „Kontaktieren Sie uns über einen der folgenden Kanäle:“. Links gibt es noch keine — fügen Sie mindestens einen hinzu, sonst lässt sich das Widget nicht speichern.

## Liste der Widgets

Im Bereich „Widgets“ des Projekts sind alle seine Widgets gesammelt. Als Name des Widgets in der Liste dient seine Überschrift.

- **Ansicht.** Der Umschalter rechts zeigt die Widgets als „Liste“ oder als „Kacheln“. Auf einer Kachel sehen Sie das verkleinerte Widget und die Symbole seiner Links; gibt es keine Links, steht dort „Keine Kanäle verbunden“.
- **Reihenfolge.** Widgets werden am Symbol links verschoben. Die Reihenfolge gilt für alle Mitglieder des Projekts.

Im Menü „⋯“ rechts:

- „Symbol“ — ein Bild des Widgets für das Konto hochladen.
- „Kopie erstellen“ — ein Widget mit denselben Texten, Links, Banner, Farben und Domains erstellen. Die Überschrift der Kopie erhält den Zusatz „(Kopie)“.
- „Verschieben nach ...“ — das Widget in ein anderes Ihrer Projekte verschieben. Der Punkt ist nur für den Eigentümer des Projekts sichtbar.
- „Löschen“ — das Widget löschen. Auf den Websites, auf denen sein Code steht, wird es nicht mehr angezeigt.

> [!NOTE]
> Beim Verschieben in ein anderes Projekt wird der Chat mit dem Bot im Widget ausgeschaltet: Der Bot bleibt im bisherigen Projekt.

## Baukasten

Im Baukasten sehen Sie das Widget so, wie es der Besucher sieht: Das Fenster ist geöffnet, darunter der runde Button. Daneben liegt ein Button mit Zahnrad: Er öffnet das Panel „Widget-Einstellungen“.

![Bereich „Widget-Einstellungen“ neben dem Widget](https://support.watbot.org/_media/de/04-widgets/_images/settings.webp?v=1791781230)

Änderungen im Panel sind sofort am Widget sichtbar, auf die Website gelangen sie aber erst nach einem Klick auf „Speichern“. „Abbrechen“ stellt den zuletzt gespeicherten Zustand wieder her. Wenn Sie die Seite mit ungespeicherten Änderungen verlassen, fragt das Konto: „Änderungen sind nicht gespeichert. Seite verlassen?“.

### Widget-Einstellungen

| Einstellung | Was sie festlegt |
|---|---|
| „Website-Domains“ | Auf welchen Websites das Widget angezeigt werden darf |
| „Banner“ | Bild über der Überschrift |
| „Link im Banner“ | Adresse, die sich beim Klick auf das Banner öffnet. Das Feld erscheint, sobald ein Banner hochgeladen ist |
| „Überschrift“ | Große Zeile oben im Fenster, bis zu 50 Zeichen. Pflichtfeld |
| „Beschreibung“ | Text unter der Überschrift, bis zu 255 Zeichen |
| „Links“ | Kontaktwege — die Zeilen im Widget-Fenster |
| „Chat mit dem Bot“ | Chat direkt im Widget-Fenster — siehe [Chat im Widget](https://support.watbot.org/de/widgets/chat) |
| „Schaltfläche“ | „Farbe der Schaltfläche“ und „Symbolfarbe“ — Hintergrund des runden Buttons und Farbe des Symbols darauf |

### Links

Klicken Sie auf „Link hinzufügen“ und wählen Sie die Art:

| Art | Was Sie eingeben |
|---|---|
| „Link“ | „Linkname“ — die Beschriftung im Widget — und die Adresse selbst. Jede Adresse ist möglich: eine Seite der Website, `tel:` mit einer Telefonnummer, `mailto:` mit einer E-Mail-Adresse |
| Telegram, MAX, VK, Viber | Nur die Adresse. Name und Symbol werden automatisch eingesetzt |

Für den Messenger, in dem Ihr Bot läuft, fügen Sie den allgemeinen oder einen zusätzlichen Link zum Bot aus dem Bereich „Links zum Chatbot“ ein — dann landen Übergänge aus dem Widget in der Statistik des Bots. Wo Sie ihn finden, steht im Bereich [Links zum Chatbot](https://support.watbot.org/de/chatbots/links). Sie können auch einen gewöhnlichen Link auf ein Profil oder eine Gruppe einfügen.

Das Zahnrad-Symbol bei einem Link öffnet das Fenster „Link-Einstellungen …“, das Kreuz löscht den Link. Die Reihenfolge ändern Sie durch Ziehen am Symbol links.

So verhalten sich die Links auf der Website:

- **Auf dem Smartphone** öffnet ein Tippen den Link sofort.
- **Auf dem Computer** öffnet ein Link auf einen Messenger oder ein soziales Netzwerk im Widget einen QR-Code mit dem Hinweis „Um an … zu schreiben, scannen Sie den QR-Code oder folgen Sie dem Link unten“ und einen Button zum Wechseln. Eine gewöhnliche „Link“ öffnet sich sofort in einem neuen Tab.
- Ist die Adresse eines Messenger-Links nicht ausgefüllt, sieht der Besucher: „Kein Link hinterlegt. Dieser Kommunikationskanal ist vorübergehend nicht verfügbar“.

### Banner

Klicken Sie auf „Foto auswählen“ und laden Sie ein Bild hoch — JPG, PNG oder GIF. Ein großes Bild wird an der längeren Seite auf 600 Pixel verkleinert. Das Papierkorb-Symbol auf dem Bild entfernt das Banner.

In „Link im Banner“ ist nur eine Webadresse möglich — sie beginnt mit `http://` oder `https://`.

Wenn der Besucher den Chat öffnet, wird das Banner ausgeblendet, damit der Unterhaltung genug Platz bleibt.

### Website-Domains

Solange das Feld leer ist, funktioniert das Widget auf jeder Website, in die sein Code eingefügt ist. Damit keine fremde Website Ihr Widget zeigen kann, führen Sie Ihre Domains auf:

- `example.com` — nur diese Domain (mit und ohne `www.`);
- `*.example.com` — die Domain selbst und alle ihre Subdomains.

Sie können auch die vollständige Adresse einer Seite einfügen — übrig bleibt nur die Domain. Kyrillische Domains sind ebenfalls möglich. In der Liste sind bis zu 20 Domains erlaubt.

### Widget-Symbol

Das Symbol wird nur im Konto gebraucht: Es erscheint in der Liste der Widgets und im Umschalter. Auf der Website wird der Widget-Button in den Farben aus den Einstellungen gezeichnet.

Öffnen Sie „Symbol“ im Menü „⋯“ des Widgets oder „Symbol ändern“ im Widget-Umschalter und laden Sie ein Bild hoch: JPG, PNG, GIF, WebP oder AVIF bis 5 MB, am besten quadratisch. Das Symbol wird sofort gespeichert.

## Wenn etwas nicht funktioniert

- **Das Widget wird nicht gespeichert, Fehler beim Feld „Links“.** Mindestens ein Link ist nötig.
  Ausnahme ist ein Widget mit eingeschaltetem Chat: Es braucht keine Links.
- **Fehler bei einem Link der Art „Link“.** Bei ihm ist die Adresse Pflicht.
- **„Dieser Link kann nicht geöffnet werden: javascript:, data: und ähnliche Adressen sind nicht erlaubt.“** Fügen Sie eine gewöhnliche Adresse ein.
- **„Das Banner konnte nicht gespeichert werden: Die Datei ist nicht verfügbar.“** Ein hochgeladenes, aber nicht gespeichertes Bild wird nur kurz aufbewahrt. Laden Sie das Banner erneut hoch und klicken Sie sofort auf „Speichern“.
- **„Das Banner muss ein JPEG-, PNG-, GIF- oder WebP-Bild sein.“** Die Datei hat ein anderes Format. Speichern Sie das Bild in einem dieser Formate neu.
- **Fehler beim Feld „Website-Domains“.** In einer Domain sind Buchstaben, Ziffern, Punkte und Bindestriche erlaubt; ein Sternchen nur am Anfang, in der Form `*.`.
- **„Ein Projekt kann höchstens 100 Widgets enthalten“** — Hinweis am deaktivierten Button „Erstellen“.
- **„An einem Tag können maximal 100 Widgets erstellt werden.“** Warten Sie bis zum nächsten Tag.
- **„Das Erstellen und Bearbeiten von Widgets ist wegen eines Verstoßes gegen die Plattformregeln eingeschränkt.“** Siehe [Prüfung der Widgets durch die Plattform](https://support.watbot.org/de/widgets).