Auf dieser Seite
Sie brauchen zwei Dinge: Zugriff auf den Code Ihrer Website oder ein Plugin, das auf jeder Seite ein Script einfügen kann, und etwa zehn Minuten. Eine Kreditkarte ist nicht erforderlich.
1. Arbeitsbereich erstellen
Öffnen Sie Konto erstellen, geben Sie Namen, geschäftliche E-Mail-Adresse und Passwort ein und akzeptieren Sie die Bedingungen. Öffnen Sie anschließend den Bestätigungslink aus unserer E-Mail. Unbestätigte Arbeitsbereiche werden nach 48 Stunden gesperrt.
Neue Arbeitsbereiche beginnen mit einer siebentägigen Pro-Testphase und wechseln danach zum kostenlosen Starter-Tarif, sofern Sie keinen kostenpflichtigen Tarif wählen. Starter enthält bereits Live-Chat für einen Mitarbeiter.
Die Einführung führt durch die folgenden Schritte. Über Zum Dashboard springen können Sie jederzeit aussteigen und später fortfahren.
2. Snippet einfügen
Der Schritt Installation zeigt Ihr Snippet mit der bereits eingetragenen Arbeitsbereichs-ID. Fügen Sie es auf jeder Seite einmal direkt vor dem schließenden </body>-Tag ein:
<script src="https://widget.giovchat.app/YOUR_WORKSPACE_ID" async></script>- Frameworks: Laden Sie es einmal im Hauptlayout, etwa
App,app/layout.tsx,+layout.svelteoderApp.vue. Beispiele für React, Next.js, Svelte, Vue und WordPress stehen unter Chat-Widget installieren. - Coding-Agenten: Einstellungen → Chat-Widget → Installation → Agentengestützt liefert einen fertigen Prompt für Codex, Claude Code, Cursor und ähnliche Tools.
Das Script lädt asynchron und wird in einem eigenen Shadow DOM dargestellt. So verlangsamt es Ihre Seite nicht und kollidiert nicht mit Ihrem CSS.
Öffnen Sie eine Seite mit dem eingefügten Code. Der Installationsschritt wechselt von Warten auf Ihre Website… zu Verbunden und zeigt unter Gesehen auf den Host an.
3. Domain freigeben
Wählen Sie unter Zugelassene Websites im Installationsschritt oder später unter Einstellungen → Chat-Widget → Autorisierungen den Typ Website-URL. Geben Sie Ihre Website ein, etwa https://example.com, und wählen Sie Registrieren.
Die Registrierung von example.com umfasst auch www.example.com und shop.example.com.
Sobald Sie eine Website registrieren, sind alle anderen Hosts gesperrt, auch Testwebsites und localhost. Registrieren Sie jeden verwendeten Host.
4. An Ihr Design anpassen
Der Schritt Widget bietet eine Live-Vorschau. Diese Einstellungen lohnen sich am ersten Tag:
| Einstellung | Bedeutung |
|---|---|
| Hauptfarbe | Passen Sie das Widget Ihrer Marke an: zehn Vorgaben oder eine eigene Farbe. |
| Chatposition | Unten rechts oder links. Wählen Sie die Ecke, die Ihre eigenen Schaltflächen nicht verdeckt. |
| Begrüßungstext | Das Erste, was Besucher lesen. Sagen Sie in deren Sprache, wobei Sie helfen können. |
| Widget-Titel | Wird oben im Chatfenster angezeigt. |
Unter Einstellungen → Chat-Widget → Besucherangaben können Sie vor dem Chat auch nach E-Mail-Adresse, Telefon oder Namen fragen. Fragen Sie nur nach Angaben, die Ihr Team verwendet: Jedes Feld ist ein weiterer Schritt vor der ersten Nachricht.
Gespeicherte Änderungen erreichen Besucher nach etwa einer Minute, ohne das Snippet zu ändern. Alle Optionen stehen unter Widget anpassen.
5. Testnachricht senden
- Öffnen Sie Ihre Website in einem privaten Browserfenster, um als neuer Besucher zu starten.
- Öffnen Sie das Widget und senden Sie eine Nachricht.
- Öffnen Sie im Dashboard den Posteingang. Dort erscheint das Gespräch.
- Antworten Sie. Ihre Antwort erscheint sofort im Chat auf Ihrer Website.
Laden Sie weitere Mitarbeiter im Schritt Team oder später unter Einstellungen → Team → Mitglied hinzufügen als Agent oder Administrator ein.
Wenn das Widget nicht erscheint
| Prüfung | Maßnahme |
|---|---|
| Snippet | Es muss genau einmal auf der Seite stehen, mit Ihrer Arbeitsbereichs-ID. |
| Autorisierungen | Wenn Websites registriert sind, muss dieser Host oder seine übergeordnete Domain auf der Liste stehen. |
| Content Security Policy | Erlauben Sie die Giov-Ursprünge. Siehe Content Security Policy. |
| Iframes | Der Loader läuft nur auf der obersten Seite, nicht in einem Iframe. |
Einstellungen → Chat-Widget → Installation → Verbindung testen prüft, ob die Widget-Konfiguration Ihres Arbeitsbereichs erreichbar ist.
Nächste Schritte
- Lassen Sie GiovBot häufige Fragen beantworten und Ihr Team hinzuholen, wenn ein Besucher darum bittet.
- Erkennen Sie angemeldete Kunden, damit Gespräche dem richtigen Kontakt zugeordnet werden.
- Führen Sie E-Mail, WhatsApp und weitere Kanäle im selben Posteingang zusammen. Siehe Kanäle.
