Como adicionar o widget de reservas Schedito ao WordPress
Não precisa de um plugin Schedito específico para WordPress. Configure o calendário de reservas no Schedito, abra o código do widget e adicione os três elementos de integração ao WordPress: a folha de estilos partilhada, o JavaScript partilhado e o contentor do widget específico do calendário.
Este guia utiliza o editor de blocos nativo do WordPress. O mesmo princípio de integração também se aplica a construtores de páginas que disponibilizam HTML, incorporação ou funcionalidade de código personalizado ao nível do website.
Antes de abrir o WordPress
Um calendário Schedito funcional
Configure os serviços, recursos e disponibilidade que pretende disponibilizar aos visitantes do WordPress antes de publicar o widget.
Acesso de edição ao WordPress
Precisa de permissão para editar a página de destino e, se for necessário adicionar CSS ou JavaScript ao nível do website, acesso a um método adequado de gestão de código frontend.
O código do seu widget Schedito
Abra o código do widget no painel Schedito. O Schedito fornece três elementos copiáveis separados: a ligação CSS, o script JavaScript e o contentor HTML do widget específico do calendário.
1. Copie os três elementos de integração do Schedito
Abra o código do widget do calendário de reservas no seu painel Schedito. A integração é apresentada intencionalmente como três elementos separados:
Ligação CSS — carrega os estilos do widget Schedito.
Script JavaScript — carrega e inicializa a funcionalidade de reservas.
Contentor do widget — identifica a organização e o calendário público de reservas e marca a posição onde a interface deve ser apresentada.
Mantenha estes três elementos separados. A folha de estilos e o JavaScript normalmente só precisam de ser carregados uma vez, enquanto pode colocar um ou mais contentores de widget específicos de calendários onde quiser que as reservas apareçam.
Os três elementos no Schedito
1. Ligação CSS
Carregar uma vez
2. Script JavaScript
Carregar uma vez
3. DIV do widget
Colocar onde este calendário deve ser apresentado
2. Coloque o DIV do widget num bloco de HTML personalizado
Abra a página WordPress onde os clientes devem poder reservar — por exemplo, uma página Reservar agora, Marcações, Contacto ou específica de um serviço.
Adicione um bloco de HTML personalizado. Também pode escrever /html num novo bloco para o encontrar rapidamente.
No painel Schedito, copie apenas o contentor HTML do widget e cole-o no bloco. Este é o elemento específico do calendário que contém valores como data-organization-id e data-calendar-public-id.
Não duplique a ligação CSS nem o script JavaScript do Schedito dentro de cada bloco de widget. Adicione-os separadamente como recursos frontend partilhados.
3. Carregue o CSS e o JavaScript do Schedito uma vez
Volte ao código do widget no painel Schedito e copie os dois elementos restantes: a ligação CSS <link> e o script JavaScript <script>.
Estes são recursos frontend partilhados. Normalmente só precisam de ser carregados uma vez numa página ou, mais habitualmente, uma vez para as páginas do website onde o Schedito pode ser usado. Não os repita para cada widget de calendário.
Se a sua configuração WordPress ou construtor de páginas oferecer uma área global de código personalizado, esta pode ser um local adequado para os dois elementos. Num tema WordPress mantido profissionalmente, um programador pode, em alternativa, carregar a folha de estilos e o script correspondentes usando o mecanismo normal de enqueue do frontend WordPress.
Se tiver vários calendários Schedito no mesmo website, podem partilhar o mesmo CSS e JavaScript carregados. Cada calendário só precisa do seu próprio <div> de widget.
Estrutura WordPress recomendada
Ligação CSS — uma vez
Script JavaScript — uma vez
Bloco de HTML personalizado
DIV Schedito específico do calendário
Uma nota sobre permissões do WordPress e JavaScript
As versões recentes do WordPress permitem conteúdo HTML personalizado através do editor de blocos, mas JavaScript e outra marcação potencialmente insegura dependem das permissões do utilizador. O WordPress pode sanitizar conteúdo não permitido quando um utilizador sem as permissões necessárias guarda a página.
No caso do Schedito, normalmente nem precisa de colocar tudo no bloco da página. Mantenha o DIV do widget específico do calendário na página e carregue o CSS e o JavaScript partilhados uma vez através de um mecanismo adequado ao nível do website.
Se um script ou folha de estilos desaparecer depois de guardar, não o cole repetidamente na página. Verifique as permissões do WordPress e utilize o método aprovado pelo website para carregar recursos frontend.
4. Publique e teste como um cliente
Uma página parecer correta no editor WordPress não é suficiente. Teste a página final, a disponibilidade e o envio da reserva.
Abra a página pública
Teste o frontend publicado, não apenas a pré-visualização do editor. Confirme que a interface Schedito carrega realmente para um visitante normal.
Conclua uma reserva
Selecione um serviço, data e hora e envie uma reserva de teste real. Verifique a reserva resultante dentro do Schedito.
Verifique o layout responsivo
Teste larguras de desktop e telemóvel e confirme que o seu tema WordPress não limita, oculta ou distorce o widget de reservas.
Widget de reservas WordPress: resolução de problemas
Verifique a integração como três partes independentes. Primeiro confirme que o DIV Schedito específico do calendário está presente e contém os identificadores corretos da organização e do calendário público. Depois confirme que o CSS e o JavaScript do Schedito são realmente carregados na página pública.
Use as ferramentas de programador do navegador para verificar pedidos CSS ou JavaScript falhados, erros JavaScript, restrições de segurança de conteúdo ou marcação modificada pelo WordPress ou por outro plugin.
Se o WordPress remover o próprio DIV do widget, verifique a marcação HTML e as permissões do utilizador. Se remover um script ou outra marcação executável, normalmente trata-se de uma questão de permissões ou sanitização.
A configuração recomendada do Schedito evita incorporar repetidamente esses scripts no conteúdo: mantenha o DIV do widget na página e carregue o CSS e o JavaScript partilhados uma vez através do método de integração frontend aprovado pelo website.
A integração com o WordPress provavelmente está a funcionar. Verifique antes o Schedito: confirme o serviço, os recursos necessários, a disponibilidade recorrente, as exceções para datas específicas, as reservas existentes, a capacidade e eventuais compromissos de calendários externos ligados.
Verifique as regras de largura, overflow, padding e layout do bloco WordPress pai ou do contentor do tema. Evite colocar a interface de reservas numa coluna de largura fixa desnecessariamente estreita.
Se o próprio widget carregar corretamente fora desse contentor, o problema é provavelmente causado pelo CSS de layout WordPress envolvente, e não pela configuração das reservas.
Use a configuração de estilo do widget Schedito para selecionar uma apresentação clara ou escura adequada e ajustar as cores e propriedades visuais suportadas.
Verifique também se o seu tema WordPress aplica regras CSS abrangentes a botões, formulários ou outros elementos que interfiram com a interface de reservas.
Depois de alterar a marcação da integração ou os recursos frontend, limpe as caches relevantes do WordPress, CDN e navegador. Funcionalidades de otimização JavaScript ou carregamento adiado também podem afetar código frontend externo, por isso exclua os recursos Schedito necessários se a sua configuração de otimização impedir a execução correta.
O seu website WordPress é apenas a camada de apresentação
Quando o widget estiver a funcionar, continue a configurar serviços, disponibilidade, sincronização de calendários, capacidade e estilo no Schedito em vez de reconstruir essas regras no WordPress.
Começar grátisVisão geral das reservas no WordPress
Explorar todos os guias Schedito · Personalização do widget · Sincronização com o Google Calendar