El editor en vivo — el editor visual WYSIWYG — le permite cambiar cualquier elemento de su
sitio real señalando y haciendo clic: textos, imágenes, estilos, disposición. Sus cambios se registran como una acción de Personyze y
se muestran a la audiencia de la campaña. No se escribe nada en la propia página, así que su sitio
nunca se toca.
Abrirlo en la página adecuada
En el paso Contenido de la campaña, Agregar acción → En vivo. Después elija la página en la que
va a editar — el lienzo, no la única página en la que se aplicarán los cambios.
- Mostrar las páginas de tu sitio enumera lo que Personyze ya conoce, agrupado: Más visitadas,
Páginas de producto, Páginas de artículo. Escriba para filtrar. - O escriba usted mismo cualquier URL. En una cuenta recién creada todavía no hay nada que listar, y el cuadro lo indica.
Dos formas de abrirlo:
- Editar dentro de Personyze — la página se carga en el panel, con el panel Cambios al lado.
- Abrir en una ventana nueva — la página se abre por sí sola, con la barra de edición encima.
Dónde se aplica está activado por defecto: funcionar en todas las páginas que tienen la misma estructura de
elementos — editar una página de producto cubre toda la plantilla. Desmárquelo, o elija
grupos de páginas, cuando el cambio corresponda a URL concretas.
pueda diseñar antes de instalar la etiqueta. El cargador solo abre dominios registrados en su cuenta — si ve
“Esta página no está en ninguno de tus sitios”, añada el dominio en la configuración del tracker y
vuelva a abrirla.
X-Frame-Options o CSP impide cualquieriframe. El editor dice “Este sitio no se puede incrustar” y ofrece dos alternativas: el
cargador proxy, o abrirlo en una ventana nueva. Ninguna de las dos cambia lo que puede editar.
El tamaño del lienzo
El selector de dispositivo previsualiza anchos de escritorio, tableta y móvil, y Personalizado admite un ancho y un
alto exactos — útil para el único punto de corte en el que su diseño se rompe de verdad. Ampliar el área de edición
oculta la configuración y da a la página todo el ancho; Esc vuelve a mostrar la configuración. El panel Cambios se oculta
de la misma manera.
Editar un elemento
Pase el cursor para resaltar, haga clic para seleccionar — la barra de herramientas flota sobre el elemento en lugar de estar en una barra lateral.
Desde ella: Editar texto, Editor enriquecido, Estilo, Propiedades,
Duplicar, Eliminar, Código HTML, con una ruta de navegación por el DOM y
las pestañas Básico / Disposición / Insertar / Comportamiento / Seguimiento.
Las variables dinámicas
del visitante se pueden poner en cualquier texto — “Bienvenido de nuevo, {first_name}”.
Añadir algo a la página
La barra de herramientas del elemento tiene cinco pestañas — Básico, Disposición,
Insertar widget, Comportamiento, Seguimiento. Insertar coloca contenido nuevo
antes, después o dentro del elemento elegido.
Elementos simples
Una imagen, un enlace, un vídeo, HTML personalizado o un bloque — uno simple o un cuadro de mensaje con botón de cerrar. La función de un botón se configura después, en la pestaña Comportamiento.
Widgets del lienzo
Veintiséis de los bloques del propio Canvas Builder se pueden soltar directamente en
su página:
| Grupo | Widgets |
|---|---|
| Urgencia y ofertas | Cuenta regresiva · Cupón · Urgencia de stock · Barra de progreso · Rueda de premios |
| Texto y disposición | Titular y subtítulo · Párrafo · Chip / Píldora · Lista de verificación · Separador · Icono · Texto rotativo · Pasos numerados · Medios + texto · Menú |
| Prueba social y explicación | FAQ / Acordeón · Valoración con estrellas · Tabla comparativa · Testimonios · Fila de logotipos · Carrusel de imágenes |
| Interactivos | Formulario · Chat con IA · Búsqueda IA |
| Conexión | Personyze Placeholder |
Un widget soltado en su página funciona — la cuenta regresiva avanza, la rueda gira, el formulario
envía datos — porque la acción lleva el mismo runtime para el que compila el constructor de bloques.
y la acción pasa por sí sola a su gemela con capacidad de formularios, de modo que los envíos se recogen igual que los recoge el
formulario de leads.
una fuente declarada por la acción — que el tipo de acción del editor en vivo no declara. Insertar uno
pondría tokens sin sustituir en su página, delante de un visitante. Inserte en su lugar un Personyze Placeholder
y apunte a él una acción de recomendación: el mismo
resultado, con la consulta donde corresponde.
La configuración del widget, después
Haga clic de nuevo en un widget insertado y obtendrá su configuración — no el HTML en que se compiló. Las
mismas opciones que ofrece el lienzo, en dos pestañas:
- Dónde colocarlo — antes, dentro o después del elemento elegido, en el propio panel del widget.
- Contenido — lo que dice y hace. La fecha límite y los rótulos de unidades de una cuenta regresiva; el
código y el estilo de revelado de un cupón; los segmentos y las probabilidades de una rueda; las preguntas de una FAQ; las filas de una tabla
comparativa. - Estilo — colores, tamaños, esquinas, espaciado, animación.
Los widgets más completos tienen muchas: la Rueda de premios tiene diecinueve opciones, el Formulario dieciséis, y el Botón CTA y
Medios + texto trece cada uno.
de modo que “¿cómo cambio el título?” tiene respuesta meses después. El compilador nunca se carga en su sitio
— la página pide a la ventana de Personyze que vuelva a compilar cuando cambia un valor, y vuelve a pintar el resultado.
Una Fila de logotipos o un Carrusel de imágenes no tiene nada que dibujar hasta que usted le da imágenes. El elemento vacío que ve es el que
está rellenando.
Cuándo se muestra el cambio, y a qué reacciona
Comportamiento → esperar a algo
Por defecto, un cambio se aplica en cuanto la página está lista. En una página que se construye después — un
framework que renderiza en el cliente, una sección de carga diferida — eso es demasiado pronto, y el cambio cae sobre un elemento
que todavía no existe.
Esperar a admite un selector CSS (o elija el elemento en la página), opcionalmente el texto que el elemento
debe mostrar, y después un retraso adicional en milisegundos. El cambio espera hasta que se cumple todo.
Comportamiento → al hacer clic
Haga que cualquier elemento haga algo. Cuando el visitante hace clic en él — o pasa el cursor por encima, lo retira, entra en el foco,
sale del foco, pulsa una tecla — y entonces:
- Quitar un elemento de la página — así se construye un botón de cerrar.
- Ejecutar otra acción — un elemento abre el contenido de otra campaña.
- Ejecutar JavaScript personalizado.
- Activar un evento personalizado u objetivo — para que el clic cuente como conversión.
- Desplazar hasta un elemento, alineado arriba, en el centro o abajo de la pantalla, con un margen y un
movimiento suave o instantáneo.
Cada uno puede ejecutarse una vez o todas las veces.
Seguimiento
Marque qué elemento cuenta como el clic para la tasa de clics de esta acción. Sin ello, una acción
con varios enlaces informa de todos los clics por igual, y el CTR responde a una pregunta que nadie ha hecho.
El panel Cambios
Cada edición llega al panel de la derecha como una fila que se puede revisar — una etiqueta con el tipo de cambio, una descripción de lo que
ha cambiado realmente (no solo “Estilo”), y el elemento al que afecta.
- Deshacer / Rehacer recorren el historial. El Deshacer de una fila anula ese cambio y todo lo que
vino después, y la fila muestra “Deshecho — no se guardará” hasta que pulse Rehacer. - Enfocar en la página se desplaza hasta el elemento y lo resalta.
- Mostrar el original revierte todos los cambios para que vea la página tal como llegó. No se pierde nada
— vuelva a pulsar para restaurarlos. La edición se pausa mientras compara, y es a propósito: una edición
hecha sobre el original se registraría contra una página que no es la que reciben sus visitantes. - Descartar todo vacía la lista, después de preguntar.
No se guarda nada hasta que guarda la acción, así que nada de esto puede perder trabajo que ya estaba guardado.
IA integrada
Dos niveles, y ambos producen filas de cambio normales — revisables y reversibles exactamente igual que sus propias ediciones.
Por elemento
Con un elemento seleccionado, describa el reemplazo con palabras sencillas. “Esto” significa el elemento
seleccionado. También puede describir el cambio en voz alta en lugar de escribirlo.
En toda la página
La tarjeta de la parte superior del panel Cambios admite una sola instrucción dirigida a todo: “Reescribe esta página para
compradores empresariales”, “Haz más urgentes las llamadas a la acción”, “Ajusta cada
párrafo”. Sugerir cambios ofrece instrucciones ya preparadas si prefiere elegir antes que escribir. La
IA inspecciona la página, aplica sus ediciones como registros de cambio e informa de lo que ha hecho en un par de frases sencillas.
Hacerlo distinto para cada audiencia
Una acción En vivo se muestra a quien segmente la campaña. Para varias variantes — un titular distinto por idioma
o por segmento — añada una acción En vivo por variante con su propia segmentación, o ejecútelas como
casos divididos y deje que decidan los resultados.
Relacionado
- Variables dinámicas en el editor
- Canvas Builder — cuando quiera construir algo nuevo en lugar de editar lo que ya existe.
- Popup y banner — añadir contenido sobre la página en lugar de cambiarla.
- Límites de frecuencia — con qué frecuencia se aplica el cambio.