Bubble-Widget

Integrieren Sie den Agenten als Bubble-Widget auf Ihrer Unternehmenswebsite. Nutzer:innen können das Bubble-Widget anklicken, um ein Chatfenster zu öffnen und Services wie Online-Kundensupport, Pre-Sales-Beratung und Leadgenerierung zu nutzen.

Integration in eine Website

1. Rufen Sie Agent-Integration – Widget Bubble auf und kopieren Sie den „Integrationscode“.
   
2. Fügen Sie den Code in den Head-Bereich Ihrer HTML-Seite ein.
3. Veröffentlichen Sie Ihre Website, um die Einbettung des KI-Agenten abzuschließen und die Konversation zu starten.
4. Wenn Sie das UI und das Logo anpassen, die Nachrichtenfrequenz der Nutzer:innen steuern oder proaktive Nachrichten zur Steigerung der Interaktionsrate anzeigen möchten, können Sie erweiterte Einstellungen vornehmen.

UI individuell anpassen

Diese Funktion unterstützt die individuelle Anpassung von Größe, Position, Farbe, Icon, Logo und Name der Widget-Bubble.

• Widget-Spitzname: Ermöglicht die Anpassung des Namens.
• Widget-Beschreibung: Ermöglicht die Anpassung der Beschreibung.
• Theme-Einstellungen: Ermöglicht die Anpassung von Widget-Farbe, Bubble-Icon und Agenten-Design.
• Bubble-Anpassung: Unterstützt die individuelle Anpassung von Position und Größe der Bubble entsprechend den geschäftlichen Anforderungen.
• Chatfenster-Anpassung: Unterstützt die individuelle Anpassung von Breite und Höhe des Chatfensters je nach Bedarf. Um die Kompatibilität mit kleinen Bildschirmen zu gewährleisten, sollten die Werte nicht zu groß gewählt werden.
• Agent-Logo:
  • Plattform-Logo: Zeigt das GPTBots-Logo an.
  • Organisations-Logo: Zeigt das von der Organisation hier hochgeladene individuelle Logo an. Alle Agenten der Organisation nutzen dasselbe Logo.
  • Individuelles Logo: Zeigt das hochgeladene individuelle Logo an. Jeder Agent kann ein anderes Logo verwenden. Diese Funktion ist ein erweitertes Privileg und muss über den Vertrieb freigeschaltet werden.
  • Kein Logo: Im Chatfenster wird kein Logo angezeigt.

Proaktive Nachrichten

Proaktive Nachrichten können als Karten oder Hinweisnachrichten angezeigt werden, um die Aufmerksamkeit der Nutzer:innen zu gewinnen und sie bereits vor dem Klick auf das Widget-Bubble zu einer Konversation oder Lead-Erfassung zu animieren. Es stehen zwei Stile zur Verfügung: „Hinweisnachrichten“ und „Kartennachrichten“.

So erstellen Sie Hinweisnachrichten

• Nachrichteninhalt: Sie können bis zu drei Inhalte festlegen, die nach Aktivierung dynamisch von unten nach oben auf der Seite angezeigt werden.
• Anzeigeregeln: Sie können bis zu drei Auslösebedingungen für Hinweise festlegen, sodass proaktive Nachrichten angezeigt werden, wenn bestimmte Nutzerbedingungen erfüllt sind.
  • Auslösebedingungen: Bewertung nach Browser, Browser-Sprache, Zeitzone, Land, Region, Betriebssystem, UTM etc. möglich.
  • Ausdrücke: Es stehen Berechnungsausdrücke wie =, ≠, Bereich, enthält, enthält nicht, hat Wert, kein Wert für verschiedene Werttypen (Zahl/String) zur Verfügung.
  • UND & ODER: Sie können festlegen, ob alle Bedingungen oder nur eine Bedingung erfüllt sein muss, um die proaktive Nachricht auszulösen.
  • Ereignisse: Proaktive Nachrichten können sofort oder nach einer Verzögerung von N Sekunden angezeigt werden.
• Steuerung der Nachrichtenhäufigkeit: Um Nutzer:innen nicht mit häufigen proaktiven Nachrichten zu stören, kann die maximale Anzahl der Anzeigen pro Website/Seite pro Tag, Woche oder Monat festgelegt werden.

So erstellen Sie Kartennachrichten

Nach der Konfiguration des Karteninhalts sind die weiteren Optionen identisch wie oben.

• Bild-Upload: Unterstützt das Hochladen individueller Bilder. Es wird empfohlen, die Bildgröße zu begrenzen, um lange Ladezeiten zu vermeiden.
• Titel/Inhalt: Nutzer:innen können eigenen Text für Titel und Inhalt eingeben.

So aktivieren Sie proaktive Nachrichten

1. Wählen Sie in der Liste der proaktiven Nachrichten die gewünschte Nachricht aus und klicken Sie auf „Aktivieren“.
2. Rufen Sie die Website auf, um die proaktive Nachricht anzuzeigen.
3. Klicken Sie auf die proaktive Nachricht, um das Chatfenster zu öffnen.

Sicherheit und Frequenzkontrolle

• Domain-Whitelist: Legt fest, auf welchen Domains der Widget-Bubble-Integrationscode eingebettet werden darf. Ist die Funktion deaktiviert, bestehen keine Einschränkungen.
  

• Kreditverbrauchslimit: Legt das Kreditverbrauchslimit für die Widget-Bubble fest. Ist die Funktion deaktiviert, bestehen keine Einschränkungen.
  

  • Es können bis zu drei Regeln festgelegt werden.
  • Unterstützt die Festlegung eines Kreditverbrauchslimits für die Widget-Bubble pro Tag, Woche oder Monat.

• Nutzer:innen-Verbrauchslimit: Legen Sie das Kreditverbrauchslimit pro Nutzer:in fest. Ist die Funktion deaktiviert, bestehen keine Einschränkungen.
  

  • Es können bis zu drei Regeln festgelegt werden.
  • Unterstützt die Festlegung eines Kreditverbrauchslimits pro Nutzer:in pro Tag, Woche oder Monat.

• Nutzer:innen-Frequenzlimit: Legen Sie das Nachrichtenfrequenzlimit pro Nutzer:in fest. Ist die Funktion deaktiviert, bestehen keine Einschränkungen.
  

  • Es können bis zu drei Regeln festgelegt werden.
  • Unterstützt die Festlegung der maximalen Anzahl an Nachrichten, die pro Zeitintervall von einer Person gesendet werden dürfen.
  • Bei Überschreitung des Limits reagiert der Agent nicht mehr und sendet automatisch eine vordefinierte Nachricht.

Event Callback

So übermitteln Sie Nutzer:innen-Events des Widget-Bubbles an GA4 oder andere Systeme von Drittanbietern

1. Erstellen Sie ein GA4-Callback-Event, holen Sie sich das Measurement Protocol API Secret und die Measurement ID aus dem GA4-Zielprojekt und tragen Sie diese in die entsprechenden Felder ein.

2. Erstellen Sie ein Webhook-Callback-Event, wählen Sie das gewünschte Callback-Event gemäß der Seitenanweisung aus und tragen Sie die URL sowie die Authentifizierungsdaten ein.
   

3. Aktivieren Sie das Callback in der Event-Callback-Liste und prüfen Sie, ob die Daten in GA4 oder an der Webhook-Adresse korrekt eingehen. Nach erfolgreicher Speicherung können Sie die Nutzungsdaten auswerten.

Erweiterte Funktionen

User-ID festlegen

Entwickler:innen können für Nutzer:innen eine User-ID festlegen.

                      
                      window.ChatBot.setUserId("deine_user_id")

                    

Nutzer:innen-E-Mail festlegen

Entwickler:innen können die E-Mail-Adresse der Nutzer:innen festlegen. Wird ein manueller Service angefordert, entfällt so das Ausfüllen der E-Mail. Ohne Voreinstellung muss die E-Mail-Adresse eingegeben werden.

                      
                      window.ChatBot.setEmail("jemand@mail.com")

                    

Temporäre Werte für benutzerdefinierte Variablen festlegen

Entwickler:innen können temporäre Werte für benutzerdefinierte Variablen festlegen, die während der aktuellen Konversation gültig sind. So können dynamische Logiken und Antworten des Agenten gesteuert werden.

                      
                      window.ChatBot.setCustomVariables({"var_key1": "wert1", "var_key2": "wert2"})

                    

Automatische Anzeige des Chatfensters konfigurieren

Entwickler:innen können das automatische Öffnen des Chatfensters konfigurieren. Wenn Nutzer:innen das Bubble-Widget nicht angeklickt haben, wird das Chatfenster automatisch angezeigt. Beim Klick auf das Widget schließt sich das Chatfenster.

                      
                      <script src="https://www.gptbots.ai/widget/xxxxxxxxxxxxxx/chat.js" onload="ChatBot.show()"></script>

                    

Standardstatus überspringen

Entwickler:innen können den Standardstatus des Chatfensters überspringen, sodass Willkommensnachrichten und voreingestellte Fragen vorrangig angezeigt werden.

                      
                      <script src="https://www.gptbots.ai/widget/xxxxxxxxxxxxxx/chat.js?skipWelcome=1"></script>

                    

Event-Callback-Datenformat

Die per Webhook oder GA4 übertragenen Events und Event-Attribute des Widget-Bubbles verwenden folgendes Datenformat. Bitte entsprechend auslesen und speichern.

                      
                      {
  "client_id": "",  // Nach Möglichkeit mit der gtag-Methode von GA4 ermitteln, sonst von GPTBots generiert.
  "user_id": "",    // Vom Entwickler:in festgelegte UserId, null wenn nicht gesetzt.
  "event_name": "Show widget bubble",     // Event-Name
  "event_params": {  
      "key1": "abc",  // Event-Attributname: Attributwert (String)
      "key2": 123     // Event-Attributname: Attributwert (Zahl)
    }
}

                    

Widget-Bubble in Shopify integrieren

1. Kopieren Sie den Einbettungscode des Widget-Bubbles.
   

2. Öffnen Sie das Admin-Panel Ihres Shopify-Shops, suchen Sie das verwendete Template und klicken Sie auf „Code bearbeiten“.
   

3. Suchen Sie die Datei „theme.liquid“, fügen Sie den Einbettungscode innerhalb des <head>-Tags ein und speichern Sie die Änderungen.
   

4. Das Widget-Bubble erscheint unten rechts auf Ihrer Shop-Seite und steht Besucher:innen für Beratungen zur Verfügung.