Usar o design do seu site

O que é

O seu site lista as aulas, os preços e os professores com as fontes, os cartões e os botões dele. Quando o aluno toca em Reservar no seu site, o agendamento do elastudio abre por cima da página: login, pagamento e a reserva, sem sair do seu site. Se você quer blocos prontos para colar, sem designer, veja Colocar as reservas no seu próprio site.

Isso pede alguém que edite o código do seu site: um web designer, um desenvolvedor ou um assistente de IA que escreva a página para você.

Pegar as instruções

1. Abra Configurações (a engrenagem no fim do menu) e, em O que os alunos veem, escolha Site.
2. Em Como os alunos agendam, escolha O design do seu próprio site.
3. Em Adicione o endereço do seu site, digite o endereço em Endereço do site e toque em Adicionar site. O agendamento só abre nos sites da lista.
4. Toque em Copiar instruções para o seu web designer ou assistente de IA. O texto já vem com os endereços do seu estúdio. Ver as instruções mostra o texto antes.
5. Mande para o seu designer, ou cole no seu assistente de IA junto com o jeito que você quer a página.

O que as instruções dizem

O texto copiado traz os endereços do seu estúdio no lugar dos de baixo.

1. Ler os dados. Os dados públicos do estúdio são JSON simples, sem chave e sem cookies, e qualquer site pode ler:
   • Agenda: https://elastudio.app/SEU-ESTUDIO/api/public/schedule?from=2026-10-13&to=2026-10-26&lang=pt-BR (até 62 dias). Cada aula tem id, startsAt e endsAt (UTC), title, teacher (id, name, photoUrl), location, room, spotsLeft e bookingState (open, full_waitlist, full, not_open, closed, started, cancelled, no_book).
   • Preços: .../api/public/products?lang=pt-BR. Cada um tem id, name, description, price (amount em centavos, currency), credits, validity. Responde 404 enquanto a página de Preços está desligada.
   • Eventos: .../api/public/events?lang=pt-BR. Professores: .../api/public/teachers?lang=pt-BR. Sobre o estúdio: .../api/public/about?lang=pt-BR (404 enquanto essa página está desligada). O estúdio (nome, fuso horário, moeda, idiomas, páginas ligadas): .../api/public/studio.
   • Mostre os horários no fuso do estúdio e divida os valores por 100 antes de formatar como dinheiro.
2. Carregar o agendamento uma vez. Coloque a linha do script das instruções no head da página e pelo menos um elemento de agendamento na página, por exemplo <els-sign-in></els-sign-in> no cabeçalho. Sem nenhum elemento, as telas não abrem.
3. Abrir o agendamento pelos seus botões mudando o fragmento do endereço, por exemplo location.hash = "#els=/class/" + id + "?book=1", ou com links simples:

Rota	Abre
#els=/class/<id da aula>	A aula, com Reservar
#els=/class/<id da aula>?book=1	Direto a reserva da aula
#els=/pricing	Os seus preços
#els=/buy/<id do pacote>	A compra de um pacote ou plano
#els=/events/<id do evento>	Um evento com os ingressos
#els=/teachers/<id do professor>	A página de um professor
#els=/private	O pedido de aula particular
#els=/about	Sobre o estúdio
#els=/account	A conta do aluno (pede login antes, se preciso)

4. Um plano B. Se o script não carregar, coloque um link para a sua página no elastudio, por exemplo https://elastudio.app/SEU-ESTUDIO/class/<id> ou .../pricing.
5. Segurança. Monte a página com createElement e textContent; nunca coloque os dados em innerHTML. Use só imagens https e não guarde dados de alunos.

Bom saber

• O endereço do seu site precisa estar na lista de permitidos (aba Configurações, Sites que podem mostrar a sua agenda); em outro endereço o agendamento não carrega.
• As telas de agendamento usam o seu Tema, então ajuste o Tema com as cores e fontes do seu site.
• Não há outro acesso para desenvolvedores: os dados públicos acima e as telas de agendamento são o que o elastudio oferece hoje.

Agendamento num endereço do seu próprio site

Quer o site de agendamento inteiro num endereço como seuestudio.com.br/agenda, como se fosse parte do seu site? A gente configura com você, no plano Pro. Escreva para support@elastudio.app. Veja Escolher onde os links dos e-mails abrem.