Como adicionar o widget de reservas Schedito ao Squarespace
O Squarespace pode utilizar a integração recomendada do Schedito em três partes: carregar a folha de estilos partilhada uma vez, carregar o JavaScript uma vez e colocar o DIV do widget específico do calendário na página onde os clientes devem reservar.
Este guia utiliza o Header e Footer Code Injection do Squarespace para os recursos partilhados do Schedito e um Code Block para o próprio calendário de reservas.
Antes de abrir o Squarespace
Um calendário Schedito configurado
Configure os serviços, recursos e disponibilidade que os clientes devem poder reservar antes de publicar o widget.
Um plano Squarespace com Code Injection
A integração recomendada requer o Code Injection do Squarespace. Os atuais planos Core, Plus e Advanced suportam-no, tal como alguns planos antigos.
Os três elementos Schedito
Abra o código do widget no Schedito e mantenha a ligação CSS, o script JavaScript e o DIV do widget específico do calendário prontos para copiar.
1. Mantenha os três elementos do Schedito separados
O painel Schedito fornece três partes de código frontend:
Ligação CSS — fornece os estilos do widget.
Script JavaScript — carrega e executa os widgets Schedito.
DIV do widget — identifica a organização e o calendário público de reservas e marca o local onde esse calendário deve ser apresentado.
No Squarespace, o CSS e o JavaScript podem ser carregados uma vez através do Code Injection, enquanto o DIV específico do calendário pertence ao conteúdo da página.
Ligação CSS do Schedito — uma vez
JavaScript do Schedito — uma vez
DIV do widget específico do calendário
2. Adicione a ligação CSS do Schedito ao Header Code Injection
Copie a ligação CSS <link> a partir do seu painel Schedito.
Abra o Code Injection do Squarespace e cole a ligação no campo Header. O código colocado aí é adicionado ao <head> das páginas do website.
Não copie a folha de estilos para cada Code Block de reservas. Carregar a folha de estilos partilhada do Schedito uma vez é a configuração mais limpa.
3. Adicione o JavaScript do Schedito ao Footer Code Injection
Copie o <script> JavaScript fornecido pelo painel Schedito.
No painel Code Injection do Squarespace, cole-o no campo Footer.
Isto mantém o JavaScript partilhado do Schedito fora dos blocos de reservas individuais e disponibiliza-o aos DIV dos calendários apresentados no website.
Carregue-o uma vez, em vez de copiar o mesmo script para cada local de reservas.
4. Coloque o DIV do calendário num Code Block
Abra a página Squarespace onde os clientes devem reservar e adicione um Code Block na posição pretendida.
Defina o bloco como HTML e cole apenas o DIV do widget específico do calendário copiado do Schedito.
O DIV contém valores como data-organization-id e data-calendar-public-id. Certifique-se de que utiliza os valores gerados para o calendário que pretende realmente publicar.
Como o CSS e o JavaScript já são carregados separadamente, o Code Block permanece pequeno e específico desse calendário.
Verifique o seu plano Squarespace
Os Code Blocks do Squarespace podem conter HTML normal em todos os planos atuais, pelo que a colocação do próprio DIV do widget Schedito não é a limitação.
A configuração recomendada do Schedito também requer Code Injection para o JavaScript e a folha de estilos partilhados. O Squarespace disponibiliza atualmente o Code Injection nos planos Core, Plus e Advanced e em determinados planos antigos.
Se o seu plano atual não disponibilizar Code Injection, atualize o plano Squarespace antes de seguir este método de integração, em vez de tentar contornar a restrição da plataforma.
Utilizar vários calendários Schedito no Squarespace
Se várias páginas Squarespace precisarem de reservas, mantenha a ligação CSS e o JavaScript partilhados do Schedito no Code Injection apenas uma vez.
Depois, adicione um Code Block separado onde cada calendário deve aparecer e cole o DIV próprio desse calendário.
Assim, uma página de serviços, uma página de consultas e uma página de workshops podem utilizar calendários Schedito diferentes sem carregar repetidamente os mesmos recursos frontend.
Partilhado uma vez
Script JavaScript
Por local de reservas
Página B → DIV do calendário B
Página C → DIV do calendário C
5. Publique e teste o fluxo completo de reservas
Não pare quando o calendário ficar visível. Confirme a disponibilidade real e conclua uma reserva a partir do website público.
Abra a página pública
Teste a página Squarespace publicada. Confirme que o CSS, o JavaScript e o DIV do calendário se combinam numa interface de reservas funcional.
Conclua uma reserva
Selecione um serviço, data e hora e conclua uma reserva de teste real. Verifique o resultado no Schedito.
Verifique a disposição em dispositivos móveis
Teste em dispositivos móveis e também em computador. Certifique-se de que a secção e o bloco do Squarespace em torno do widget fornecem largura útil suficiente.
Resolução de problemas do widget de reservas Squarespace
Verifique de forma independente as três partes da integração: a ligação CSS no Header Code Injection, o JavaScript no Footer Code Injection e o DIV específico do calendário no Code Block.
Confirme também o ID da organização e o ID público do calendário e consulte as ferramentas de programador do navegador para detetar pedidos de recursos ou API com falha.
Verifique o seu plano de faturação do Squarespace. O Code Injection é uma funcionalidade premium e não está disponível no atual plano Basic.
Se o website estiver no plano Basic, a integração recomendada do Schedito requer uma atualização para um plano que suporte Code Injection.
A integração com o Squarespace provavelmente está a funcionar. Verifique antes o Schedito: configuração do serviço, recursos necessários, disponibilidade recorrente, exceções específicas por data, reservas existentes, capacidade e calendários externos ligados.
Verifique se copiou os recursos partilhados tanto para o Code Injection como para Code Blocks individuais. Mantenha o CSS e o JavaScript no Code Injection e remova as cópias desnecessárias do conteúdo das páginas.
Verifique a secção e a disposição dos blocos Squarespace em redor. Colunas, espaçamento e largura do contentor podem limitar o widget mesmo quando o próprio Schedito é responsivo.
Use o tema claro ou escuro do widget Schedito e as definições de cores suportadas. Verifique também se regras gerais de Custom CSS do Squarespace estão a modificar involuntariamente controlos de formulário, botões ou outros elementos.
Mantenha o Squarespace focado no seu website 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 Squarespace
Explorar todos os guias Schedito · Personalização do widget · Sincronização com o Google Calendar