> ## Documentation Index
> Fetch the complete documentation index at: https://docs.onstudio.mx/llms.txt
> Use this file to discover all available pages before exploring further.

# Personaliza la Página Web y marca de tu estudio hoy

> Configura el logo, el color de marca, el slug y los dominios personalizados que identifican la Página Web pública de tu estudio en línea.

# Página Web y marca

Usa esta guía cuando necesites revisar la identidad pública del estudio o confirmar que el enlace de la Página Web sea el correcto.

## Antes de empezar

* Necesitas permiso de configuración para abrir `Sitio Web`.
* Ten a la mano el logo en JPEG o PNG menor a 5 MB.
* Confirma el nombre corto y el color de marca que quieres publicar.
* Los cambios de esta guía afectan la Página Web; no actualizan por sí solos la app móvil ni el wallet pass.

## Pasos

1. En el menú lateral, ve a `Sitio Web`.
2. Revisa el `Logo del estudio`, el `Color de marca` y el `Slug del sitio web`.
3. Confirma que el slug disponible sea el que quieres mostrar en el enlace público.
4. Guarda los cambios y abre la Página Web pública para validar el resultado.

## Encabezado y contraste del logo

1. En la barra `Editor del sitio` de la Página Web, usa `Configuración`. Se abre la pestaña `Tema`; localiza `Marca`.
2. Sube el archivo en `Logo` y elige `Glass` en `Estilo del encabezado` si quieres usar ese acabado.
3. Si aparece `Este logo podría perder contraste sobre algunas secciones. Revisa tu sitio antes de publicarlo.`, revisa la vista previa y las secciones de la Página Web antes de guardar.
4. Usa `Mostrar en Encabezado` para elegir `Logo y Nombre`, `Solo Logo` o `Solo Nombre`.
5. Presiona `Guardar` y revisa la Página Web publicada.

## Fondo claro u oscuro

1. En la barra `Editor del sitio`, usa `Configuración`. En la pestaña `Tema`, localiza `Fondo de página`.
2. En `Modo`, elige `Claro` u `Oscuro`.
3. En `Estilo`, elige `Sólido` o `Gradiente sutil`.
4. Si eliges `Gradiente sutil`, ajusta `Intensidad` con `Baja` o `Media`.
5. Presiona `Guardar`. Revisa la vista previa y la Página Web publicada.

El modo que guarda el estudio controla la apariencia. La preferencia de color del navegador o del dispositivo del cliente no lo reemplaza. `Oscuro` adapta el fondo, el texto, las tarjetas, los campos, los bordes y los estados de éxito, aviso y error. El ajuste también llega al encabezado público y a los flujos de acceso, `Completa tu perfil`, `Carta responsiva`, `Comprar tarjeta de regalo`, `Acceso denegado` y `Tienda en preparación`.

Los colores primario y secundario de la marca conservan sus colores de texto configurados. OnStudio no recolorea el archivo del logo. Si el análisis del logo indica que necesita más contraste, OnStudio agrega una base clara u oscura en el encabezado público, el inicio de sesión y `Tienda en preparación`.

## Tipografía con Google Fonts

1. En la barra `Editor del sitio`, usa `Configuración`. En la pestaña `Tema`, localiza `Fuente`.
2. Abre el selector y escribe el nombre en `Buscar en Google Fonts…`, o filtra con `Todas`, `Sans serif`, `Serif`, `Exhibición`, `Escritura` o `Monoespaciada`.
3. Selecciona una fuente para aplicarla al tema y presiona `Guardar`.
4. Cuando un bloque tenga su propio campo `Fuente`, usa `Usar fuente del tema` para heredar la tipografía general o elige una fuente distinta. Cada página permite hasta dos fuentes adicionales en sus bloques.
5. Revisa la vista previa y la Página Web publicada para confirmar que títulos, textos y secciones usan la tipografía esperada.

Si el catálogo completo no está disponible, el selector mantiene opciones de respaldo y muestra `El catálogo completo no está disponible temporalmente.` o `No pudimos cargar el catálogo completo.`. Una fuente guardada que ya no aparece en el catálogo se conserva como `Fuente heredada` hasta que elijas otra.

## Crear páginas y agregar secciones iniciales

1. En el `Editor del Sitio`, abre `Secciones`. El editor inicia en esta vista y muestra `Inicio rápido` expandido.
2. Elige entre `Hero`, `Reservas`, `Paquetes`, `Entrenadores` y `App móvil`. Cada opción incluye una vista previa y se puede arrastrar a la página.
3. Ajusta el contenido y los estilos de la sección insertada, guarda los cambios y revisa la vista previa antes de publicar.
4. Si abres `Plantillas`, úsalas sólo como referencia: las tarjetas muestran `Próximamente` y todavía no se pueden seleccionar.
5. Al usar `Crear nueva página`, completa `Título de la página`, revisa el `Slug de URL` y activa `Establecer como página de inicio` sólo si quieres reemplazar la página inicial actual. La sección `Plantillas premium` también muestra opciones `Próximamente`; `Crear página` genera por ahora una página en blanco.

Los sitios nuevos reciben una página inicial publicada con las secciones Hero, Reservas, Paquetes, Entrenadores y App móvil. Este contenido inicial usa el nombre y el color del estudio cuando están disponibles. Las páginas existentes conservan sus secciones guardadas.

## Calendario Wellness

1. En el `Editor del Sitio`, abre la sección de calendario y, en `Estilo visual`, elige `Wellness / tabla semanal`.
2. Ajusta `Días visibles` entre uno y siete y define `Clases por día`.
3. Usa `Mostrar avatar de entrenador`, `Mostrar cupo` y `Mostrar disciplina` para controlar los datos visibles en cada clase.
4. Si necesitas adaptar el contraste, configura los controles de fondo, selector de días, tarjetas y botones, como `Fondo del día activo`, `Color del nombre de la clase`, `Fondo del botón Reservar` y `Fondo del botón Lista de espera`.
5. Guarda y comprueba en la Página Web los días, las clases y los estados de reserva. Usa las flechas `Semana anterior` y `Semana siguiente` para revisar la navegación semanal.

El calendario inicia en la semana actual del estudio, de lunes a domingo, y permite avanzar únicamente a la semana siguiente. Al cambiar de semana selecciona el primer día visible; `Días visibles` sigue limitando el selector entre uno y siete días. Si el día seleccionado no tiene clases, conserva el estado vacío configurado.

## Dominios personalizados

1. Dentro de `Sitio Web`, abre la tarjeta `Dominios Personalizados`.
2. Escribe el hostname y usa `Agregar dominio`.
3. Si la tarjeta queda en `Pendiente`, copia los campos de `Registros que debes agregar` con `Copiar tipo`, `Copiar nombre` y `Copiar valor`, y pégalos en tu proveedor DNS.
4. Cuando los registros ya propagaron, vuelve a OnStudio y usa `Verificar`.
5. Cuando el dominio aparezca como `Verificado`, usa `Establecer como Principal` si quieres que sea la URL principal del sitio.
6. Para volver a la URL gratuita, busca la tarjeta `Subdominio de OnStudio` y usa `Establecer como principal`. Cuando ningún dominio personalizado es principal, esa tarjeta muestra `Principal`.

No puedes eliminar el dominio personalizado principal. Primero establece como principal el `Subdominio de OnStudio` u otro dominio verificado; después se habilita `Eliminar` para el dominio anterior.

## Meta Pixel

1. Dentro de `Sitio Web`, abre la pestaña `Marketing` del `Editor del Sitio`.
2. En `ID o código de Meta Pixel`, pega el ID numérico o el código completo de Meta Pixel.
3. Guarda con `Guardar`.
4. Si necesitas quitarlo, usa `Limpiar`.

## Qué cambia para el cliente

* Cambia la forma en que el cliente reconoce el estudio en la Página Web.
* La opción `Fuente` del tema cambia la tipografía general. Los bloques configurados con `Usar fuente del tema` heredan ese cambio; los bloques con una fuente propia conservan su ajuste.
* Las secciones de `Inicio rápido` permiten publicar una portada, el calendario de reservas, los paquetes, el equipo y los enlaces de descarga de la app móvil sin comenzar cada bloque desde cero.
* En `Wellness / tabla semanal`, el cliente puede consultar la semana actual y la siguiente con las flechas `Semana anterior` y `Semana siguiente`.
* El calendario `Wellness / tabla semanal` muestra la disponibilidad real y las acciones `Reservar`, `Lista de espera`, `Cupo lleno` o `Lista de espera llena`. Si el cliente ya reservó o está en espera, muestra `Reservada` o `En lista de espera` y conserva el acceso al detalle.
* Desactivar `Mostrar cupo` oculta los conteos generales, pero conserva el estado personal `Tu lugar está reservado` cuando corresponde.
* Con el estilo `Glass`, el texto y los controles del encabezado cambian de contraste según la sección que queda debajo al desplazarse. El logo se muestra como fue cargado, sin recolorearlo.
* El modo `Claro` u `Oscuro` se aplica a las superficies de la Página Web y a los flujos del cliente que usan el tema del estudio. No agrega un selector de tema para el cliente.
* En la Página Web publicada, el encabezado conserva los enlaces configurados en el editor y agrega los accesos `Paquetes` y `Reservar`. También muestra `Inicia Sesión` o el menú de la cuenta, según corresponda. En pantallas pequeñas, esos accesos pasan al menú de navegación sin duplicar `Paquetes` si ya estaba configurado.
* El slug define el enlace público del sitio.
* Un dominio `Principal` y `Verificado` reemplaza el subdominio gratuito como URL principal del sitio.
* Al establecer el `Subdominio de OnStudio` como principal, los enlaces públicos nuevos vuelven a usar la URL gratuita. Los dominios personalizados verificados permanecen configurados y pueden seguir abriéndose directamente hasta que los elimines.
* Si configuras `Meta Pixel`, OnStudio envía `PageView` en las páginas públicas del sitio y eventos seguros del embudo: `ViewContent`, `InitiateCheckout`, `Purchase` y `Schedule` para vistas de paquetes, inicios de checkout, compras confirmadas y reservas confirmadas.
* `Purchase` incluye valor y moneda cuando el backend confirma la compra.
* OnStudio no carga `PageView` en `Portal`, `Checkout`, rutas de edición, URLs con `preview` ni en la URL sensible de reserva `/booking/:sessionId`; los eventos de conversión que salen del checkout o de la confirmación usan rutas seguras y no incluyen IDs internos.
* Si reutilizas el mismo logo o color en otras superficies, esos cambios no se copian automáticamente a la app móvil ni al wallet pass.

## Qué revisar antes de contactar soporte

* El logo está en JPEG o PNG y pesa menos de 5 MB.
* Si elegiste `Glass`, ya revisaste las secciones donde el editor advirtió que el logo podría perder contraste.
* Si cambiaste `Modo`, revisa los textos, campos, tarjetas y mensajes de estado en la vista previa y en la Página Web publicada.
* Si cambiaste `Fuente`, confirma que la familia elegida aparezca en el selector y que la página no rebase el límite de dos fuentes adicionales. Si lo rebasa, OnStudio muestra `Solo puedes usar 2 fuentes adicionales por página.`
* El slug está disponible y escrito sin errores.
* El color de marca tiene suficiente contraste con el fondo.
* Si agregaste un dominio, la tarjeta ya muestra `Verificado` o sigue mostrando los registros DNS pendientes que faltan.
* Si no puedes eliminar un dominio personalizado, confirma que ya no muestre `Principal`; usa primero `Establecer como principal` en el subdominio de OnStudio u otro dominio verificado.
* Si agregaste `Meta Pixel`, el campo `ID o código de Meta Pixel` quedó guardado sin mostrar el error `Ingresa un ID de Meta Pixel válido o pega el código completo de Meta.`.
* Ya recargaste la Página Web pública después de guardar.

## Cuándo contactar soporte

* Si la Página Web sigue mostrando la marca anterior después de guardar y recargar.
* Si el slug aparece ocupado aunque ya confirmaste que debería estar libre.
* Si el dominio no cambia a `Verificado` después de copiar los registros correctos y volver a `Verificar`.
* Si `Sitio Web` no abre el editor esperado o no te deja publicar los cambios.
