Widget do site
Adicione este widget ao site do seu estúdio e os visitantes poderão consultar o seu horário de aulas em direto, os serviços de marcação, os planos de assinatura e os produtos de retalho — e reservar ou comprar, diretamente a partir do seu site — sem sair da sua página.
Rótulo de navegação — Widget do site (separador Definições): EN: Website Widget · IT: Widget del sito web · FR: Widget du site web · DE: Website-Widget · ES: Widget del sitio web · PT: Widget do site · NL: Website-widget
Antes de começar
O widget do site é um pequeno painel incorporável com até quatro separadores — Calendário, Marcações, Assinaturas e Produtos — cada um alimentado pelos mesmos dados públicos que os seus clientes da aplicação móvel veem, e um visitante pode ainda criar uma conta, iniciar sessão, reservar uma aula ou marcação, e comprar uma assinatura ou produto, tudo dentro do próprio widget.
Vai precisar de:
- Acesso a Definições na aplicação de secretária do Agon (apenas gestor do estúdio).
- A capacidade de colar um fragmento de HTML no editor do seu site (Squarespace, Wix, WordPress ou um site personalizado funcionam todos — em qualquer lugar onde possa adicionar um bloco personalizado de "incorporação" ou "HTML").
O que o widget mostra
Depois de incorporado, o widget mostra um cabeçalho com o nome do seu estúdio e a cor de destaque da marca, e uma barra de separadores com até quatro separadores:
- Calendário — todas as próximas aulas agendadas: nome, data e hora, instrutor (quando atribuído), e quantos lugares restam (ou "Cheio"). Clicar numa aula abre o seu detalhe, com um botão Reservar (ou Entrar na lista de espera, quando cheia).
- Marcações — os seus serviços de marcação ativos. Clicar num abre um fluxo de reserva passo a passo: escolher um instrutor, escolher uma data, escolher um horário disponível.
- Assinaturas — todos os planos de assinatura que estejam ativos e marcados como vendáveis online, com um botão Comprar em cada um.
- Produtos — o seu catálogo de retalho (produtos ativos com stock disponível), com um botão Comprar em cada um. Não há carrinho — cada clique em Comprar inicia o seu próprio checkout para uma unidade desse produto.
Nunca mostra listas de clientes nem informações de contacto dos instrutores — apenas o que um visitante poderia razoavelmente ver ou fazer a partir do seu site público.
Reservar ou comprar exige uma conta
Navegar por todos os separadores é sempre público — não é preciso início de sessão. No momento em que um visitante clica em Reservar,
Entrar na lista de espera, Comprar (assinatura) ou Comprar (produto), abre-se um modal de início de sessão/registo se ainda não tiver
sessão iniciada. O registo pede apenas um e-mail, uma palavra-passe e o nome completo; iniciar sessão ou registar-se
conclui automaticamente a ação original — o visitante nunca tem de clicar duas vezes. Esta sessão
existe apenas na memória do separador do navegador: atualizar a página, ou fechar e reabrir o widget,
termina novamente a sessão do visitante (uma escolha deliberada — o widget nunca guarda uma sessão em localStorage
nem num cookie, uma vez que corre dentro de um iframe em sandbox numa página que o Agon não controla).
Reservar uma aula ou uma marcação deduz um crédito de assinatura exatamente como acontece na aplicação móvel. Comprar uma assinatura ou um produto abre o checkout alojado do Stripe num novo separador do navegador (não dentro do widget) — o visitante conclui o pagamento aí, e esse separador mostra uma confirmação simples de êxito/cancelamento e pode ser fechado quando terminar.
Encontrar o seu fragmento de incorporação
-
Abra a aplicação de secretária do Agon e aceda a Definições.
-
Clique no separador Widget do site.
-
Copie o fragmento de incorporação aí apresentado. Tem este aspeto:
<iframesrc="https://your-tunnel-url.trycloudflare.com/widget/your-public-studio-id"sandbox="allow-scripts allow-forms allow-same-origin allow-popups"></iframe> -
Cole o fragmento no bloco HTML/de incorporação do seu site, exatamente como copiado — incluindo o atributo
sandbox. Não o remova nem o encurte: oallow-popupsem particular é necessário para o separador de checkout do Stripe descrito acima, e os restantes são as permissões mínimas de que o widget precisa para correr em segurança na sua página.
Adicioná-lo ao seu site
Os passos exatos dependem do seu construtor de sites, mas o padrão é o mesmo em todo o lado:
- No editor do seu site, adicione um novo bloco "Incorporação", "HTML" ou "Código personalizado" à página onde quer que o widget apareça.
- Cole o fragmento que copiou de Definições → Widget do site.
- Guarde e publique a página.
- Visite o seu site em direto e confirme que carrega com o horário do seu estúdio.
Incorporar apenas um separador
Por predefinição, o fragmento incorpora os quatro separadores com a barra de separadores visível. Para incorporar apenas um — por
exemplo, apenas o calendário de aulas na sua página inicial, sem barra de separadores e sem forma de mudar de separador — adicione
um parâmetro de consulta ?widget= ao URL do src com um destes valores: calendar, appointments,
memberships ou products. Por exemplo:
<iframe
src="https://your-tunnel-url.trycloudflare.com/widget/your-public-studio-id?widget=calendar"
sandbox="allow-scripts allow-forms allow-same-origin allow-popups">
</iframe>
Isto é totalmente opcional — deixe o fragmento exatamente como copiado de Definições se quiser o widget completo de quatro separadores.
Importante: o seu fragmento muda quando o backend do Agon reinicia
O endereço de túnel do seu estúdio (a parte https://...trycloudflare.com do fragmento) é temporário por conceção — é gerado de novo sempre que o backend do Agon reinicia, e o endereço antigo deixa de funcionar. Isto não é um erro.
Sempre que reiniciar o backend do Agon (ou o seu computador), volte a Definições → Widget do site, copie o novo fragmento e atualize-o no seu site. Até o fazer, o widget no seu site em direto mostrará um erro aos visitantes em vez do seu horário. Se personalizou o fragmento com um parâmetro ?widget= (ver acima), volte a adicioná-lo ao novo fragmento — as Definições dão-lhe sempre o URL simples, do widget completo.
Se precisar de um endereço permanente que nunca mude, isso requer uma configuração paga de Cloudflare Tunnel em vez do Quick Tunnel gratuito que o Agon utiliza por predefinição — isto não é algo que o Agon configure automaticamente hoje.
E se algo correr mal?
O widget mostra "Estúdio não encontrado" no meu site O seu fragmento de incorporação está desatualizado — muito provavelmente porque o backend do Agon reiniciou e obteve um novo endereço de túnel. Aceda a Definições → Widget do site, copie o fragmento atual e substitua o que está no seu site.
O widget não mostra aulas, ou menos do que eu esperava O separador Calendário só mostra aulas que ainda estejam por começar (não já iniciadas) e ainda no estado "agendada". As aulas canceladas e as aulas já no passado não aparecem. Consulte a página Aulas para confirmar que a aula está agendada corretamente.
O meu construtor de sites não me deixa colar um bloco <iframe> ou de "Código personalizado"
Alguns construtores de sites restringem o HTML personalizado nos planos gratuitos. Verifique o plano do seu construtor de sites — a maioria (Squarespace, Wix, WordPress) exige pelo menos o nível pago de entrada para adicionar código de incorporação personalizado.
Um visitante diz que nada aconteceu depois de clicar em Comprar O checkout do Stripe abre num novo separador do navegador, não dentro do próprio widget — o visitante pode ter um bloqueador de pop-ups a impedi-lo, ou pode não ter reparado no novo separador. Peça-lhe para verificar se há uma notificação de pop-up bloqueado, ou para verificar os outros separadores abertos do navegador.
Um visitante registou-se no widget mas diz que não consegue iniciar sessão na aplicação móvel Deveria conseguir — registar-se através do widget cria o mesmo tipo de conta de cliente que registar-se através da aplicação móvel, utilizando o e-mail e a palavra-passe que introduziu.
O widget parece danificado ou sem estilo no meu site
Certifique-se de que copiou o fragmento inteiro, incluindo o atributo sandbox, e de que não editou acidentalmente o URL do src. Se o endereço de túnel mudou desde a última vez que o copiou, volte a copiar um fragmento novo de Definições → Widget do site.