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

Folgen 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: 
Create a centered modal popup widget.

- Layout: Two columns with an image placeholder on the left and a subscription form on the right.
- Content:
  - Title: Join an Exclusive Community
  - Description: Subscribe for exclusive discounts and get 15% off your next purchase.
  - Form: Email input field with placeholder "Enter your email address"
  - CTA button: Subscribe now
  - Secondary link: No thanks
- Style:
  - Modern ecommerce design
  - Rounded UI elements
  - Light beige background
  - Dark CTA button
- Behavior:
  - Display after 5 seconds
  - Close button in top right corner
  - Close popup when clicking "No thanks"
- Tracking: Track a goal called "Newsletter Signup" when the CTA button is clicked.
- Image: Use the following image in the image placeholder on the left: [https://www.whereyourimagelives.com](https://www.whereyourimagelives.com)

​
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. 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 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: 
Add a system to send widget form data to a Google Sheet using an HTTP request.

- Submission trigger: Use the button named "SubmitButton"
- Request configuration:
  - Request name: SendToGoogleSheets
  - Method: POST
  - Action URL: https://script.google.com/macros/s/AKfycbxxxxxxx/exec
- Data to send: Send the values of the following elements as parameters:
  - email
  - rating
  - comment
- Payload rules:
  - Each parameter key must exactly match the element name
  - Keys must also match the column headers in the Google Sheet
- Behavior:
  - Trigger the request when the SubmitButton is clicked
  - After successful submission, display a confirmation message: "Thank you for your response"
  - Optionally handle errors if the request fails

​
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: 
- Widget type
- Layout
- Content
- Style
- Behavior
Beispiel: 
Create a modal popup widget.

- Layout: Two columns with an image on the left and a form on the right.
- Content:
  - Title: Join our community
  - Description: Get 15% off your first order
  - Email field
  - CTA button: Subscribe now
- Style:
  - Modern ecommerce design
  - Rounded buttons
  - Dark beige background
- Behavior:
  - Display after 5 seconds
  - Close button in top right corner
- Image: Use the following image in the image placeholder on the left: https://www.whereyourimagelives.com

​
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: 
Add:
- Email input field
- Large CTA button
- Small legal disclaimer text
- "No thanks" link below the button

​
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