Como adicionar o widget de reservas Schedito ao Webflow
O Webflow funciona especialmente bem com a integração em três partes do widget Schedito. Carregue a folha de estilos uma vez, carregue o JavaScript uma vez e depois coloque o DIV do widget específico do calendário exatamente onde a interface de reservas deve aparecer.
Este guia mostra a configuração recomendada utilizando Webflow Custom Code para os recursos partilhados e um elemento Code Embed para o próprio calendário de reservas.
Antes de abrir o Webflow
Um calendário Schedito configurado
Configure os serviços, recursos e disponibilidade que os clientes devem poder reservar.
Acesso de edição ao Webflow
Precisa de acesso ao projeto Webflow e à funcionalidade de código personalizado disponível para o website ou página.
Os três elementos Schedito
Abra o código do widget no Schedito e mantenha prontos para copiar a ligação CSS, o script JavaScript e o DIV HTML específico do calendário.
1. Mantenha os três elementos de integração separados
O painel Schedito fornece três partes de código frontend:
Ligação CSS — fornece os estilos do widget.
Script JavaScript — inicializa e opera os widgets Schedito.
DIV do widget — identifica a organização e o calendário público de reservas e marca a posição onde esse calendário deve ser apresentado.
O Webflow permite colocar cada um destes elementos no local mais natural. O CSS e o JavaScript partilhados são carregados uma vez, enquanto cada local de reserva recebe o seu próprio DIV específico do calendário.
Ligação CSS do Schedito
JavaScript do Schedito
DIV do widget específico do calendário
2. Adicione a ligação CSS do Schedito ao código Head do Webflow
No seu painel Schedito, copie a ligação CSS <link>.
Se o Schedito puder ser usado em várias páginas, adicione-a ao código personalizado Head do website para que a folha de estilos fique disponível em todo o site.
Se o Schedito for necessário apenas numa página, pode usar a secção de código personalizado Head dessa página.
Não copie a folha de estilos para cada Code Embed individual. Uma folha de estilos com o âmbito correto é suficiente.
3. Adicione o JavaScript do Schedito ao código Footer
Copie o <script> JavaScript a partir do painel Schedito.
Para a configuração normal do Schedito, coloque-o no código Footer do Webflow, que o insere antes da tag de fecho </body>, depois do conteúdo da página.
Tal como acontece com a folha de estilos, escolha o âmbito correto: ao nível de todo o website se o Schedito for usado em várias páginas, ou específico da página se as reservas existirem apenas em páginas selecionadas.
O script deve normalmente ser carregado uma vez, e não repetido dentro de cada embed de calendário.
4. Coloque o DIV do calendário num Code Embed
Abra a página onde as reservas devem aparecer e adicione um elemento Code Embed do Webflow na posição adequada do design.
No Schedito, copie apenas o DIV HTML do widget específico do calendário e cole-o no editor do Code Embed.
O DIV contém valores como data-organization-id e data-calendar-public-id. Use os valores gerados para o calendário que realmente pretende publicar.
Como o CSS e o JavaScript partilhados já estão carregados separadamente, o próprio embed permanece pequeno e específico do calendário.
Os recursos Schedito devem ser globais ou específicos da página?
Use código personalizado ao nível de todo o website se o Schedito aparecer em várias páginas, páginas de serviço ou layouts reutilizáveis. O CSS e o JavaScript partilhados são então carregados uma vez através da configuração global do website.
Use código personalizado específico da página se o Schedito existir apenas numa ou em poucas páginas e não quiser carregar os seus recursos noutras páginas.
Em ambos os casos, evite adicionar repetidamente a mesma folha de estilos ou JavaScript para DIVs de calendário individuais.
Usar o Schedito com Webflow CMS ou componentes
Os Code Embeds do Webflow podem referenciar valores dinâmicos de itens CMS, propriedades de componentes, definições de idioma e definições de página.
Isto permite padrões avançados úteis quando layouts de reserva semelhantes precisam de valores de calendário diferentes. Por exemplo, um layout de serviço reutilizável pode eventualmente receber um identificador de calendário a partir de conteúdo estruturado do Webflow, em vez de exigir um embed escrito manualmente em cada página.
Para uma primeira instalação normal, mantenha as coisas simples: use exatamente o DIV copiado do Schedito. Introduza ligações dinâmicas apenas quando tiver uma necessidade clara de conteúdo reutilizável e compreender como esses valores são geridos.
Comece de forma simples
Configuração padrão
Copie o DIV exato do calendário a partir do Schedito.
Configuração reutilizável avançada
Use o Webflow CMS ou propriedades de componentes para fornecer dinamicamente os valores selecionados.
5. Publique e teste o fluxo completo de reservas
Verifique se os recursos carregam, o calendário é apresentado, a disponibilidade está correta e um cliente consegue realmente concluir a reserva.
Publique e abra a página
Teste o website realmente publicado. Alguns comportamentos de código personalizado são melhor verificados depois da publicação, e não apenas dentro do Designer.
Conclua uma reserva
Selecione um serviço, data e hora e envie uma reserva de teste real. Verifique o resultado no Schedito.
Verifique os layouts responsivos
Teste o Code Embed e os contentores Webflow envolventes em larguras de desktop, tablet e telemóvel.
Widget de reservas Webflow: resolução de problemas
Verifique as três partes de forma independente: a ligação CSS do Schedito no código Head, o JavaScript no código Footer e o DIV correto do calendário no Code Embed.
Verifique nas ferramentas de programador do navegador pedidos de recursos falhados, erros JavaScript ou pedidos API que não terminem com sucesso.
O Webflow nem sempre executa scripts incorporados exatamente como serão executados no website publicado. Publique o projeto e teste a página pública real antes de concluir que a integração está avariada.
A integração com o Webflow provavelmente está a funcionar. Verifique a configuração do Schedito: serviço, recursos necessários, disponibilidade recorrente, exceções para datas específicas, reservas existentes, capacidade e compromissos de calendários externos ligados.
Verifique tanto o código personalizado global como o código ao nível da página. Se o mesmo script ou folha de estilos Schedito existir nos dois locais, remova a duplicação desnecessária e mantenha-o no âmbito adequado à estrutura do seu website.
Verifique o próprio Code Embed e os contentores Webflow pais. Limites de largura, colunas de grelha, definições flex, padding e regras de overflow no design envolvente podem limitar o widget mesmo quando o Schedito está a responder corretamente.
Configure a apresentação clara ou escura e as cores suportadas no Schedito. Verifique também se CSS personalizado abrangente no Webflow está a afetar inadvertidamente botões, controlos de formulário ou outros elementos do widget.
Mantenha o Webflow focado no design e o Schedito focado nas reservas
Quando a integração estiver a funcionar, continue a gerir serviços, recursos, disponibilidade, capacidade, sincronização de calendários e estilo do widget no Schedito.
Começar grátisVisão geral das reservas no Webflow
Explorar todos os guias Schedito · Personalização do widget · Sincronização com o Google Calendar