Colocar as reservas no seu próprio site

O que o aluno ganha

Os blocos de agendamento colocam a agenda, os preços e as reservas dentro do seu próprio site. O aluno abre uma aula, entra com código por e-mail ou Google, compra um pacote, paga com cartão ou Pix e reserva, tudo na sua página. Os blocos usam o seu Tema publicado.

As reservas no seu próprio site estão em todos os planos, inclusive no Free.

Onde fica

Abra Configurações (a engrenagem no fim do menu) e, em O que os alunos veem, escolha Site. A página abre na aba Como os alunos agendam, que pergunta Como você quer que os alunos agendem? com três cartões:

• Sua página no elastudio: não precisa de site; compartilhe o link ou o QR code.
• Blocos de agendamento no seu site: os passos abaixo.
• O design do seu próprio site: o seu site desenha a agenda e o agendamento abre por cima. Veja Usar o design do seu site.

Escolha Blocos de agendamento no seu site. Os passos abrem logo abaixo.

1. Adicione o endereço do seu site

1. Em Adicione o endereço do seu site, digite o endereço exato em Endereço do site, começando com https, por exemplo https://www.exemplo.com.br, sem caminho no final.
2. Toque em Adicionar site. Se o seu site abre com e sem www, cadastre os dois.

O agendamento só funciona nos endereços dessa lista. A lista completa, com Remover e uma Nota para cada endereço, fica na aba Configurações, em Sites que podem mostrar a sua agenda.

Observação: remover um site faz a agenda e as reservas pararem nesse site na hora, e quem estava conectado lá é desconectado.

2. Monte o código

1. Em Adicione o agendamento ao seu site, escolha O que mostrar: Agenda (a principal para a maioria dos sites), Uma aula, Preços, Eventos, Um evento, Conta do aluno, Botão de agendar, Botão de entrar, Aulas particulares ou Sobre o estúdio. Preços, Aulas particulares e Sobre o estúdio só aparecem enquanto a página correspondente está ligada em Páginas públicas; senão, mostram uma linha curta de “não disponível”. As aulas particulares também precisam do plano Starter ou acima.
2. Ajuste as opções, como Visual, Professor, Aula, Dias exibidos (7 a 28) e Mostrar filtros.
3. Escolha o Idioma (Seguir a página usa o idioma do seu site) e Claro ou escuro.
4. Em Versão, escolha Versão fixa (recomendada, com verificação de segurança), Sempre a mais recente ou Quadro.
5. Confira a Prévia no Celular e no Computador.

3. Cole no seu site

Toque em Copiar em Código para colar. Cole uma vez por página, onde as reservas devem aparecer. Para mais blocos na mesma página, repita só a segunda linha.

Criadores de site que bloqueiam scripts

Wix, Squarespace, WordPress.com nos planos grátis e Google Sites podem recusar código com script, ou colocar o código numa caixa que corta o conteúdo.

1. Tente primeiro com o bloco de HTML ou de incorporação do próprio criador (Wix: Incorporar código; Squarespace: bloco Código; WordPress: bloco HTML personalizado). Se a agenda aparecer, pronto.
2. Se não aparecer, escolha Quadro em Versão, copie o código de novo e cole no mesmo tipo de bloco. O acesso com Google e os pagamentos passam a abrir em outra aba.
3. No Google Sites, use Inserir, Incorporar, Incorporar código com o código do Quadro.
4. Se o seu criador não aceita nenhum dos dois, coloque um link para a sua página no elastudio: em Como os alunos agendam, Sua página no elastudio tem o link e o QR code.

Deixar com a cara do seu site

• Cores, fontes e formas vêm do Tema. Ajuste o Tema com as cores e fontes do seu site, e todos os blocos seguem, no seu site e na sua página no elastudio.
• Claro ou escuro e Visual no código valem só para aquele bloco.
• Os seus próprios botões podem abrir telas de agendamento. Com o código na página, qualquer link ou botão do seu site cujo endereço começa com #els= abre essa tela por cima da página:

O seu link	O que abre
<a href="#els=/pricing">Preços</a>	Os seus preços, com botão de compra
<a href="#els=/account">Minha conta</a>	Reservas, pacotes e pedidos do aluno (pede login antes, se preciso)
<a href="#els=/class/ID-DA-AULA?book=1">Reservar</a>	A reserva de uma aula
<a href="#els=/buy/ID-DO-PACOTE">Comprar</a>	A compra de um pacote ou plano
<a href="#els=/private">Aulas particulares</a>	O pedido de aula particular

A página precisa de pelo menos um bloco de agendamento para esses links funcionarem; um Botão de entrar no cabeçalho já basta. Para achar o id de uma aula ou de um pacote, escolha Botão de agendar ou Uma aula em O que mostrar, selecione o item e copie o id do código.

O que não dá: mudar o estilo de cada bloco com o CSS do seu site, porque os blocos são isolados dos estilos do site, para o site não conseguir quebrá-los. Para montar a agenda inteira com o design do seu site, veja Usar o design do seu site.

Se o seu site tem uma política de segurança

A maioria dos sites não precisa disso. Se o seu site envia uma Content Security Policy, copie para ela os endereços que aparecem em Se o seu site tem uma política de segurança, na aba Configurações. Se a política bloquear o formulário de pagamento, o aluno paga na própria página do Stripe e volta para o seu site.