Skip to main content

​
Create a widget with PBX

PBX Widgets is an AI-powered UI generator that helps you create widgets for your experiments and personalizations created in the new personalization builder. Instead of manually writing HTML, CSS, and JavaScript, you describe the widget in natural language, and PBX generates the component automatically. This approach enables marketers, product managers, and CRO specialists to build UI components quickly without technical expertise. Typical widgets created with PBX include:
  • Newsletter subscription popups
  • Promotional banners
  • Exit-intent offers
  • Lead capture forms
  • Product recommendation panels
  • Survey or feedback modals
PBX widgets are not compatible with legacy personalization. You can ask your CSM to get access to the new personalization if needed.

​
Create a widget

Follow these steps to generate and refine a widget using PBX.

​
1. Open PBX

To start generating a widget in the Kameleoon interface:
  1. Go to Studio > Widgets.
  2. Click New widget.
  3. Select Using a prompt.
  4. Enter the required information in the pop-in menu.
  5. Click Create.

​
2. Write a prompt

Describe the widget you want to build in the prompt field. PBX uses this description to generate the widget UI automatically. Example prompt:

​
3. Preview and iterate

The fastest way to reach your desired result is to use a prompt-iteration workflow. Review the generated widget and refine it by writing follow-up prompts, such as:
  • “Make the CTA button larger”
  • “Change the background color to a darker beige”
  • “Make the popup appear after 3 seconds”

​
4. Edit the widget’s code

Edit a generated widget’s JS or CSS code directly, instead of refining it through prompts.
  1. Click the code icon in the header to open the View code tab.
  2. Click Edit code.
  3. Edit the widget’s JS or CSS code.
If you generate multiple versions of the widget, select the one you want to edit from the Selected version dropdown. You can edit only the last version. For older versions, you can view and copy the code, but you can’t edit it.

​
5. Add goals

Track user interactions—such as email submissions, button clicks, form completions, or widget displays—by adding goals to your prompt.
You must configure the goals in Settings before you can track them in a PBX widget.
Example prompts for goals:
  • Newsletter signup: Track a goal called "Newsletter Signup" when the user clicks the Subscribe button.
  • CTA click: Track a goal when the CTA button is clicked. Goal name: Promo CTA Click
  • Widget engagement: Track a goal when the popup is displayed. Goal name: Widget Viewed

​
Collect widget responses in Kameleoon (optional)

If your widget asks visitors a question, such as an NPS score or a feedback comment, you need a way to gather those answers without setting up an external tool like Google Sheets. PBX detects when a widget contains a question or input and lets you collect the resulting responses directly in Kameleoon (currently in beta), then export them as a CSV file.

​
1. Enable response collection

When PBX generates a widget that contains a question or input, it prompts you to choose whether to collect the responses.
  1. In the Collect widget responses? prompt, select an option:
    • Yes, collect responses via Kameleoon: Kameleoon collects each response and makes it available for CSV export.
    • No, don’t collect responses: Kameleoon doesn’t collect widget response data.
  2. Click Apply.
Collect widget responses prompt with Yes and No options and an Apply button

​
2. Name the widget fields

Kameleoon uses the widget field names as the column headers in the exported CSV file, so give each field a clear, descriptive name.
  1. Open the Widget response settings panel.
  2. Review the automatically generated field names, listed as Field 1, Field 2, and so on.
  3. Hover over a field name and click the pencil icon to edit it.
  4. Enter a name, then click the checkmark to confirm or the cancel icon to discard the change.
  5. Click Apply to save your changes.
Widget response settings panel with the Widget field names list and Apply button
Apply stays disabled until you make at least one change to a field name.

​
What’s included in the export

Kameleoon exports responses collected through a PBX widget under the same conditions as survey CSV exports. The exported file includes:
  • Response timestamps
  • Visitor code
  • Answers per question
  • Campaign and variation details

​
Send widget responses to Google Sheets (optional)

You can configure a PBX widget to send survey and form responses directly to Google Sheets. You must first configure your Google Sheet as described in this guide. When writing the prompt to connect your widget to Google Sheets, follow these guidelines:
  1. Define a clear submission trigger: Specify which element triggers the request. The trigger is typically the main CTA button (for example, SubmitButton).
  2. Use an external HTTP POST request: Set the method to POST and include your Google Apps Script Web App URL.
  3. Provide the Web App URL explicitly: Always include the full URL (for example, https://script.google.com/macros/s/XXXXXXXX/exec). PBX cannot infer or generate this automatically.
  4. List all elements to send: Explicitly name every field (for example, email, rating, comment).
Do not rely on implicit behavior. PBX requires exact field names.
  1. Match parameter names exactly: Ensure the names match exactly across your widget element names, the request payload, and the Google Sheets column headers.
Example prompt for Google Sheets integration:

​
Write effective prompts

Well-written prompts significantly improve the quality of the generated widget.

​
Use a clear structure

The best prompts follow a logical structure:
Example:

​
Be specific

Specific prompts produce more accurate layouts and styles. Bad prompt: Create a popup for a newsletter Better 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.

​
Define UI elements explicitly

Always specify the elements you need, such as titles, buttons, inputs, secondary links, icons, or images. Example:

​
Describe behavior

PBX can generate widget logic if you specify it. Examples:
  • Show popup after 5 seconds
  • Close popup when clicking outside
  • Close popup when clicking "No thanks"

​
Iterate instead of rewriting

Rather than rewriting the entire prompt, refine your widget step-by-step. Iterative prompting improves results efficiently. Examples:
  • Make the CTA button darker
  • Increase padding inside the popup
  • Add rounded corners to the input field