iframe

Betten Sie den Audio Agent per iframe in Ihre Business-Website ein. Sobald Nutzer:innen die Zielseite aufrufen, wird das Konversationsfenster des Agenten geladen, um Dienste wie Online-Kundenservice, Vorverkaufsberatung und die Erfassung von Kundenleads bereitzustellen.

So integrieren Sie es in Ihre Website

Gehen Sie zu Agent-Integration-iframe und kopieren Sie den „Integrationscode“
Fügen Sie den Code an der gewünschten Stelle in der HTML-Seite Ihrer Website ein
Veröffentlichen Sie die Website, um die Einbindung des AI Agent abzuschließen und Konversationen zu führen
Wenn Sie die UI und das Logo anpassen, die Nachrichtenfrequenz der Nutzer:innen steuern oder proaktive Nachrichten anzeigen möchten, um die Interaktionsrate zu erhöhen, können Sie mit den erweiterten Einstellungen fortfahren.

UI anpassen

Diese Funktion unterstützt die individuelle Konfiguration von Größe, Position, Farbe, Symbol, LOGO und Name der Widget-Bubble usw.
alt text

Widget-Spitzname: Ermöglicht die individuelle Benennung
Widget-Beschreibung: Ermöglicht individuelle Beschreibungsinformationen
Themeneinstellungen: Ermöglicht die Anpassung der Themenfarbe, des Bubble-Symbols und des Erscheinungsbilds des Agenten
Bubble-Anpassung: Unterstützt die individuelle Festlegung der Anzeigeposition und Größe der Bubble entsprechend den geschäftlichen Anforderungen
Anpassung des Dialogfensters: Unterstützt die individuelle Festlegung der Breite und Höhe des Konversationsfensters entsprechend den geschäftlichen Anforderungen (zur Kompatibilität mit kleinen Bildschirmen werden zu große Werte nicht empfohlen)
Agent-LOGO:
Plattform-LOGO: Zeigt das Logo von GPTBots an
Organisations-LOGO: Zeigt das von der Organisation hochgeladene individuelle Logo an. Alle Agenten der Organisation verwenden dasselbe Organisations-Logo.
Individuelles LOGO: Zeigt ein hochgeladenes individuelles Logo an. Jeder Agent kann ein anderes Logo verwenden. Diese Funktion ist ein Premium-Feature und muss durch den Vertrieb freigeschaltet werden.
Kein LOGO: Das Chat-Konversationsfenster zeigt keine Logo-Informationen an.

Sicherheit und Ratenbegrenzung

Domain-Whitelist: Definiert den Domainbereich, in den der „Integrationscode der Widget-Bubble“ eingebettet werden kann. Ist die Funktion deaktiviert, gilt sie als unbegrenzt;
Limit für Credits-Verbrauch: Definiert das Limit für den Credits-Verbrauch der „Widget-Bubble“. Ist die Funktion deaktiviert, gilt sie als unbegrenzt;
- Maximal 3 Einträge einstellbar
- Unterstützt die Festlegung eines Gesamtlimits für den Credits-Verbrauch der Widget-Bubble nach „Täglich/Wöchentlich/Monatlich“
Nutzerverbrauchslimit: Definiert das Limit für den Credits-Verbrauch pro Nutzer:in. Ist die Funktion deaktiviert, gilt sie als unbegrenzt;
- Maximal 3 Einträge einstellbar
- Unterstützt die Festlegung eines Obergrenze für den Credits-Verbrauch pro Nutzer:in nach „Täglich/Wöchentlich/Monatlich“
Nutzer-Ratenbegrenzung: Definiert das Limit für die Nachrichtensendefrequenz pro Nutzer:in. Ist die Funktion deaktiviert, gilt sie als unbegrenzt;
- Maximal 3 Einträge einstellbar
- Unterstützt die Festlegung einer Obergrenze für gesendete Nachrichten pro Nutzer:in nach „Anzahl gesendeter Nachrichten/Zeitraum“
- Wird das Limit überschritten, wird der Agent nicht mehr zur Antwort aufgerufen, sondern es wird automatisch der voreingestellte Nachrichteninhalt gesendet

Event Callback

Erstellen Sie ein GA4-Callback-Ereignis, rufen Sie das Measurement Protocol API Secret und die Measurement ID aus dem GA4-Zielprojekt ab und tragen Sie sie ein.
Erstellen Sie ein Webhook-Callback-Ereignis, wählen Sie das gewünschte Callback-Ereignis gemäß den Hinweisen auf der Seite aus und tragen Sie die URL sowie die Authentifizierungsinformationen ein
„Aktivieren“ Sie das Callback in der Liste der Event-Callbacks und prüfen Sie in GA4 oder unter der Webhook-Adresse, ob die Daten korrekt sind. Sobald die Daten korrekt gespeichert wurden, können sie für die Nutzerdatenanalyse verwendet werden

Erweiterte Nutzung

Nutzer-ID festlegen

Option 1: Die URL-Regel für die iframe-Einbindung der Webseite lautet: iframe_url+?user_id=your_user_id

Hinweis: Ermöglicht Agent-Entwickler:innen das Festlegen der Nutzeridentitäts-ID
Option 2: Legen Sie die Nutzer-ID dynamisch über JavaScript-Code fest

Array.from(document.getElementsByTagName('iframe')).filter(iframe => iframe.src.includes('gptbots')).forEach(iframe => iframe.contentWindow.postMessage('{"type":"UserId","data":"your_user_id"}', '*'))

                      
                      Array.from(document.getElementsByTagName('iframe')).filter(iframe => iframe.src.includes('gptbots')).forEach(iframe => iframe.contentWindow.postMessage('{"type":"UserId","data":"your_user_id"}', '*'))

Dieser Codeblock im schwebenden Fenster

Nutzer-E-Mail festlegen

Die URL-Regel für die iframe-Einbindung der Webseite lautet: iframe_url+?email=somebody@mail.com
// Hinweis: Ermöglicht Agent-Entwickler:innen das Festlegen der Nutzer-E-Mail. Wenn Nutzer:innen den menschlichen Kundenservice anfordern, entfällt dadurch der Schritt zur Eingabe der E-Mail-Adresse. Ist keine E-Mail festgelegt, müssen Nutzer:innen beim Anfordern des menschlichen Kundenservice zwingend eine E-Mail-Adresse eingeben, um den menschlichen Kundenservice aufrufen zu können

Benutzerdefinierte Variablen festlegen

Ermöglicht Entwickler:innen das Festlegen des temporären Variablenwerts benutzerdefinierter Variablen, der in der aktuellen Konversation gültig ist, um dynamische Logik und Antworten des Agenten umzusetzen.
Die URL-Regel für die iframe-Einbindung der Webseite lautet: iframe_url?var_key1=value1&var_key2=value2

iframe-Parameter zur Steuerung der Oberfläche

show_messages: Steuert, ob der Konversationsverlauf angezeigt wird
iframe_url+?show_messages=true
show_auto_call: Ob der Anruf automatisch gestartet wird
iframe_url+?show_auto_call=true

Methode zum Abhören von iframe-Ereignissen

Es wird unterstützt, Nutzerverhaltensdaten durch das Abhören der postMessage-Ereignisse des iframe abzurufen. Entwickler:innen können die Daten je nach geschäftlichen Anforderungen analysieren und verarbeiten.

                      
                      window.addEventListener('message', (e) => {
  let msg;
  try {
    msg = JSON.parse(e.data);
  } catch {
    return;
  }
  switch (msg.type) {
    case 'audio_conversation_id':
      console.log('audio_conversation_id', msg.data);
      // msg.data ist die conversation id dieses Anrufs
      break;
    case 'audio_call_started':
      console.log('audio_call_started', msg.data);
      // msg.data === 'manual' (von Nutzer:in aktiv gestartet) | 'auto' (automatisch gestartet) Ereignis "Anruf gestartet", 
      break;
    case 'audio_call_ended':
      console.log('audio_call_ended', msg.data);
      // msg.data === 'manual' (von Nutzer:in aufgelegt) | 'auto' (automatisch beendet, z. B. bei Zeitüberschreitung/Verbindungsabbruch) Ereignis "Anruf beendet"
      break;
  }
});