Übersicht

Das Bugalou Website-Chat-Widget ermöglicht es Ihren Website-Besuchern, direkt von Ihrer Website aus ein Gespräch zu starten. Nachrichten erscheinen in Ihrem Team-Posteingang wie WhatsApp und E-Mail, sodass Ihr Team alles von einem Ort aus bearbeitet.

Schritt 1: Website-Chat-Einstellungen öffnen

Klicken Sie in Ihrem Bugalou-Dashboard auf „Kanäle" in der linken Seitenleiste, um den Kanal-Katalog zu öffnen. Finden Sie die Karte „Website Chat" (mit dem Badge „Beliebt") und klicken Sie auf „Verbinden" (oder „Verwalten", falls bereits eingerichtet).

Schritt 2: Widget aktivieren

Auf der Website-Chat-Seite sehen Sie 6 Registerkarten. Beginnen Sie auf der Registerkarte „Installation":

1. Stellen Sie unter „Widget-Status" den Schalter auf „Aktiv" — damit wird das Widget auf Ihrer Website sichtbar
2. Kopieren Sie den auf der Seite angezeigten Installationscode

Schritt 3: Widget-Code installieren

Fügen Sie den Installationscode direkt vor dem schließenden </body>-Tag auf Ihrer Website ein. Der Code sieht folgendermaßen aus:

<!-- Bugalou Website Chat Widget -->
<script>
  (function() {
    var w = window;
    var d = document;
    w.BugalouWidget = w.BugalouWidget || {};
    w.BugalouWidget.key = 'IHR_WIDGET_KEY';
    var s = d.createElement('script');
    s.type = 'text/javascript';
    s.async = true;
    s.src = 'https://bugalou.com/widget/loader.js';
    var x = d.getElementsByTagName('script')[0];
    x.parentNode.insertBefore(s, x);
  })();
</script>

Plattformspezifische Anweisungen

• WordPress — fügen Sie den Code unter Darstellung → Theme-Editor → footer.php ein, oder verwenden Sie ein Plugin wie „Insert Headers and Footers"
• Shopify — gehen Sie zu Online-Shop → Themes → Code bearbeiten → theme.liquid, fügen Sie vor </body> ein
• Wix — gehen Sie zu Einstellungen → Benutzerdefinierter Code → Benutzerdefinierten Code hinzufügen → Body Ende
• Next.js / React — fügen Sie das Skript zu Ihrer Layout-Komponente hinzu oder verwenden Sie eine <Script>-Komponente

Schritt 4: Installation testen

Geben Sie auf der Registerkarte „Installation" Ihre Website-Domain in das Feld „Installation testen" ein und klicken Sie auf die Schaltfläche, um zu überprüfen, ob das Widget korrekt geladen wird.

Schritt 5: Auf bestimmte Domains beschränken (optional)

Unter „Erlaubte Domains" können Sie das Widget auf bestimmte Domains beschränken. Geben Sie eine Domain ein (z. B. beispiel.de oder *.beispiel.de) und klicken Sie auf die Schaltfläche „+". Leer lassen, um das Widget auf jeder Domain zuzulassen.

Erscheinungsbild anpassen

Klicken Sie auf die Registerkarte „Erscheinungsbild", um das Aussehen des Widgets anzupassen. Sie können Folgendes ändern:

• Farben — Primärfarbe (bestimmt den Farbverlauf-Hero, CTA-Schaltfläche und Chat-Schaltfläche), Schaltflächentextfarbe, Nachrichtentextfarbe, Willkommens-Header-Textfarbe, Chat-Hintergrund
• Schaltflächeneinstellungen — Position (links oder rechts), horizontaler und vertikaler Rand, Schaltflächenstil (Kreis, abgerundetes Quadrat, Quadrat, Pille oder schwebend) und Schaltflächensymbol (Chat-Punkte, Blase, Nachricht, Support, Blitz oder Welle)
• Willkommensnachricht & Texte — Titel, Nachricht, Startbildschirm-Titel, Chat-Schaltflächentext, E-Mail-Tab-Untertitel, Eingabeplatzhalter und Chat-Begrüßungsnachricht (wird angezeigt, wenn ein Besucher den Chat öffnet, bevor er eine Nachricht sendet)
• Sprache — wählen Sie zwischen Niederländisch und Englisch (steuert alle Widget-UI-Beschriftungen)
• Logo — wird im Startbildschirm-Hero, der Agentenkarte, dem Chat-Header und dem E-Mail-Tab-Hero angezeigt

Eine Live-Vorschau mit drei Registerkarten (Home, Chat, E-Mail) auf der rechten Seite der Seite zeigt genau, wie jeder Bildschirm aussehen wird, während Sie Änderungen vornehmen. Alle Änderungen werden automatisch gespeichert.

Pre-Chat-Formular (optional)

Klicken Sie auf die Registerkarte „Pre-Chat-Formular", um Besucherinformationen zu sammeln, bevor sie mit dem Chatten beginnen. Aktivieren Sie „Pre-Chat-Formular aktivieren" und konfigurieren Sie, welche Felder angezeigt werden sollen:

• Vorname — standardmäßig aktiviert, kann als Pflichtfeld festgelegt werden
• Nachname — standardmäßig aktiviert, kann als Pflichtfeld festgelegt werden
• E-Mail-Adresse — standardmäßig aktiviert, kann als Pflichtfeld festgelegt werden
• Telefonnummer — optional, standardmäßig deaktiviert
• Betreff — optional, standardmäßig deaktiviert
• Bestellnummer — optional, standardmäßig deaktiviert

Sie können auch eine Datenschutz-Checkbox aktivieren, damit Besucher Ihre Datenschutzrichtlinie akzeptieren müssen, bevor sie chatten.

Hinweis: Besucher sehen beim Öffnen des Widgets zuerst den Home-Bildschirm. Das Pre-Chat-Formular erscheint, wenn sie auf die CTA-Schaltfläche klicken oder zur Chat-Registerkarte wechseln.

Automatische Antwort

Klicken Sie auf die Registerkarte „Automatische Antwort", um verschiedene automatische Nachrichten für folgende Situationen festzulegen:

• Online — wenn Ihr Team verfügbar ist
• Offline — wenn niemand verfügbar ist
• Außerhalb der Öffnungszeiten — außerhalb Ihrer konfigurierten Öffnungszeiten

Sie können hier auch Ihre Öffnungszeiten für jeden Wochentag (Montag bis Sonntag) konfigurieren, einschließlich Start- und Endzeiten.

FAQ (Pro+-Tarif)

Auf der Registerkarte „FAQ" (erfordert Pro+-Tarif) können Sie häufig gestellte Fragen hinzufügen. FAQ-Einträge werden als Akkordeon auf dem Home-Bildschirm des Widgets angezeigt — Besucher können Fragen aufklappen, um die Antwort zu lesen, ohne einen Chat zu starten.

Verhalten

Klicken Sie auf die Registerkarte „Verhalten", um erweiterte Widget-Einstellungen zu steuern:

• Anzeigeauslöser — Widget nach einer bestimmten Anzahl von Sekunden oder nach dem Scrollen eines Prozentsatzes der Seite anzeigen
• Geräteeinstellungen — wählen Sie, ob auf Mobilgeräten und/oder Desktop angezeigt werden soll
• KI-Chatbot — KI-gestützte automatische Antworten aktivieren (erfordert Pro-Tarif und aktivierten KI-Agent)
• Seitenregeln — Widget nur auf bestimmten Seiten anzeigen oder auf bestimmten Seiten ausblenden (z. B. auf /checkout ausblenden)
• „Powered by Bugalou"-Branding — ein- oder ausschalten

Klicken Sie nach jeder Änderung auf einer Registerkarte auf „Änderungen speichern".

Team-Routing

Nach der Einrichtung Ihres Widgets können Sie diesem Kanal ein Standard-Team zuweisen. Alle neuen eingehenden Live-Chat-Gespräche werden automatisch an das ausgewählte Team weitergeleitet. Gehen Sie auf die Widget-Einstellungsseite und verwenden Sie das Dropdown „Standard-Team", um ein Team auszuwählen.

Für erweitertes Routing können Sie Routing-Regeln erstellen, die Gespräche basierend auf Schlüsselwörtern, Tageszeit oder anderen Bedingungen weiterleiten. Weitere Informationen finden Sie unter Teamverwaltung.