Saltar al contenido principal

Widget del sitio web

Añade este widget al sitio web de tu propio estudio y los visitantes podrán consultar tu calendario de clases en directo, tus servicios de cita, tus planes de membresía y tus productos de retail — y reservar o comprar, directamente desde tu sitio — sin salir de tu página.

Etiqueta de navegación — Widget del sitio web (pestaña de Configuración): EN: Website Widget · IT: Widget del sito web · FR: Widget du site web · DE: Website-Widget · ES: Widget del sitio web · PT: Widget do site · NL: Website-widget

Antes de empezar​

El widget del sitio web es un pequeño panel embebible con hasta cuatro pestañas — Calendario, Citas, Membresías y Productos — cada una respaldada por los mismos datos públicos que ven los clientes de tu aplicación móvil, y además un visitante puede crear una cuenta, iniciar sesión, reservar una clase o una cita y comprar una membresía o un producto, todo dentro del propio widget.

Necesitarás:

  • Acceso a Configuración en la aplicación de escritorio de Agon (solo studio manager).
  • La posibilidad de pegar un fragmento de HTML en el editor de tu sitio web (Squarespace, Wix, WordPress o un sitio personalizado, todos funcionan — en cualquier sitio donde puedas añadir un bloque personalizado de "embed" o "HTML").

Qué muestra el widget​

Una vez embebido, el widget muestra una cabecera con el nombre de tu estudio y el color de acento de tu marca, y una barra de pestañas con hasta cuatro pestañas:

  • Calendario — todas las próximas clases programadas: nombre, fecha y hora, instructor (cuando está asignado) y cuántas plazas quedan (o "Completo"). Al hacer clic en una clase se abre su detalle, con un botón Reservar (o Unirse a la lista de espera, una vez completo).
  • Citas — tus servicios de cita activos. Al hacer clic en uno se abre un flujo de reserva paso a paso: elige un instructor, elige una fecha, elige una franja horaria disponible.
  • Membresías — todos los planes de membresía que están a la vez activos y marcados como vendibles en línea, con un botón Comprar en cada uno.
  • Productos — tu catálogo de retail (productos activos con stock disponible), con un botón Comprar en cada uno. No hay carrito — cada clic en Comprar inicia su propia compra de una unidad de ese producto.

Nunca muestra listas de participantes ni información de contacto de instructores — solo lo que un visitante podría razonablemente ver o hacer desde tu sitio web público.

Reservar o comprar requiere una cuenta​

Explorar todas las pestañas siempre es público — no se necesita inicio de sesión. En el momento en que un visitante hace clic en Reservar, Unirse a la lista de espera, Comprar (membresía) o Comprar (producto), se abre un modal de inicio de sesión/registro si aún no ha iniciado sesión. El registro solo pide un correo, una contraseña y un nombre completo; iniciar sesión o registrarse completa automáticamente la acción original — el visitante nunca tiene que hacer clic dos veces. Esta sesión existe solo en la memoria de la pestaña del navegador: actualizar la página, o cerrar y volver a abrir el widget, vuelve a cerrar la sesión del visitante (una elección deliberada — el widget nunca almacena una sesión en localStorage ni en una cookie, ya que se ejecuta dentro de un iframe aislado en una página que Agon no controla).

Reservar una clase o una cita descuenta un crédito de membresía exactamente igual que en la aplicación móvil. Comprar una membresía o un producto abre la compra alojada de Stripe en una nueva pestaña del navegador (no dentro del widget) — el visitante completa el pago ahí, y esa pestaña muestra una confirmación sencilla de éxito/cancelación y se puede cerrar una vez que ha terminado.

Encontrar tu fragmento de inserción​

  1. Abre la aplicación de escritorio de Agon y ve a Configuración.

  2. Haz clic en la pestaña Widget del sitio web.

  3. Copia el fragmento de inserción que se muestra ahí. Tiene este aspecto:

    <iframe
      src="https://your-tunnel-url.trycloudflare.com/widget/your-public-studio-id"
      sandbox="allow-scripts allow-forms allow-same-origin allow-popups">
    </iframe>

  4. Pega el fragmento en el bloque HTML/embed de tu sitio web, exactamente como lo copiaste — incluido el atributo sandbox. No lo quites ni lo acortes: allow-popups en particular es necesario para la pestaña de compra de Stripe descrita arriba, y el resto son los permisos mínimos que el widget necesita para ejecutarse de forma segura en tu página.

Añadirlo a tu sitio web​

Los pasos exactos dependen de tu creador de sitios web, pero el patrón es el mismo en todas partes:

  1. En tu editor de sitio web, añade un nuevo bloque de "Embed", "HTML" o "Código personalizado" a la página donde quieres que aparezca el widget.
  2. Pega el fragmento que copiaste de Configuración → Widget del sitio web.
  3. Guarda y publica la página.
  4. Visita tu sitio web en vivo y confirma que carga con el calendario de tu estudio.

Embeber una sola pestaña​

Por defecto, el fragmento embebe las cuatro pestañas con la barra de pestañas visible. Para embeber solo una — por ejemplo, solo el calendario de clases en tu página de inicio, sin barra de pestañas y sin forma de cambiar de pestaña — añade un parámetro de consulta ?widget= a la URL del src con uno de estos valores: calendar, appointments, memberships o products. Por ejemplo:

<iframe
  src="https://your-tunnel-url.trycloudflare.com/widget/your-public-studio-id?widget=calendar"
  sandbox="allow-scripts allow-forms allow-same-origin allow-popups">
</iframe>

Esto es totalmente opcional — deja el fragmento exactamente como lo copiaste de Configuración si quieres el widget completo de cuatro pestañas.

Importante: tu fragmento cambia cuando se reinicia tu backend de Agon​

La dirección de túnel de tu estudio (la parte https://...trycloudflare.com del fragmento) es temporal por diseño — se genera de nuevo cada vez que se reinicia tu backend de Agon, y la dirección antigua deja de funcionar. Esto no es un error.

Siempre que reinicies tu backend de Agon (o tu ordenador), vuelve a Configuración → Widget del sitio web, copia el nuevo fragmento y actualízalo en tu sitio web. Hasta que lo hagas, el widget de tu sitio en vivo mostrará un error a los visitantes en lugar de tu calendario. Si personalizaste el fragmento con un parámetro ?widget= (ver arriba), vuelve a añadirlo al nuevo fragmento — Configuración siempre te da la URL simple del widget completo.

Si necesitas una dirección permanente que nunca cambie, eso requiere una configuración de pago de Cloudflare Tunnel en lugar del Quick Tunnel gratuito que Agon usa por defecto — esto no es algo que Agon configure automáticamente hoy.

¿Y si algo sale mal?​

El widget muestra "Estudio no encontrado" en mi sitio web Tu fragmento de inserción está desactualizado — lo más probable es que tu backend de Agon se reiniciara y obtuviera una nueva dirección de túnel. Ve a Configuración → Widget del sitio web, copia el fragmento actual y reemplaza el que hay en tu sitio web.

El widget no muestra clases, o menos de las que espero La pestaña Calendario solo muestra clases que aún están por venir (que no han empezado ya) y que siguen en estado "programada". Las clases canceladas y las clases que ya están en el pasado no aparecen. Consulta la página Clases para confirmar que la clase está programada correctamente.

Mi creador de sitios web no me deja pegar un <iframe> o un bloque de "Código personalizado" Algunos creadores de sitios web restringen el HTML personalizado en los planes gratuitos. Comprueba el plan de tu creador de sitios web — la mayoría (Squarespace, Wix, WordPress) requieren al menos su nivel de pago de entrada para añadir código de inserción personalizado.

Un visitante dice que no pasó nada después de hacer clic en Comprar La compra de Stripe se abre en una nueva pestaña del navegador, no dentro del propio widget — el visitante puede tener un bloqueador de ventanas emergentes que lo impide, o puede no haberse dado cuenta de la nueva pestaña. Pídele que compruebe si hay una notificación de ventana emergente bloqueada, o que revise las otras pestañas abiertas de su navegador.

Un visitante se registró en el widget pero dice que no puede iniciar sesión en la aplicación móvil Debería poder — registrarse a través del widget crea el mismo tipo de cuenta de cliente que registrarse a través de la aplicación móvil, usando el correo y la contraseña que introdujo.

El widget se ve roto o sin estilos en mi sitio Asegúrate de haber copiado todo el fragmento, incluido el atributo sandbox, y de no haber editado por accidente la URL del src. Si la dirección de túnel cambió desde la última vez que la copiaste, vuelve a copiar un fragmento nuevo de Configuración → Widget del sitio web.

Páginas relacionadas​