Usar el diseño de tu sitio web

Qué es

Tu sitio muestra tus clases, tus precios y tus profesores con sus propias fuentes, tarjetas y botones. Cuando un alumno toca Reservar en tu sitio, la reserva de elastudio se abre sobre tu página: inicio de sesión, pago y la reserva en sí, sin salir de tu sitio. Si prefieres bloques que puedas pegar sin un diseñador, consulta Agregar las reservas a tu propio sitio web.

Para esto necesitas a alguien que edite el código de tu sitio web: un diseñador web, un desarrollador o un asistente de IA que escriba la página por ti.

Obtener las instrucciones

1. Abre Configuración (el engranaje al final del menú) y, en Lo que ven los alumnos, elige Sitio web.
2. En Cómo reservan los alumnos, elige El diseño de tu propio sitio web.
3. En Agrega la dirección de tu sitio web, escribe la dirección de tu sitio en Dirección del sitio web y elige Agregar sitio web. La reserva solo se abre en los sitios web de la lista.
4. Elige Copiar instrucciones para tu diseñador web o asistente de IA. El texto ya trae las direcciones de tu estudio. Ver las instrucciones te lo muestra antes.
5. Envíalo a tu diseñador, o pégalo en tu asistente de IA junto con cómo quieres que se vea la página.

Qué dicen las instrucciones

El texto copiado trae las direcciones de tu estudio en lugar de las de abajo.

1. Leer los datos. Los datos públicos de tu estudio son JSON simple, sin clave y sin cookies, y cualquier sitio web puede leerlos:
   • Horario: https://elastudio.app/TU-ESTUDIO/api/public/schedule?from=2026-10-13&to=2026-10-26&lang=es (hasta 62 días). Cada clase tiene id, startsAt y endsAt (UTC), title, teacher (id, name, photoUrl), location, room, spotsLeft y bookingState (open, full_waitlist, full, not_open, closed, started, cancelled, no_book).
   • Precios: .../api/public/products?lang=es. Cada uno tiene id, name, description, price (amount en centavos, currency), credits, validity. Responde 404 mientras la página de Precios está desactivada.
   • Eventos: .../api/public/events?lang=es. Profesores: .../api/public/teachers?lang=es. Sobre el estudio: .../api/public/about?lang=es (404 mientras esa página está desactivada). El estudio en sí (nombre, zona horaria, moneda, idiomas, páginas activadas): .../api/public/studio.
   • Muestra los horarios en la zona horaria de tu estudio y divide los montos entre 100 antes de darles formato de dinero.
2. Cargar la reserva una vez. Pon la línea del script de las instrucciones en el head de la página y al menos un elemento de reserva en la página, por ejemplo <els-sign-in></els-sign-in> en el encabezado. Sin ningún elemento, las pantallas de reserva no pueden abrirse.
3. Abrir la reserva desde tus propios botones cambiando el fragmento de la dirección, por ejemplo location.hash = "#els=/class/" + id + "?book=1", o con enlaces simples:

Ruta	Abre
#els=/class/<id de la clase>	La clase, con Reservar
#els=/class/<id de la clase>?book=1	Directo a la reserva de esa clase
#els=/pricing	Tus precios
#els=/buy/<id del producto>	El pago de un paquete o una membresía
#els=/events/<id del evento>	Un evento con sus entradas
#els=/teachers/<id del profesor>	La página de un profesor
#els=/private	La solicitud de clase privada
#els=/about	Sobre el estudio
#els=/account	La cuenta del alumno (pide iniciar sesión antes, si hace falta)

4. Un plan B. Si el script no carga, enlaza a tu página de elastudio, por ejemplo elastudio.app/TU-ESTUDIO/class/<id> o .../pricing.
5. Seguridad. Arma la página con createElement y textContent; nunca pongas los datos en innerHTML. Usa solo imágenes https y no guardes datos de los alumnos.

Bueno saber

• La dirección de tu sitio web tiene que estar en la lista de permitidos (pestaña Configuración, Sitios web que pueden mostrar tu horario); en cualquier otra dirección la reserva no carga.
• Las pantallas de reserva usan tu Tema, así que ajústalo con los colores y las fuentes de tu sitio.
• No hay otro acceso para desarrolladores: los datos públicos de arriba y las pantallas de reserva son lo que elastudio ofrece hoy.

Reservas en una dirección de tu propio sitio

¿Quieres todo el sitio de reservas en una dirección como tuestudio.com/agenda, como si fuera parte de tu sitio? Lo configuramos contigo, en el plan Pro. Escribe a support@elastudio.app. Consulta Elegir dónde se abren los enlaces de los correos.