Como adicionar o widget de reservas Schedito ao Wix
Pode adicionar o Schedito a um website Wix existente sem transferir os seus serviços, disponibilidade ou reservas para o Wix. A integração Wix mais simples utiliza um elemento Embed HTML que contém os três elementos do widget Schedito fornecidos pelo seu painel.
O Wix trata HTML incorporado de forma diferente de um website normal: o código é executado dentro de um iframe isolado. Este guia explica essa diferença específica do Wix e mostra como integrar o Schedito sem a confundir com a integração normal ao nível do website usada em plataformas como o WordPress.
Antes de abrir o editor Wix
Um calendário Schedito configurado
Configure os serviços, recursos e disponibilidade que pretende disponibilizar aos visitantes do Wix antes de incorporar o widget.
Acesso ao seu editor Wix
Precisa de permissão para editar a página onde a interface de reservas deve aparecer e adicionar um elemento de incorporação HTML.
Os três elementos de código Schedito
Abra o código do widget no Schedito. Mantenha disponíveis para copiar a ligação CSS, o script JavaScript e o DIV do widget específico do calendário.
1. Perceba por que razão o Wix é diferente
Num website convencional, a nossa integração Schedito recomendada consiste em carregar o CSS e o JavaScript uma vez e depois colocar DIVs de widget específicos dos calendários onde forem necessários.
O elemento padrão Embed HTML do Wix funciona de forma diferente. O Wix coloca o código incorporado dentro de um iframe em sandbox. O código carregado na página Wix envolvente não passa automaticamente a fazer parte desse iframe, e o código dentro do iframe não consegue aceder diretamente ao resto da página.
Por esse motivo, a instalação Wix mais simples é uma exceção intencional: a ligação CSS, o script JavaScript e o DIV do widget têm todos de existir dentro do mesmo iframe incorporado.
Integração num website normal
JavaScript — uma vez
DIV do widget — onde for necessário
Wix Embed HTML
Ligação CSS
Script JavaScript
DIV do widget específico do calendário
2. Adicione um elemento de incorporação HTML à página Wix
Abra a página Wix onde os clientes devem poder reservar — por exemplo, uma página de reservas, serviço, consulta ou evento.
Adicione um elemento de incorporação HTML ou código utilizando o editor Wix. Wix Editor e Wix Studio usam etiquetas ligeiramente diferentes, mas ambos oferecem um elemento para incorporar código HTML externo.
Posicione o elemento onde a interface de reservas deve aparecer e dê-lhe espaço horizontal e vertical suficiente para o calendário.
3. Adicione os três elementos Schedito dentro da incorporação
Abra o código do widget no painel Schedito. Copie a ligação CSS, o script JavaScript e o DIV HTML do widget para o campo de código incorporado do Wix.
Uma ordem prática é:
1. Ligação CSS
2. DIV do widget específico do calendário
3. Script JavaScript
Use exatamente os snippets atuais apresentados pelo seu painel Schedito. Não substitua o ID da organização, o ID do calendário público ou os URLs dos recursos por valores copiados de outro calendário ou de um guia antigo.
Esta repetição de CSS e JavaScript é específica da integração Wix baseada em iframe. Não é a nossa recomendação geral para websites convencionais.
Dentro do elemento Wix Embed HTML
Dê ao iframe de reservas espaço suficiente
O elemento HTML do Wix tem as suas próprias dimensões. O widget de reservas pode adaptar-se à largura disponível dentro desse elemento, mas a página Wix envolvente continua a controlar o tamanho global do iframe.
Torne o elemento suficientemente largo para o layout da sua página e suficientemente alto para todo o fluxo de reservas. Se o elemento for demasiado baixo, passos posteriores do calendário podem ficar cortados ou exigir scroll dentro do iframe.
Lembre-se também de que o iframe é visualmente isolado. O CSS do seu website Wix não estiliza automaticamente o conteúdo Schedito dentro dele. Use o tema claro ou escuro e as definições de personalização do próprio Schedito.
Integrações Wix avançadas: Custom Elements
O Wix também suporta Custom Elements baseados em Web Components padrão. Estes podem oferecer uma abordagem mais integrada do que o iframe HTML normal e são úteis quando é necessária uma integração mais estreita com a página ou componentes reutilizáveis.
Atualmente, o Schedito não exige nem fornece um Wix Custom Element dedicado para a instalação normal descrita neste guia. Criar um pertence, portanto, a uma integração avançada de programador, e não à configuração padrão de copiar e colar.
Se precisar de muitos widgets Schedito num único website Wix ou quiser um comportamento mais específico do Wix, pode valer a pena considerar um wrapper Custom Element reutilizável.
Que caminho devo usar?
Um ou poucos widgets de reservas
Use Embed HTML. É a abordagem mais simples.
Integração avançada ou muitos widgets reutilizáveis
Considere uma integração Wix Custom Element desenvolvida à medida.
4. Publique e teste o fluxo completo de reservas
Verifique o próprio widget, as dimensões do iframe e a reserva resultante — não apenas se aparece uma caixa vazia na página.
Teste o website publicado
Teste a página Wix publicada em vez de confiar apenas no editor ou na pré-visualização. Confirme que o widget Schedito carrega por completo.
Conclua uma reserva de teste real
Selecione um serviço, data e hora e conclua o processo. Verifique a reserva resultante no seu painel Schedito.
Verifique desktop e telemóvel
Verifique tanto o layout do widget como as dimensões do elemento de incorporação Wix nos breakpoints responsivos utilizados pelo seu website.
Widget de reservas Wix: resolução de problemas
Verifique os três elementos dentro do código incorporado do Wix: a ligação CSS atual do Schedito, o script JavaScript e o DIV do widget específico do calendário.
Confirme o ID da organização e o ID do calendário público e verifique nas ferramentas de programador do navegador se existem pedidos de recursos ou API falhados.
Isto é esperado se o DIV estiver dentro de uma incorporação HTML normal do Wix. A incorporação é executada no seu próprio iframe, enquanto o Wix Custom Code é executado na página envolvente. Os dois documentos estão isolados.
Para a integração simples por iframe, coloque a ligação CSS, o script JavaScript e o DIV do widget juntos dentro da própria incorporação.
Aumente a altura do elemento HTML incorporado no Wix. O layout pai do Wix controla as dimensões do iframe, pelo que um widget Schedito corretamente apresentado pode ainda ficar cortado se o seu contentor for demasiado baixo.
A integração com o Wix provavelmente está a funcionar. Verifique a configuração do Schedito: serviço, recursos necessários, disponibilidade recorrente, exceções, reservas existentes, capacidade e compromissos de calendários externos ligados.
Isto é esperado com um iframe HTML. O documento Schedito incorporado está isolado dos estilos da página Wix principal.
Configure o tema claro ou escuro, as cores e outras propriedades visuais suportadas diretamente no Schedito.
Verifique os dois lados da integração: o Schedito responde à largura disponível dentro do iframe, enquanto o Wix controla a largura e altura do elemento incorporado. Ajuste o elemento Wix no breakpoint responsivo relevante e volte a testar o website publicado.
Mantenha o Wix focado no seu website e o Schedito focado nas reservas
Quando o widget 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 Wix
Explorar todos os guias Schedito · Personalização do widget · Sincronização com o Google Calendar