Skip to main content

​
Ein Widget mit PBX erstellen

PBX Widgets ist ein KI-gestützter UI-Generator, der Ihnen hilft, Widgets für Ihre Experimente und Personalisierungen zu erstellen, die im neuen Personalization Builder erstellt wurden. Anstatt HTML, CSS und JavaScript manuell zu schreiben, beschreiben Sie das Widget in natürlicher Sprache, und PBX generiert die Komponente automatisch. Dieser Ansatz ermöglicht es Marketern, Produktmanagern und CRO-Spezialisten, UI-Komponenten schnell ohne technisches Fachwissen zu erstellen. Typische mit PBX erstellte Widgets umfassen:
  • Newsletter-Abonnement-Popups
  • Werbebanner
  • Exit-Intent-Angebote
  • Lead-Erfassungsformulare
  • Produktempfehlungs-Panels
  • Umfrage- oder Feedback-Modale
PBX-Widgets sind nicht mit der Legacy-Personalisierung kompatibel. Sie können Ihren CSM bitten, bei Bedarf Zugriff auf die neue Personalisierung zu erhalten.

​
Ein Widget erstellen

Follgen Sie diesen Schritten, um ein Widget mit PBX zu generieren und zu verfeinern.

​
1. PBX öffnen

Um mit der Generierung eines Widgets in der Kameleoon-Oberfläche zu beginnen:
  1. Gehen Sie zu Studio > Widgets.
  2. Klicken Sie auf Neues Widget.
  3. Wählen Sie Mit einem Prompt.
  4. Geben Sie die erforderlichen Informationen im Pop-in-Menü ein.
  5. Klicken Sie auf Erstellen.

​
2. Einen Prompt schreiben

Beschreiben Sie das Widget, das Sie erstellen möchten, im Prompt-Feld. PBX verwendet diese Beschreibung, um die Widget-UI automatisch zu generieren. Beispiel-Prompt:

​
3. Vorschau und Iteration

Der schnellste Weg, das gewünschte Ergebnis zu erreichen, ist die Verwendung eines Prompt-Iterations-Workflows. Überprüfen Sie das generierte Widget und verfeinern Sie es durch das Schreiben von Folge-Prompts, wie zum Beispiel:
  • “Make the CTA button larger”
  • “Change the background color to a darker beige”
  • “Make the popup appear after 3 seconds”

​
4. Den Code des Widgets bearbeiten

Bearbeiten Sie den JS- oder CSS-Code eines generierten Widgets direkt, anstatt ihn durch Prompts zu verfeinern.
  1. Klicken Sie auf das Code-Symbol in der Kopfzeile, um den Tab View code zu öffnen.
  2. Klicken Sie auf Edit code.
  3. Bearbeiten Sie den JS- oder CSS-Code des Widgets.
Wenn Sie mehrere Versionen des Widgets generieren, wählen Sie im Dropdown-Menü Selected version die Version aus, die Sie bearbeiten möchten. Sie können nur die letzte Version bearbeiten. Bei älteren Versionen können Sie den Code einsehen und kopieren, ihn aber nicht bearbeiten.

​
5. Ziele hinzufügen

Verfolgen Sie Benutzerinteraktionen – wie E-Mail-Einreichungen, Schaltflächenklicks, Formularvervollständigungen oder Widget-Anzeigen – indem Sie Ihrem Prompt Ziele hinzufügen.
Sie müssen die Ziele in den Einstellungen konfigurieren, bevor Sie sie in einem PBX-Widget verfolgen können.
Beispiel-Prompts für Ziele:
  • Newsletter-Anmeldung: Track a goal called "Newsletter Signup" when the user clicks the Subscribe button.
  • CTA-Klick: Track a goal when the CTA button is clicked. Goal name: Promo CTA Click
  • Widget-Interaktion: Track a goal when the popup is displayed. Goal name: Widget Viewed

​
Widget-Antworten in Kameleoon sammeln (optional)

Wenn Ihr Widget den Besuchern eine Frage stellt, etwa einen NPS-Wert oder einen Feedback-Kommentar, benötigen Sie eine Möglichkeit, diese Antworten zu erfassen, ohne ein externes Tool wie Google Sheets einzurichten. PBX erkennt, wenn ein Widget eine Frage oder ein Eingabefeld enthält, und ermöglicht es Ihnen, die daraus resultierenden Antworten direkt in Kameleoon zu sammeln (derzeit in der Beta-Phase) und anschließend als CSV-Datei zu exportieren.

​
1. Antwortsammlung aktivieren

Wenn PBX ein Widget generiert, das eine Frage oder ein Eingabefeld enthält, werden Sie aufgefordert, auszuwählen, ob Sie die Antworten sammeln möchten.
  1. Wählen Sie in der Eingabeaufforderung Collect widget responses? eine Option aus:
    • Yes, collect responses via Kameleoon: Kameleoon sammelt jede Antwort und stellt sie für den CSV-Export bereit.
    • No, don’t collect responses: Kameleoon sammelt keine Widget-Antwortdaten.
  2. Klicken Sie auf Apply.
Eingabeaufforderung zum Sammeln von Widget-Antworten mit den Optionen Yes und No sowie einer Schaltfläche Apply

​
2. Widget-Felder benennen

Kameleoon verwendet die Widget-Feldnamen als Spaltenüberschriften in der exportierten CSV-Datei. Geben Sie daher jedem Feld einen klaren, beschreibenden Namen.
  1. Öffnen Sie das Panel Widget response settings.
  2. Überprüfen Sie die automatisch generierten Feldnamen, die als Field 1, Field 2 und so weiter aufgeführt werden.
  3. Bewegen Sie den Mauszeiger über einen Feldnamen und klicken Sie auf das Stiftsymbol, um ihn zu bearbeiten.
  4. Geben Sie einen Namen ein und klicken Sie dann auf das Häkchen, um zu bestätigen, oder auf das Abbrechen-Symbol, um die Änderung zu verwerfen.
  5. Klicken Sie auf Apply, um Ihre Änderungen zu speichern.
Panel für Widget-Antworteinstellungen mit der Liste der Widget-Feldnamen und der Schaltfläche Apply
Apply bleibt deaktiviert, bis Sie mindestens einen Feldnamen geändert haben.

​
Was im Export enthalten ist

Kameleoon exportiert die über ein PBX-Widget gesammelten Antworten unter denselben Bedingungen wie CSV-Exporte für Umfragen. Die exportierte Datei enthält:
  • Zeitstempel der Antworten
  • Besuchercode
  • Antworten pro Frage
  • Kampagnen- und Variationsdetails

​
Widget-Antworten an Google Sheets senden (optional)

Sie können ein PBX-Widget so konfigurieren, dass es Umfrage- und Formularantworten direkt an Google Sheets sendet. Sie müssen zuerst Ihr Google Sheet wie in dieser Anleitung beschrieben konfigurieren. Wenn Sie den Prompt schreiben, um Ihr Widget mit Google Sheets zu verbinden, befolgen Sie diese Richtlinien:
  1. Definieren Sie einen klaren Einreichungsauslöser: Geben Sie an, welches Element die Anfrage auslöst. Der Auslöser ist normalerweise die Haupt-CTA-Schaltfläche (z. B. SubmitButton).
  2. Verwenden Sie eine externe HTTP-POST-Anfrage: Setzen Sie die Methode auf POST und fügen Sie Ihre Google Apps Script Web App-URL ein.
  3. Geben Sie die Web App-URL explizit an: Fügen Sie immer die vollständige URL ein (z. B. https://script.google.com/macros/s/XXXXXXXX/exec). PBX kann diese nicht automatisch ableiten oder generieren.
  4. Listen Sie alle zu sendenden Elemente auf: Benennen Sie jedes Feld explizit (z. B. email, rating, comment).
Verlassen Sie sich nicht auf implizites Verhalten. PBX erfordert genaue Feldnamen.
  1. Stimmen Sie Parameternamen exakt überein: Stellen Sie sicher, dass die Namen über Ihre Widget-Elementnamen, die Anfrage-Payload und die Google Sheets-Spaltenüberschriften hinweg exakt übereinstimmen.
Beispiel-Prompt für die Google Sheets-Integration:

​
Effektive Prompts schreiben

Gut geschriebene Prompts verbessern die Qualität des generierten Widgets erheblich.

​
Verwenden Sie eine klare Struktur

Die besten Prompts folgen einer logischen Struktur:
Beispiel:

​
Seien Sie spezifisch

Spezifische Prompts erzeugen genauere Layouts und Stile. Schlechter Prompt: Create a popup for a newsletter Besserer Prompt: Create a centered modal popup for newsletter subscription with a modern ecommerce design. Include an email input field and a large CTA button offering 15% off.

​
UI-Elemente explizit definieren

Geben Sie immer die benötigten Elemente an, z. B. Titel, Schaltflächen, Eingabefelder, sekundäre Links, Symbole oder Bilder. Beispiel:

​
Verhalten beschreiben

PBX kann die Widget-Logik generieren, wenn Sie sie angeben. Beispiele:
  • Show popup after 5 seconds
  • Close popup when clicking outside
  • Close popup when clicking "No thanks"

​
Iterieren statt umschreiben

Anstatt den gesamten Prompt neu zu schreiben, verfeinern Sie Ihr Widget Schritt für Schritt. Iteratives Prompting verbessert die Ergebnisse effizient. Beispiele:
  • Make the CTA button darker
  • Increase padding inside the popup
  • Add rounded corners to the input field