Skip to main content

​
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: 
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 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. Primero debe configurar su Google Sheet como se describe en esta guía. 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.
  1. 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: 
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: 
- Widget type
- Layout
- Content
- Style
- Behavior
Ejemplo: 
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: 
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