Website

Setzen Sie Quickchat AI auf Ihrer Website als schwebendes Widget, als eingebetteten Embed oder als gehostete Chat-Seite ein. Behandelt Installation, Zugriffssteuerung, Erscheinungsbild, Textinhalte und Custom Parameters.

Es gibt drei Möglichkeiten, Ihren Quickchat-KI-Agenten ins Web zu bringen. Wählen Sie diejenige, die zu der Oberfläche passt, die Sie zeigen möchten:

Widget – die schwebende Chat-Bubble in der Ecke Ihrer Seite. Am besten geeignet für allgemeinen Support.
Embed – ein eingebettetes Chatfenster, das genau dort sitzt, wo Sie es auf einer Seite haben möchten. Am besten geeignet, um die KI in einen bestimmten App-Bildschirm, eine Help-Center-Seite oder eine Produktdetailseite einzubetten.
Chat-Seite – ein gehostetes, bildschirmfüllendes Chat-Erlebnis, das von Quickchat bereitgestellt wird (keine Installation, kein Code). Am besten geeignet, wenn Sie jemandem einen Link teilen möchten (z. B. Support-E-Mail, internes Slack, Beta-Tester), ohne dessen Browser anzufassen.

Installieren Sie Ihre gewählte Oberfläche über Kanäle → Ihre Website → Installieren. Die Seite hat drei Unterregister: Installieren (wählen Sie, wie Sie Ihren KI-Agenten hinzufügen), Erscheinungsbild (visuelles Styling) und Textinhalt (die Prompts und Beschriftungen, die Ihre Besucher sehen). Das Register Installieren beginnt mit einer Methodenauswahl, hält Verfügbarkeits- und Zugriffssteuerungen in einem eigenen Abschnitt und zeigt eine kopierbare Scenario ID, die Plugins und die API benötigen.

Das Widget ermöglicht die direkte Einbettung Ihres Quickchat-KI-Agenten in Ihre Website und bietet Nutzern eine nahtlose Möglichkeit, mit der KI zu interagieren. Das Widget wird typischerweise als Chat-Bubble in der unteren rechten Ecke Ihrer Webseite angezeigt. Beim Anklicken öffnet es sich zu einem Chatfenster, in dem Nutzer Fragen stellen, Hilfe erhalten oder auf Informationen zugreifen können.

Öffnen Sie Kanäle → Ihre Website → Installieren. Das Register beginnt mit „Wie möchtest du deinen AI Agent hinzufügen?” und listet die Installationsmethoden auf, die einfachste zuerst. Wählen Sie diejenige, die zu Ihrer Website passt:

WordPress – installieren Sie unser kostenloses Quickchat-KI-Agenten-Plugin, fügen Sie Ihre Scenario ID ein, und das Widget erscheint automatisch, ohne dass Sie Theme-Code bearbeiten müssen.
Shopify – fügen Sie das Widget über den Theme-Editor Ihres Shops hinzu. Siehe die Shopify-Anleitung.
Webflow, Wix und andere – kopieren Sie ein Snippet und fügen Sie es in den Bereich für benutzerdefinierten Code oder Embed Ihres Website-Builders ein, idealerweise vor dem schließenden </body>-Tag.
Stattdessen einen Link teilen – installieren Sie nichts; teilen Sie den Link zu Ihrer gehosteten Chat-Seite.
Manuell mit Code installieren – kopieren Sie das rohe Widget- oder Embed-Snippet und fügen Sie es selbst in Ihr HTML ein.

Jede Methode öffnet ein fokussiertes Schritt-für-Schritt-Panel mit nur dem Code oder der ID, die sie benötigt.

Ihre Scenario ID befindet sich oben im Register Installieren als kopierbares Feld. Sie ist die Kennung, die Plugins und die API benötigen, kopieren Sie sie also von hier, wann immer ein Einrichtungsschritt danach fragt.

Manuell mit Code installieren

Wenn Sie Ihr eigenes HTML verwalten, erweitern Sie Manuell mit Code installieren im Register Installieren und:

Kopieren Sie das Widget-Snippet.
Öffnen Sie die HTML-Datei Ihrer Seite oder den Code-Editor Ihres Website-Builders.
Fügen Sie das Snippet direkt vor dem schließenden </body>-Tag auf allen Seiten ein, auf denen das Widget erscheinen soll.

Brauchst du Hilfe?

Kein Entwickler? Das Register Installieren hat zwei Verknüpfungen unter Brauchst du Hilfe?:

AI um Hilfe bitten – öffnet den In-App-Assistenten, vorausgefüllt mit einer Frage zum Hinzufügen des Agenten zu Ihrer Website.
Anleitung an einen Entwickler senden – sendet einem Teammitglied alles, was es benötigt (das Widget-Snippet, Ihre Scenario ID und einen Link zu dieser Anleitung), damit es die Installation für Sie übernehmen kann.

Für weitere Hilfe kontaktieren Sie uns unter contact@quickchat.ai.

Chat-Seite

Die Chat-Seite ist eine gehostete, bildschirmfüllende Version Ihres KI-Agenten, die unter einer Quickchat-URL lebt. Es gibt nichts zu installieren. Teilen Sie den Link, und Ihre Besucher können direkt in ihrem Browser mit Ihrem Agenten chatten. Verwenden Sie sie, wenn:

Sie ein Chat-Erlebnis möchten, aber keine Website haben (oder deren Code nicht anfassen möchten).
Sie die KI intern mit einer kleinen Gruppe teilen (Beta-Tester, Support-Team, Vertriebsinteressenten) und einen zugriffsgesteuerten Link anstelle eines öffentlichen Widgets benötigen.
Sie die KI als Folgekanal per E-Mail, Slack oder in Ihrem CRM versenden möchten.

Konfigurieren Sie über Installieren → Zugriff auf Chat-Seite, wer die Chat-Seite öffnen kann (siehe Zugriffssteuerung unten).

Zugriffssteuerung

Das Register Installieren hält Zugriffssteuerungen in einem ausklappbaren Abschnitt Verfügbarkeit und Zugriff. Klappen Sie ihn auf, um zwei Steuerungen zu finden, die für Ihre Bereitstellung gelten:

Der Schalter oben im Abschnitt Verfügbarkeit und Zugriff. Wenn aktiviert, funktionieren die Widget- und Embed-Scripts normal in den Browsern der Besucher. Wenn deaktiviert, sind Widget und Embed auf Ihrer Seite nicht verfügbar, selbst wenn das Script noch eingefügt ist. Das ist nützlich, um die KI vorübergehend offline zu nehmen, ohne das Snippet zu entfernen, oder um den öffentlichen Zugriff einzuschränken, während Sie die Chat-Seite für eingeladene Nutzer geöffnet halten.

Zugriff auf Chat-Seite

Unabhängig vom Widget- und Embed-Schalter können Sie einschränken, wer die Chat-Seite öffnen kann:

Jeder – die Chat-Seiten-URL ist öffentlich. Jeder mit dem Link kann sie nutzen.
Nur eingeladene Benutzer – nur Chat-Benutzer, die Sie (per E-Mail) eingeladen haben, können die Chat-Seite nutzen. Sie müssen sich authentifizieren.
Niemand – die Chat-Seite ist vollständig deaktiviert.

Um den Zugriff unter Nur eingeladene Benutzer zu gewähren, klicken Sie neben dem Auswahlfeld auf Chat-Benutzer einladen. Das führt Sie zu Kontoeinstellungen → Chat-Benutzer, wo Sie Einladungen per E-Mail versenden und verwalten können, wer Zugriff hat.

Anpassen

Mit den Unterregistern Erscheinungsbild und Textinhalt können Sie anpassen, wie Widget, Embed und Chat-Seite aussehen und welche Texte Ihre Besucher sehen. Alle drei Bereitstellungsoberflächen teilen sich diese Einstellungen. Ändern Sie sie einmal, und sie gelten überall dort, wo Ihr Agent bereitgestellt ist.

Der rechte Bereich der Register Installieren/Erscheinungsbild/Textinhalt hat eigene Vorschau-Steuerungen. Wechseln Sie zwischen den Vorschauen für Widget, Embed und Chat-Seite sowie zwischen den Ansichten Desktop und Mobile, um Ihre Änderungen vor der Veröffentlichung zu sehen.

Erscheinungsbild

Visuelles Styling für die Chat-Oberflächen, gruppiert in Branding, Größe & Position, Theme und Weitere Einstellungen.

Branding

AI Agent Avatar – ein einzelnes Bild, das sowohl in der Chat-Kopfzeile als auch auf dem Launcher-Button verwendet wird (max. 5 MB). Das ist eine Einstellung, nicht zwei: Laden Sie ein Bild hoch, und es erscheint an beiden Stellen (es ersetzt das frühere getrennte “Kopfzeilen-Logo” und “Launcher-Icon”). Jeder Agent startet mit einem integrierten Standard-Avatar. Auf Standard zurücksetzen stellt diesen wieder her, und beim Löschen wird gar kein Avatar angezeigt.

Größe & Position

Launcher-Größe – Classic, Input Only oder Klein. Steuert, wie der Chat-Launcher aussieht, bevor er geöffnet wird.
Launcher-Text – wird nur angezeigt, wenn Klein ausgewählt ist: benutzerdefinierter Text auf dem kleinen Launcher-Button (bis zu 25 Zeichen), z. B. “Ask AI” oder “Chat”. Lassen Sie das Feld leer für einen Launcher, der nur ein Icon zeigt.
Widget-Position – unten rechts oder unten links.
Chatfenster-Abmessungen – Breite (300–700 px) und Höhe (400–1200 px) des Chatfensters.
Verschiebbarer Launcher – lassen Sie Besucher den Launcher an eine andere Stelle auf der Seite ziehen. Nützlich, wenn er wichtige Inhalte verdeckt.

Theme

Wählen Sie, wie die Chat-Oberflächen eingefärbt werden:

Hell und Dunkel sind feste Presets, die auf jedem Konto gleich aussehen.
Custom schaltet eine vollständige eigene Palette frei. Wenn Custom ausgewählt ist, erscheinen Farbsteuerungen für den Hintergrund, die Kopfzeile und den Kopfzeilentext, den Akzent (verwendet für Buttons wie den Start-Button vor dem Chat, Vorschlags-Chips und Bewertungsaktionen), die Nachrichten-Bubble und deren Text, den Text der KI-Nachrichten, die Linkfarbe, das Eingabefeld, Rahmen und mehr. Jede Farbe wird auf WCAG-AA-Kontrast gegen ihren Hintergrund geprüft und warnt Sie, wenn eine Kombination schwer lesbar ist.

Markenspezifische Kopfzeilen- und Akzentfarben gehören zum Custom-Theme. Hell und Dunkel bleiben neutrale Presets, sodass beim Wechsel zwischen ihnen nie eine benutzerdefinierte Farbe übernommen wird.

Wenn Custom ausgewählt ist, erhält die Chat-Seite zusätzlich eigene Sidebar-Farben: Sidebar-Hintergrund, Sidebar-Text, Sidebar-Hover und Text bei Sidebar-Hover. Diese gelten nur für die Vollseiten-Ansicht der Chat-Seite, nicht für das Bubble- oder Embed-Widget. Lassen Sie die Textfarben leer, und die Chat-Seite wählt automatisch eine gut lesbare Farbe für den gewählten Hintergrund.

Sie können außerdem den Eckenradius (Rundung von Bubbles, Eingabefeldern und Buttons) und die Textgröße festlegen. Beides gilt in jedem Theme-Modus.

Weitere Einstellungen

Widget automatisch öffnen – das Widget automatisch öffnen, wenn die Seite geladen wird.
Quickchat AI-Branding ausblenden – blendet die Fußzeile “Powered by Quickchat AI” für ein vollständig im White-Label gehaltenes Erlebnis aus (verfügbar in Tarifen, die White-Labeling enthalten).
Gesprächsbewertung – lassen Sie Besucher die Konversation am Ende bewerten. Die Ergebnisse erscheinen in Insights → Gesprächsbewertung.

Textinhalt

Das Unterregister Textinhalt steuert jeden Text, der für den Besucher sichtbar ist:

Kopfzeilentext – Text, der oben im Chatfenster angezeigt wird.
Willkommensnachricht – die erste Nachricht des KI-Agenten zu Beginn jeder Konversation (z. B. “Hallo, brauchen Sie Hilfe?”).
Als Pop-up anzeigen – Schalter, der die Willkommensnachricht als schwebende Sprechblase neben dem Launcher anzeigt, um die Aufmerksamkeit zu erregen, bevor der Besucher klickt.
Gesprächsstarter – bis zu 3 Beispielnachrichten, die dem Besucher angezeigt werden, bevor er zu tippen beginnt. Ein Klick darauf sendet sie als erste Nachricht. Nützlich, um Besucher auf die Stärken Ihrer KI zu lenken (“Wie installiere ich das Widget?”, “Welche Integrationen unterstützt ihr?”).
Eingabe-Platzhalter – Hinweistext im leeren Nachrichten-Eingabefeld.
Haftungsausschlusstext – Text, der hinter der Konversation angezeigt wird und Nutzer typischerweise darüber informiert, dass sie mit einer KI sprechen. Wir empfehlen, diesen klar und sichtbar zu halten.

Erweiterte Funktionen: Custom Parameters

Das Quickchat AI Widget und der Embed ermöglichen es Ihnen, bei der Initialisierung Custom Parameters zu übergeben. Sie können verwendet werden, um:

die Analytik zu verbessern (sie sind im CSV-Export auf der Quickchat-Plattform verfügbar)
die Konversation anzupassen (Quickchat AI ist sich aller bereitgestellten Parameter bewusst)

Hier sind Beispiele für nützliche Custom Parameters:

User name: Mike
Subscription Tier: VIP
Most recently purchased item: Silver package (upgraded)
Next account level: Platinum
Points required to reach the next account level: 758

Hier ist ein Beispielgespräch, das einen KI-Agenten zeigt, der sich der in Custom Parameters bereitgestellten Werte bewusst ist:

Beispielgespräch mit Custom Parameters

Um Custom Parameters wie die oben genannten hinzuzufügen, fügen Sie Folgendes in das Script ein, das Sie unter Ihre Website > Installieren gefunden haben.

Widget und Embed verwenden dieselbe Aufrufsignatur:

_quickchat("custom_params", {
  "User name": "Mike",
  "Subscription Tier": "VIP",
  "Most recently purchased item": "Silver package (upgraded)",
  "Next account level": "Platinum",
  "Points required to reach the next account level": "758",
});

Diese Attribute werden jeder neuen Konversation zugeordnet; wir empfehlen, sich dabei auf einige wenige Keys zu beschränken.

Beispielscript:

widget

<script>
  (function(e,a,d,i,c,t=a.createElement(d)){e[c]=e[c]||function(){(e[c].q=e[c].q||[]).push(arguments)},t.src=i,t.async=1,a.body.insertAdjacentElement("beforeend",t)})(window,document,"script","https://bubble.quickchat.ai/chat.js","_quickchat");
  _quickchat("custom_params", {"User name": "Mike", "Subscription Tier": "VIP", "Most recently purchased item": "Silver package (upgraded)", "Next account level": "Platinum", "Points required to reach the next account level": "758"});
  _quickchat("init", "abcdefghij");
</script>

Embed

<div id="quickchat-embedded" style="height:600px;overflow:hidden;"></div>
<script>
  (function(e,a,d,i,c,t=a.createElement(d)){e[c]=e[c]||function(){(e[c].q=e[c].q||[]).push(arguments)},t.src=i,t.async=1,a.body.insertAdjacentElement("beforeend",t)})(window,document,"script","https://bubble.quickchat.ai/chat.js","_quickchat");
  _quickchat("containerId", "quickchat-embedded");
  _quickchat("custom_params", {"User name": "Mike", "Subscription Tier": "VIP", "Most recently purchased item": "Silver package (upgraded)", "Next account level": "Platinum", "Points required to reach the next account level": "758"});
  _quickchat("init", "abcdefghij");
</script>

Embed

Mit dem Embed platzieren Sie den Quickchat-KI-Agenten direkt innerhalb einer Seite als eingebettetes Chatfenster anstelle einer schwebenden Bubble. Verwenden Sie ihn, wenn der Chat an einer bestimmten Stelle der Seite sitzen soll, etwa in einer Help-Center-Spalte, auf einer Kontaktseite, in einer In-App-Sidebar usw.

Embed hinzufügen

Den Embed-Code abrufen
- Melden Sie sich in der Quickchat AI App an.
- Gehen Sie zu Kanäle → Ihre Website in der linken Sidebar.
- Klicken Sie auf das Register Installieren und erweitern Sie dann Manuell mit Code installieren.
- Kopieren Sie das Embed snippet (es enthält sowohl den Container <div id="quickchat-embedded"> als auch das Loader-Script).
Öffnen Sie die HTML-Datei Ihrer Website oder den Code-Editor Ihres Website-Builders.
Den Code einfügen
- Fügen Sie das Embed snippet in den <body> Ihrer Seite ein.
- Platzieren Sie es genau an der Stelle, an der das Chatfenster erscheinen soll. Das <div> steuert die Größe. Passen Sie das Inline-style="height:600px" an den Bereich in Ihrem Layout an.

Zuletzt aktualisiert: 09.07.2026

Website

Widget

So fügen Sie das Widget zu Ihrer Website hinzu