Personyze Wiki Personyze Wiki docs
Español
  • English
  • Español
  • Français
  • Deutsch
  • Italiano
  • Nederlands
  • Português
  • Polski
  • 日本語
  • العربية
Open Personyze
Documentación/ Plantilla: Tiered Status Bar (barra de estado por niveles)

Plantilla: Tiered Status Bar (barra de estado por niveles)

Una barra que muestra al visitante lo cerca que está de su siguiente nivel de fidelización, leyendo un valor de su perfil e iluminando los niveles alcanzados.

5 min read Actualizado hace 4 horas

La Tiered Status Bar muestra a un visitante lo cerca que está de su siguiente nivel de fidelización — Bronze, Silver, Platinum — usando un valor en vivo de su perfil de Personyze. Lee un número (puntos, gasto, pedidos), muestra el progreso hacia el siguiente nivel que aún no ha alcanzado, ilumina los niveles que ya ha superado y lo celebra cuando llega a lo más alto. Es la versión con varios hitos de la Free Shipping Status Bar. La posición se define en el paso Ubicación de la acción.

Tiered Status Bar con Bronze y Silver alcanzados y progreso hacia Platinum

Cuándo usarla

  • Niveles de fidelización — muestre el progreso por Bronze / Silver / Platinum (o sus propios nombres de nivel) a medida que se acumulan los puntos.
  • Hitos de gasto — desbloquee ventajas en varios niveles de gasto, no solo en uno.
  • Objetivos gamificados — cualquier recorrido con más de un hito por el que avance un visitante.

Añadirla a una acción

En una acción Popup, elija Tiered Status Bar. Defina el valor que se lee, los tres valores y etiquetas de nivel, y el mensaje. Los ajustes están agrupados en Style, Value, Tiers, Message y Close.

Definir el valor que lee

Este es el paso más importante. La barra necesita un número en vivo del perfil del visitante.

  1. Abra la sección Value y use el desplegable Current Value Field para elegir el campo de perfil que contiene el número — por ejemplo, un campo de puntos o de gasto acumulado. La barra lee el valor en vivo de ese campo en el momento de mostrarse.
  2. Defina un Test Value (un número simple) para que la barra se previsualice correctamente en el editor, donde el campo en vivo puede estar vacío. Para ver cómo se iluminan los niveles en la vista previa, ponga el Test Value igual o por encima de uno de sus valores de nivel.
  3. Elija el Unit Prefix (símbolo de moneda) y, si quiere, un Unit Suffix (p. ej., pts).

El Test Value solo se usa dentro del editor. En el sitio en vivo, la barra lee el valor real del perfil; un valor vacío cuenta como 0, así que la barra se muestra desde el principio del recorrido salvo que suba Show From. Para ver cómo se resuelven estas variables del perfil, consulte Insertar variables del CRM (etiquetas) para contenido dinámico.

Llevar el valor al perfil

La barra solo refleja un valor que ya existe en el perfil del visitante, así que ese campo tiene que estar relleno con datos actualizados — el widget lo muestra y reacciona a él, no calcula los puntos ni el gasto por sí mismo.

  • Capturado de su propio sitio — extraiga el valor de la página, de una cookie o de un parámetro de URL. Personyze ya sabe qué visitante es, así que el valor se guarda de inmediato en su perfil, sin necesidad de clave.
  • Importado o sincronizado — traído de un archivo, de un feed o de su CRM, y asociado al visitante mediante una clave como el email o el ID de CRM.

Las instrucciones completas para crear campos de perfil y rellenarlos están en Configuración y sincronización de los datos del perfil de usuario en Personyze. Elija número como tipo del campo para que la barra pueda hacer los cálculos.

Definir los niveles

En la sección Tiers, introduzca los tres Tier Values y sus Labels — por ejemplo, 50 / Bronze, 150 / Silver, 300 / Platinum. La barra averigua hacia qué nivel se dirige el visitante, rellena la barra entre el hito anterior y el siguiente, e ilumina todos los niveles que ya ha alcanzado. Cada chip de nivel puede tener su propio color, icono e imagen. Los colores de nivel se muestran en cuanto se alcanza el nivel — si no se ilumina nada en la vista previa, suba el Test Value por encima de un valor de nivel. El All Tiers Reached Message se muestra en cuanto el visitante supera el nivel más alto.

Ajustes

  • Preset — dark, navy, brand, light o success.
  • Bar Width — a todo el ancho, o contenida (una barra centrada y redondeada).
  • Animate Fill — la barra se anima hasta su posición al cargar.
  • Completion Effect — confeti, una marca de verificación, un pulso luminoso o nada, al alcanzar el nivel más alto.
  • Show From — oculta la barra hasta que el valor llega a este mínimo (déjelo en 0 para mostrarla siempre).
  • Message Before / After Amount — el texto que rodea al número, p. ej., “Le faltan $70 para el siguiente nivel.”
  • Completed Message CSS — da estilo al mensaje de éxito por separado; además, se centra solo en cuanto se alcanzan todos los niveles.
  • Close Button y su visibilidad (siempre, o al pasar el ratón).

Tiered Status Bar en el ajuste predefinido brand

Celebración al completar

Cuando el visitante supera el nivel más alto, la barra oculta la pista y los chips de nivel, muestra su mensaje de “todos los niveles alcanzados” y reproduce el efecto elegido — confeti cayendo sobre la barra, una marca de verificación o un pulso luminoso. El mensaje se centra solo, y puede darle estilo por separado con Completed Message CSS.

Tiered Status Bar mostrando todos los niveles alcanzados con una celebración de confeti

Consejos

  • Ponga el Test Value igual o por encima de un valor de nivel para previsualizar cómo se iluminan los chips.
  • Ponga el tipo del campo de perfil en número — los valores de texto no se pueden comparar con los umbrales de nivel.
  • Ordene los valores de nivel de menor a mayor; la barra los ordena y apunta siempre al siguiente no alcanzado.
  • Para un único objetivo (como el envío gratis), use en su lugar la Free Shipping Status Bar.

Más información

Did this page answer your question?
Thank you — that goes to whoever maintains this page.