Como adicionar o widget de reservas Schedito a um website personalizado
Um website personalizado pode utilizar o Schedito diretamente através de três elementos frontend: uma ligação CSS partilhada, um script JavaScript partilhado e um DIV HTML específico do calendário.
Carregue o CSS e o JavaScript uma vez no âmbito adequado da aplicação ou página e, depois, coloque um DIV de widget Schedito onde cada calendário de reservas deve ser apresentado.
Antes de editar o seu website
Um calendário Schedito configurado
Configure os serviços, recursos e disponibilidade que os clientes devem poder reservar.
Acesso ao seu código frontend
Precisa de poder adicionar uma folha de estilos, JavaScript e marcação HTML ao website ou aplicação.
Os três trechos do Schedito
Abra a área de integração no Schedito e mantenha a ligação CSS atual, o script JavaScript e o DIV específico do calendário prontos para copiar.
1. Compreenda a integração em três partes
O painel Schedito fornece três elementos independentes:
Ligação CSS — fornece os estilos do widget.
Script JavaScript — inicializa e executa os widgets Schedito.
DIV do widget — identifica a organização e o calendário público de reservas e define o local de apresentação.
O CSS e o JavaScript são recursos partilhados. O DIV é específico do calendário apresentado.
CSS do Schedito — uma vez
DIV específico do calendário
JavaScript do Schedito — uma vez
2. Carregue a folha de estilos do Schedito uma vez
Copie o <link> CSS mostrado pelo seu painel Schedito e adicione-o ao <head> do documento ou à camada normal da sua aplicação para carregar folhas de estilos.
Se todo o website puder conter widgets Schedito, carregue-o globalmente. Se as reservas existirem apenas num bundle ou rota dedicados, limite-o a esse âmbito.
Não adicione uma nova cópia da mesma folha de estilos para cada DIV de calendário.
3. Coloque o DIV do widget específico do calendário
Copie o DIV HTML do calendário que pretende publicar e insira-o no template, componente ou página onde a interface de reservas deve aparecer.
A marcação contém valores como data-organization-id e data-calendar-public-id. Utilize os valores exatos gerados pelo Schedito para esse calendário.
Se necessário, também pode utilizar atributos opcionais suportados, como o idioma do widget.
Local do calendário
<div class="schedito-widget"
data-organization-id="..."
data-calendar-public-id="...">
</div>Utilize os valores exatos fornecidos pelo seu painel Schedito.
4. Carregue o JavaScript do Schedito uma vez
Copie o elemento <script> atual mostrado pelo Schedito e adicione-o aos seus scripts frontend normais, normalmente perto do fim do documento antes de </body>.
Se existirem vários calendários na mesma página ou na aplicação, normalmente partilham este único script.
Evite adicionar tags de script idênticas junto de cada DIV de widget.
Utilizar vários calendários Schedito
Carregue o CSS e o JavaScript partilhados uma vez e, depois, adicione um DIV de widget diferente para cada calendário ou local de reservas.
Isto funciona quer vários calendários apareçam numa página, quer calendários diferentes apareçam em páginas separadas.
Mantenha os identificadores da organização e do calendário específicos de cada DIV. Não duplique desnecessariamente as tags dos recursos partilhados.
Partilhado
JavaScript do Schedito
Por calendário
Calendário B → DIV B
Calendário C → DIV C
Utilizar o Schedito em frontends dinâmicos ou de página única
Se a sua aplicação apresentar o DIV do Schedito como parte do documento HTML inicial, a integração padrão é normalmente suficiente.
Se o contentor do widget for inserido mais tarde por routing no cliente, hidratação ou outro mecanismo de apresentação dinâmica, teste se a inicialização do Schedito é executada depois de o contentor existir.
Não assuma que injetar repetidamente o script do Schedito é a solução correta. Mantenha o script partilhado carregado uma única vez e verifique o comportamento de inicialização da versão atual do widget no ciclo de vida da sua aplicação.
5. Teste o fluxo completo de reservas
Verifique a apresentação, a disponibilidade, a criação da reserva e o comportamento responsivo — não apenas se o JavaScript foi carregado.
Carregue a página pública
Confirme que a folha de estilos e o script carregam corretamente e que o calendário substitui o DIV do widget no website público real.
Conclua uma reserva de teste
Selecione um serviço, data e hora e conclua uma reserva de teste real. Verifique o registo resultante no Schedito.
Verifique os contentores responsivos
Teste o layout principal com larguras de computador, tablet e telemóvel. Certifique-se de que o seu próprio CSS não limita desnecessariamente o widget.
Resolução de problemas do widget de reservas para website personalizado
Verifique de forma independente os três elementos: a folha de estilos do Schedito, o JavaScript e o DIV específico do calendário.
Utilize as ferramentas de programador do navegador para procurar pedidos de recursos com falha, erros de JavaScript e chamadas API falhadas.
Compare os valores data-organization-id e data-calendar-public-id com o trecho atual mostrado no Schedito.
Verifique templates partilhados, bundles e componentes individuais. Mantenha os recursos comuns num único âmbito adequado e remova inclusões duplicadas.
A integração frontend provavelmente está a funcionar. Verifique a configuração do Schedito: serviço, recursos necessários, disponibilidade recorrente, exceções, reservas existentes, capacidade e calendários externos ligados.
Inspecione os seus próprios contentores principais, regras de grid ou flex, max-width, padding e definições de overflow. O layout envolvente da aplicação pode limitar um widget que, por si só, é responsivo.
A sua aplicação pode estar a inserir o DIV do widget depois de o Schedito ter sido inicializado. Reveja quando o contentor entra no DOM e como a inicialização do widget deve ser acionada no ciclo de vida do seu frontend.
Continue a desenvolver a sua aplicação. Deixe o Schedito gerir as reservas.
Depois de integrar o widget, continue a gerir serviços, recursos, disponibilidade, capacidade, sincronização de calendários e estilos do widget no Schedito.
Começar grátisVisão geral das reservas para website personalizado
Explorar todos os guias Schedito · Personalização do widget · Sincronização com o Google Calendar