Agregar las reservas a tu propio sitio web

Lo que reciben los alumnos

Los bloques de reserva ponen tu horario, tus precios y las reservas dentro de tu propio sitio web. Los alumnos abren una clase, inician sesión con un código por correo o con Google, compran un paquete, pagan con tarjeta y reservan, todo en tu página. Los bloques usan tu Tema publicado.

Las reservas en tu propio sitio web están en todos los planes, incluido Free.

Dónde encontrarlo

Abre Configuración (el engranaje al final del menú) y, en Lo que ven los alumnos, selecciona Sitio web. La página se abre en la pestaña Cómo reservan los alumnos, que pregunta ¿Cómo quieres que reserven los alumnos? con tres tarjetas:

• Tu página en elastudio: no necesitas sitio web; comparte el enlace o el código QR.
• Bloques de reserva en tu sitio web: los pasos de abajo.
• El diseño de tu propio sitio web: tu sitio dibuja el horario por su cuenta y la reserva se abre encima. Consulta Usar tu propio diseño.

Elige Bloques de reserva en tu sitio web. Sus pasos se abren debajo.

1. Agrega la dirección de tu sitio web

1. En Agrega la dirección de tu sitio web, escribe la dirección exacta en Dirección del sitio web, empezando por https, por ejemplo https://www.example.com, sin ruta.
2. Elige Agregar sitio web. Si tu sitio tiene las dos versiones, con y sin www, agrega ambas.

Las reservas funcionan solo en las direcciones de esta lista. La lista completa, con Quitar y una Nota para cada dirección, está en la pestaña Configuración, en Sitios web que pueden mostrar tu horario.

Nota: Quitar un sitio web detiene al instante el horario y las reservas en ese sitio, y los alumnos que habían iniciado sesión allí quedan desconectados.

2. Arma el código

1. En Agrega las reservas a tu sitio web, elige Qué mostrar: Horario (el principal para la mayoría de los sitios), Una clase, Precios, Eventos, Un evento, Cuenta del alumno, Botón de reservar, Botón de iniciar sesión, Clases privadas o Acerca del estudio. Precios, Clases privadas y Acerca del estudio solo se muestran mientras esa página esté encendida en Páginas públicas; si no, muestran una línea corta de “no disponible”. Clases privadas también necesita el plan Starter o superior.
2. Define las opciones, como Diseño, Profesor, Clase, Días que se muestran (de 7 a 28) y Mostrar filtros.
3. Elige el Idioma (Seguir la página usa el idioma de tu sitio) y Claro u oscuro.
4. En Versión, elige Versión fija (recomendada, con un control de seguridad), Siempre la más reciente o Marco.
5. Revisa la Vista previa en Celular y en Computadora.

3. Pégalo en tu sitio

Elige Copiar en Código para pegar. Pégalo una vez en cada página donde deban aparecer las reservas. Para agregar más bloques en la misma página, repite solo la segunda línea.

Creadores de sitios que bloquean scripts

Wix, Squarespace, WordPress.com en los planes gratuitos y Google Sites pueden rechazar el código con scripts, o ponerlo en una caja que lo corta.

1. Prueba primero con el bloque de HTML o de inserción del propio creador (Wix: Embed code; Squarespace: bloque Code; WordPress: bloque Custom HTML). Si el horario se muestra, listo.
2. Si no se muestra, elige Marco en Versión, copia el código otra vez y pégalo en el mismo tipo de bloque. El inicio de sesión con Google y los pagos se abren entonces en una pestaña nueva.
3. En Google Sites, usa Insert, Embed, Embed code con el código de Marco.
4. Si tu creador no acepta ninguno de los dos, enlaza a tu página de elastudio: en Cómo reservan los alumnos, Tu página en elastudio tiene el enlace y su código QR.

(Los nombres de los bloques de Wix, Squarespace, WordPress y Google Sites aparecen aquí en inglés; en tu creador pueden estar traducidos.)

Que se vea como tu sitio

• Los colores, las fuentes y las formas vienen del Tema. Configura tu Tema con los colores y las fuentes de tu sitio web, y todos los bloques lo siguen, en tu sitio y en tu página de elastudio.
• Claro u oscuro y Diseño en el código se aplican solo a ese bloque.
• Tus propios botones pueden abrir pantallas de reserva. Con el código en la página, cualquier enlace o botón de tu sitio cuya dirección empiece con #els= abre esa pantalla encima de tu página:

Tu enlace	Lo que se abre
<a href="#els=/pricing">Precios</a>	Tus precios, con botones para comprar
<a href="#els=/account">Mi cuenta</a>	Las reservas, los paquetes y los pedidos del alumno (primero inicia sesión si hace falta)
<a href="#els=/class/CLASS-ID?book=1">Reservar</a>	La reserva de una clase
<a href="#els=/buy/PRODUCT-ID">Comprar</a>	El pago de un paquete o plan
<a href="#els=/private">Clases privadas</a>	La solicitud de una clase privada

La página necesita al menos un bloque de reserva para que estos enlaces funcionen; un Botón de iniciar sesión en tu encabezado es suficiente. Para encontrar el id de una clase o de un paquete, elige Botón de reservar o Una clase en Qué mostrar, selecciónalo y copia el id del código.

Lo que no se puede hacer: los bloques no se pueden cambiar uno por uno con tu propio CSS, porque están aislados de los estilos de tu sitio para que tu sitio no pueda romperlos. Para armar el horario completamente con el diseño de tu sitio, consulta Usar tu propio diseño.

Si tu sitio tiene una política de seguridad

La mayoría de los sitios no lo necesitan. Si tu sitio envía una Content Security Policy (política de seguridad de contenido), copia en ella las direcciones que aparecen en Si tu sitio web tiene una política de seguridad, en la pestaña Configuración. Si la política bloquea el formulario de pago, los alumnos pagan en la página del propio Stripe y vuelven a tu sitio.