Website

In diesem Leitfaden binden wir Ihren KI‑Assistenten über Widget oder iFrame in Ihre Website ein.

Widget

Das Widget ermöglicht die direkte Einbettung des Quickchat‑KI‑Agenten auf Ihrer Seite. Es erscheint meist als Chat‑Bubble unten rechts. Beim Klicken öffnet es ein Chatfenster für Fragen, Hilfe oder Infos.

Widget einbetten

1. Seite/Code öffnen

   Öffnen Sie die HTML‑Datei oder den Code‑Editor Ihres Website‑Builders.

2. Widget‑Code abrufen

   • Melden Sie sich in der Quickchat AI App an.
   • Gehen Sie zu Website unter Channels in der linken Sidebar.
   • Klicken Sie auf Install.
   • Kopieren Sie das Widget script.

3. Code einfügen

   Fügen Sie das Script direkt vor </body> auf allen gewünschten Seiten ein.

Wenn Sie WordPress nutzen

Über footer.php

1. WordPress‑Dashboard öffnen
2. Design > Theme‑Datei‑Editor, footer.php öffnen
3. Script kurz vor </body> einfügen
4. Speichern

Video‑Anleitung zur Einbindung über footer.php:

Über ein Plugin

1. Plugin wie Insert Headers and Footers installieren
2. Einstellungen öffnen (Settings > Insert Headers and Footers)
3. Script im Footer‑Bereich einfügen
4. Speichern

Video‑Anleitung zur Einbindung per Plugin:

Wenn Sie einen Website‑Builder nutzen

Für WordPress, Webflow, Wix etc. siehe deren Dokus zur Code‑Einbettung.

Support: contact@quickchat.ai.

Widget anpassen

Im Bereich Appearance passen Sie Look & Feel Ihres Widgets an.

Optionen:

• Primary Color: Hauptfarbe der Nutzernachrichten
• Header Background Color: Hintergrund der Kopfzeile
• Header Text Color: Textfarbe in der Kopfzeile
• AI Avatar Image: Avatar des Agenten in Kopfzeile und Nachrichten
• Widget Bubble: Chat‑Icon vor dem Öffnen
• Widget Bubble Size: klein, mittel, groß
• Widget Bubble Position: unten rechts oder unten links
• Widget Chat Window Dimensions: Breite (320–720 px), Höhe (520–1020 px)
• Animate AI Responses: Antworten wie bei ChatGPT live anzeigen
• Auto-Open Widget: Widget beim Laden automatisch öffnen
• Remove Quickchat AI Branding: White‑Label‑Erfahrung
• Animate Chat Header Collapsing: sanftes Einklappen nach der ersten Nachricht

Erweiterte Funktionen: Custom Parameters

Widget und iFrame unterstützen Custom Parameters bei der Initialisierung. Sie dienen:

• der Analytik (sichtbar im CSV‑Export auf der Plattform)
• der Gesprächsanpassung (der Agent kennt die Parameter)

Beispiele für Parameter:

• 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

Beispielgespräch mit Parameter‑Bewusstsein:

Einbindung in das Script unter Your Website > Install:

widget:

_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",
});

iFrame:

_quickchat_embedded("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",
});

Bis zu fünf Keys sind möglich; sie werden jeder neuen Konversation zugeordnet.

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://widget.quickchat.ai/chat.js","_quickchat");
  _quickchat("host", "app.quickchat.ai");
  _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>

iFrame

<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://widget.quickchat.ai/embed.js","_quickchat_embedded");
  _quickchat_embedded("host", "app.quickchat.ai");
  _quickchat_embedded("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_embedded("init", "0zmn6up7zo");
</script>

iFrame

Mit dem iFrame binden Sie den Quickchat‑Agenten als Chatfenster an einer gewünschten Stelle ein.

iFrame einbetten

1. iFrame‑Code abrufen

   • Melden Sie sich in der Quickchat AI App an.
   • Gehen Sie zu Website unter Channels.
   • Klicken Sie Install.
   • Kopieren Sie das iFrame script.

2. HTML‑Datei oder Code‑Editor öffnen

3. Code einfügen

   • Fügen Sie den iFrame innerhalb des <body> ein.
   • Platzieren Sie ihn genau dort, wo das Chatfenster erscheinen soll.