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

Plantilla: Free Shipping Status Bar (barra de envío gratis)

Una barra de progreso en vivo que muestra al visitante cuánto le falta para un objetivo, leyendo un número de su perfil, con celebración al alcanzarlo.

5 min read Actualizado hace 3 horas

La Free Shipping Status Bar muestra a un visitante lo cerca que está de un objetivo — “Le faltan $65 para el envío gratis” — con una barra de progreso en vivo que se llena a medida que crece su valor. Lee un número del perfil de Personyze del visitante (total del carrito, puntos, número de pedidos), lo compara con un objetivo que usted fija y actualiza automáticamente el mensaje, la barra y el porcentaje. Cuando se alcanza el objetivo, cambia a un mensaje de éxito con una animación de celebración. La posición se define en el paso Ubicación de la acción.

Free Shipping Status Bar, ajuste predefinido dark, con el mensaje, el importe restante, el relleno de progreso y el porcentaje

Cuándo usarla

  • Umbral de envío gratis — anime a los visitantes a añadir más al carrito para conseguir el envío gratis.
  • Objetivos de recompensas o fidelización — “120 puntos para su próxima recompensa.”
  • Hitos de gasto o de pedidos — cualquier objetivo numérico único hacia el que avance un visitante.

Añadirla a una acción

En una acción Popup, elija Free Shipping Status Bar. Defina el valor que se lee, el objetivo y el mensaje. Los ajustes están agrupados en Style, Value, Goal, 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 total del carrito o de puntos. 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. 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, la barra lee el valor real del perfil; un valor vacío cuenta como 0, así que la barra 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 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 el carrito por sí mismo.

  • Capturado de su propio sitio — extraiga el total del carrito (o los puntos, o los pedidos) 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 el objetivo

En la sección Goal, introduzca el Goal Amount (por ejemplo, 100). La barra calcula el importe restante y el porcentaje a partir del valor actual frente a este objetivo. Use Show From para ocultar la barra hasta que el valor llegue a un mínimo (déjelo en 0 para mostrarla siempre). El Completed Message se muestra en cuanto el valor alcanza o supera el objetivo.

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 objetivo.
  • Message Before / After Amount — el texto que rodea al número; la parte de «después» admite HTML sencillo, para que pueda dar estilo a la recompensa.
  • Show From — oculta la barra hasta que el valor llega a este mínimo (0 = mostrar siempre).
  • Completed Message CSS — da estilo al mensaje de éxito por separado; además, se centra solo en cuanto se alcanza el objetivo.
  • Close Button y su visibilidad (siempre, o al pasar el ratón).

Free Shipping Status Bar en el ajuste predefinido brand
Free Shipping Status Bar en el ajuste predefinido light, con ancho contenido

Celebración al completar

Cuando el valor alcanza el objetivo, la barra oculta la pista y el porcentaje, muestra su mensaje de objetivo cumplido y reproduce el efecto elegido. El confeti cae sobre la barra durante unos segundos, aparece la marca de verificación o la barra late con un brillo. El mensaje también se centra solo cuando desaparecen la barra y el porcentaje, y puede darle estilo por separado con Completed Message CSS.

Free Shipping Status Bar mostrando el objetivo alcanzado con una celebración de confeti

Consejos

  • Pruebe primero con el Test Value para confirmar el texto y los colores, y después elija el campo en vivo en Current Value Field.
  • Ponga el tipo del campo de perfil en número — los valores de texto no se pueden comparar con el objetivo.
  • Si la barra muestra siempre 0, el campo de perfil todavía no está relleno — asegúrese de que Current Value Field está configurado y de que el campo contiene realmente un número para el visitante (vea los dos enlaces de arriba).
  • Para hitos por niveles (Bronze / Silver / Platinum), use en su lugar la plantilla Status Bar por niveles.

Más información

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