> ## Documentation Index
> Fetch the complete documentation index at: https://docs.kameleoon.com/llms.txt
> Use this file to discover all available pages before exploring further.
# Crear un widget con PBX
> Aprenda a utilizar PBX, un generador de UI impulsado por IA, para crear widgets utilizando indicaciones en lenguaje natural.
# Crear un widget con PBX
**PBX Widgets** es un generador de UI impulsado por IA que le ayuda a crear widgets para sus experimentos y personalizaciones creados en el nuevo creador de personalizaciones. En lugar de escribir manualmente HTML, CSS y JavaScript, usted describe el widget en lenguaje natural y PBX genera el componente automáticamente.
Este enfoque permite a los profesionales del marketing, gestores de producto y especialistas en CRO crear componentes de UI rápidamente sin necesidad de conocimientos técnicos.
Los widgets típicos creados con PBX incluyen:
* Popups de suscripción al newsletter
* Banners promocionales
* Ofertas de intención de salida
* Formularios de captación de leads
* Paneles de recomendación de productos
* Modales de encuesta o feedback
Los widgets de PBX no son compatibles con la personalización heredada. Puede solicitar a su CSM acceso a la nueva personalización si lo necesita.
## Crear un widget
Siga estos pasos para generar y refinar un widget utilizando PBX.
### 1. Abrir PBX
Para empezar a generar un widget en la interfaz de Kameleoon:
1. Vaya a **Studio** > **Widgets**.
2. Haga clic en **Nuevo widget**.
3. Seleccione **Mediante una indicación**.
4. Introduzca la información requerida en el menú emergente.
5. Haga clic en **Crear**.
### 2. Escribir una indicación
Describa el widget que desea crear en el campo de indicación. PBX utiliza esta descripción para generar la UI del widget automáticamente.
**Ejemplo de indicación:**
```text theme={null}
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. Vista previa e iteración
La forma más rápida de alcanzar el resultado deseado es utilizar un flujo de trabajo de iteración de indicaciones. Revise el widget generado y refínelo escribiendo indicaciones de seguimiento, como:
* "Make the CTA button larger"
* "Change the background color to a darker beige"
* "Make the popup appear after 3 seconds"
### 4. Añadir objetivos
Realice el seguimiento de las interacciones del usuario —como envíos de correo electrónico, clics en botones, finalizaciones de formularios o visualizaciones de widgets— añadiendo objetivos a su indicación.
Debe configurar los objetivos en [**Configuración**](../goals/create-a-goal) antes de poder realizar su seguimiento en un widget PBX.
**Ejemplos de indicaciones para objetivos:**
* Registro al newsletter: `Track a goal called "Newsletter Signup" when the user clicks the Subscribe button.`
* Clic en CTA: `Track a goal when the CTA button is clicked. Goal name: Promo CTA Click`
* Interacción con el widget: `Track a goal when the popup is displayed. Goal name: Widget Viewed`
## Enviar respuestas del widget a Google Sheets (opcional)
Puede configurar un widget PBX para [enviar respuestas de encuestas y formularios directamente a Google Sheets](./create-a-widget-with-the-widget-studio/create-csat-nps-and-surveys/send-survey-responses-to-google-sheets). Primero debe configurar su Google Sheet como se describe en [esta guía](./create-a-widget-with-the-widget-studio/create-csat-nps-and-surveys/send-survey-responses-to-google-sheets).
Al escribir la indicación para conectar su widget a Google Sheets, siga estas directrices:
1. **Defina un activador de envío claro:** Especifique qué elemento activa la solicitud. El activador suele ser el botón CTA principal (por ejemplo, `SubmitButton`).
2. **Utilice una solicitud HTTP POST externa:** Establezca el método en **POST** e incluya la URL de su aplicación web de Google Apps Script.
3. **Proporcione la URL de la aplicación web explícitamente:** Incluya siempre la URL completa (por ejemplo, `https://script.google.com/macros/s/XXXXXXXX/exec`). PBX no puede inferirla o generarla automáticamente.
4. **Enumere todos los elementos que se van a enviar:** Nombre explícitamente cada campo (por ejemplo, `email`, `rating`, `comment`).
No confíe en el comportamiento implícito. PBX requiere nombres de campo exactos.
5. **Haga coincidir los nombres de los parámetros exactamente:** Asegúrese de que los nombres coincidan exactamente entre los nombres de los elementos de su widget, el payload de la solicitud y los encabezados de columna de Google Sheets.
**Ejemplo de indicación para la integración con Google Sheets:**
```text id="example_pbx_google_sheets" theme={null}
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
```
## Escribir indicaciones eficaces
Las indicaciones bien redactadas mejoran significativamente la calidad del widget generado.
### Utilizar una estructura clara
Las mejores indicaciones siguen una estructura lógica:
```text theme={null}
- Widget type
- Layout
- Content
- Style
- Behavior
```
**Ejemplo:**
```text theme={null}
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
```
### Ser específico
Las indicaciones específicas producen diseños y estilos más precisos.
**Mala indicación:**
`Create a popup for a newsletter`
**Mejor indicación:**
`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.`
### Definir los elementos de UI explícitamente
Especifique siempre los elementos que necesita, como títulos, botones, entradas, enlaces secundarios, iconos o imágenes.
**Ejemplo:**
```text theme={null}
Add:
- Email input field
- Large CTA button
- Small legal disclaimer text
- "No thanks" link below the button
```
### Describir el comportamiento
PBX puede generar la lógica del widget si la especifica.
**Ejemplos:**
* `Show popup after 5 seconds`
* `Close popup when clicking outside`
* `Close popup when clicking "No thanks"`
### Iterar en lugar de reescribir
En lugar de reescribir toda la indicación, refine su widget paso a paso. La iteración de indicaciones mejora los resultados de manera eficiente.
**Ejemplos:**
* `Make the CTA button darker`
* `Increase padding inside the popup`
* `Add rounded corners to the input field`