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

Plantilla: Status Card (tarjeta de estado)

Una tarjeta o popup que muestra con un anillo o una barra cuánto le falta al visitante para un objetivo, leyendo un valor de su perfil.

5 min read Actualizado hace 2 horas

La Status Card muestra a un visitante lo cerca que está de un objetivo — como el envío gratis o una recompensa — en forma de tarjeta centrada o popup, usando un valor en vivo de su perfil de Personyze (total del carrito, puntos, gasto). Lee el número, muestra el progreso como un anillo circular o una barra horizontal, y lo celebra cuando se alcanza el objetivo. Es la versión en tarjeta o popup de la Free Shipping Status Bar. La posición se define en el paso Ubicación de la acción.

Status Card con un anillo de progreso circular que muestra el avance hacia un objetivo

Cuándo usarla

  • Umbral de envío gratis o de recompensa — una tarjeta destacada que anima a los visitantes a acercarse a un objetivo.
  • Progreso de puntos o de fidelización — “120 puntos para su próxima recompensa.”
  • Hitos de gasto o de pedidos — cualquier objetivo numérico único, mostrado como tarjeta en lugar de una barra fina.

Añadirla a una acción

En una acción Popup, elija Status Card. Elija el estilo de progreso (anillo o barra), el valor que se lee, el objetivo y el texto. Los ajustes están agrupados en Style, Value, Goal, Text, Button y Close.

Anillo o barra

El ajuste Progress Style (en Style) cambia entre dos aspectos: ring muestra un indicador de progreso circular con el porcentaje en el centro; bar muestra una barra de progreso horizontal dentro de la tarjeta, con el importe restante y el porcentaje debajo. Todo lo demás — el valor, el objetivo, el texto y la celebración — funciona igual en los dos casos.

Status Card con el estilo de progreso de barra horizontal

Definir el valor que lee

La tarjeta 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 total del carrito o de puntos. La tarjeta 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 tarjeta se previsualice correctamente en el editor, donde el campo en vivo puede estar vacío. El Test Value solo se usa dentro del editor — los visitantes reales siempre ven su propio valor.
  3. Elija el Unit Prefix (símbolo de moneda) y, si quiere, un Unit Suffix (p. ej., pts).

En el sitio en vivo, un valor vacío cuenta como 0, así que la tarjeta se muestra desde el principio 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 tarjeta refleja un valor que ya existe en el perfil del visitante, así que ese campo tiene que estar relleno — el widget lo muestra y reacciona a él, no calcula el carrito 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; se guarda de inmediato en el 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 están en Configuración y sincronización de los datos del perfil de usuario en Personyze. Elija número como tipo del campo.

Definir el objetivo

En la sección Goal, introduzca el Goal Amount. La tarjeta calcula el importe restante y el porcentaje. Use Show From para ocultar la tarjeta hasta que el valor llegue a un mínimo (0 = mostrar siempre). El Ring Label es el texto pequeño que va debajo del porcentaje en el modo de anillo. El Completed Message se muestra en cuanto se alcanza el objetivo.

Ajustes

  • Preset — light, dark, brand o success.
  • Progress Style — ring o bar.
  • Size — compact, default o spacious.
  • Completion Effect — confeti, una marca de verificación o nada, al alcanzar el objetivo.
  • Text — antetítulo, título (envuelva el importe en <span class="sc-amt"> para darle color) y subtexto, cada uno con su propio campo de estilo.
  • Button — llamada a la acción opcional con su propio enlace y estilo.
  • Completed Message CSS — da estilo al mensaje de éxito por separado.
  • Close Button y su visibilidad (siempre, o al pasar el ratón).

Celebración al completar

Cuando el valor alcanza el objetivo, la tarjeta muestra su mensaje de objetivo cumplido y reproduce el efecto elegido — confeti, una marca de verificación o nada. Puede dar estilo al mensaje de objetivo cumplido por separado con Completed Message CSS.

Status Card mostrando el objetivo alcanzado con una celebración

Consejos

  • Anillo o barra es una diferencia puramente visual — los dos siguen el mismo valor y el mismo objetivo.
  • Ponga el tipo del campo de perfil en número para que la tarjeta pueda hacer los cálculos.
  • Para una barra fina en todo el sitio en lugar de una tarjeta, use la Free Shipping Status Bar. Para niveles de fidelización, use la Tiered Status Card.

Más información

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