Passa al contenuto principale

Widget del sito web

Aggiungi questo widget al sito web del tuo studio e i visitatori potranno sfogliare il tuo calendario lezioni in tempo reale, i servizi per appuntamenti, i piani abbonamento e i prodotti in vendita — e prenotare o acquistare direttamente dal tuo sito — senza lasciare la tua pagina.

Etichetta di navigazione — Widget del sito web (scheda in Impostazioni): 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

Prima di iniziare​

Il widget del sito web è un pannello incorporabile con fino a quattro schede — Calendario, Appuntamenti, Abbonamenti e Prodotti — alimentate dagli stessi dati pubblici che vedono i clienti nell'app mobile, e un visitatore può creare un account, accedere, prenotare una lezione o un appuntamento, e acquistare un abbonamento o un prodotto, tutto dentro il widget stesso.

Ti serviranno:

  • Accesso a Impostazioni nell'app desktop Agon (solo studio manager).
  • La possibilità di incollare uno snippet HTML nell'editor del tuo sito web (Squarespace, Wix, WordPress o un sito personalizzato vanno tutti bene — ovunque tu possa aggiungere un blocco "embed" o "HTML" personalizzato).

Cosa mostra il widget​

Una volta incorporato, il widget mostra un'intestazione con il nome del tuo studio e il colore d'accento del tuo brand, e una barra con fino a quattro schede:

  • Calendario — ogni lezione programmata in arrivo: nome, data e ora, istruttore (quando assegnato) e quanti posti restano (oppure "Al completo"). Cliccando su una lezione si apre il dettaglio, con un pulsante Prenota (o Iscriviti in lista d'attesa, se al completo).
  • Appuntamenti — i tuoi servizi per appuntamenti attivi. Cliccandone uno si apre un flusso di prenotazione passo-passo: scegli un istruttore, scegli una data, scegli una fascia oraria disponibile.
  • Abbonamenti — ogni piano abbonamento attivo e contrassegnato come vendibile online, con un pulsante Acquista su ciascuno.
  • Prodotti — il tuo catalogo di vendita al dettaglio (prodotti attivi con scorte disponibili), con un pulsante Compra su ciascuno. Non c'è un carrello — ogni clic su Compra avvia un checkout separato per una sola unità di quel prodotto.

Non mostra mai gli elenchi clienti o i contatti degli istruttori — solo ciò che un visitatore potrebbe ragionevolmente vedere o fare dal tuo sito pubblico.

Prenotare o acquistare richiede un account​

Sfogliare ogni scheda è sempre pubblico — non serve accedere. Nel momento in cui un visitatore clicca Prenota, Iscriviti in lista d'attesa, Acquista o Compra, si apre una finestra di accesso/registrazione se non ha già effettuato l'accesso. La registrazione richiede solo email, password e nome completo; accedere o registrarsi completa automaticamente l'azione originale — il visitatore non deve cliccare due volte. Questa sessione esiste solo nella memoria della scheda del browser: aggiornare la pagina, o chiudere e riaprire il widget, disconnette di nuovo il visitatore (una scelta deliberata — il widget non memorizza mai una sessione in localStorage o in un cookie, dato che viene eseguito dentro un iframe sandboxato su una pagina che Agon non controlla).

Prenotare una lezione o un appuntamento scala un credito dell'abbonamento esattamente come nell'app mobile. Acquistare un abbonamento o un prodotto apre il checkout ospitato di Stripe in una nuova scheda del browser (non dentro il widget) — il visitatore completa il pagamento lì, e quella scheda mostra una semplice conferma di successo/annullamento e può essere chiusa una volta finito.

Trovare il tuo snippet di incorporamento​

  1. Apri l'app desktop Agon e vai su Impostazioni.

  2. Clicca sulla scheda Widget del sito web.

  3. Copia lo snippet di incorporamento mostrato lì. Ha questo aspetto:

    <iframe
      src="https://your-tunnel-url.trycloudflare.com/widget/your-public-studio-id"
      sandbox="allow-scripts allow-forms allow-same-origin allow-popups">
    </iframe>

  4. Incolla lo snippet nel blocco HTML/embed del tuo sito web, esattamente come copiato — incluso l'attributo sandbox. Non rimuoverlo né accorciarlo: allow-popups in particolare è necessario per la scheda di checkout Stripe descritta sopra, e gli altri sono i permessi minimi indispensabili per far funzionare il widget in sicurezza sulla tua pagina.

Aggiungerlo al tuo sito web​

I passaggi esatti dipendono dal tuo strumento di creazione siti, ma lo schema è lo stesso ovunque:

  1. Nell'editor del tuo sito web, aggiungi un nuovo blocco "Embed", "HTML" o "Codice personalizzato" nella pagina dove vuoi che appaia il widget.
  2. Incolla lo snippet copiato da Impostazioni → Widget del sito web.
  3. Salva e pubblica la pagina.
  4. Visita il tuo sito web pubblicato e verifica che si carichi con il calendario del tuo studio.

Incorporare una sola scheda​

Per impostazione predefinita lo snippet incorpora tutte e quattro le schede con la barra visibile. Per incorporarne solo una — ad esempio, solo il calendario lezioni nella tua homepage, senza barra delle schede e senza modo di passare tra le schede — aggiungi un parametro ?widget= all'URL src con uno di questi valori: calendar, appointments, memberships o products. Ad esempio:

<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>

Questo è del tutto opzionale — lascia lo snippet esattamente come copiato da Impostazioni se vuoi il widget completo a quattro schede.

Importante: il tuo snippet cambia quando il backend Agon si riavvia​

L'indirizzo del tunnel del tuo studio (la parte https://...trycloudflare.com dello snippet) è temporaneo per progettazione — viene generato di nuovo ogni volta che il tuo backend Agon si riavvia, e il vecchio indirizzo smette di funzionare. Questo non è un difetto.

Ogni volta che riavvii il backend Agon (o il tuo computer), torna in Impostazioni → Widget del sito web, copia il nuovo snippet e aggiornalo sul tuo sito web. Finché non lo fai, il widget sul tuo sito pubblicato mostrerà un errore ai visitatori invece del tuo calendario. Se hai personalizzato lo snippet con un parametro ?widget= (vedi sopra), riaggiungilo al nuovo snippet — Impostazioni fornisce sempre l'URL semplice del widget completo.

Se ti serve un indirizzo permanente che non cambia mai, serve una configurazione a pagamento di Cloudflare Tunnel invece del Quick Tunnel gratuito che Agon usa per impostazione predefinita — non è qualcosa che Agon configura automaticamente oggi.

Cosa fare se qualcosa va storto?​

Il widget mostra "Studio non trovato" sul mio sito web Il tuo snippet di incorporamento non è aggiornato — molto probabilmente perché il tuo backend Agon si è riavviato e ha ottenuto un nuovo indirizzo tunnel. Vai su Impostazioni → Widget del sito web, copia lo snippet attuale e sostituisci quello sul tuo sito web.

Il widget non mostra lezioni, o meno di quante mi aspetto La scheda Calendario mostra solo le lezioni ancora in arrivo (non ancora iniziate) e ancora in stato "programmata". Le lezioni cancellate e quelle già passate non appariranno. Controlla la pagina Lezioni per verificare che la lezione sia programmata correttamente.

Il mio strumento di creazione siti non mi permette di incollare un blocco <iframe> o "Codice personalizzato" Alcuni strumenti di creazione siti limitano l'HTML personalizzato nei piani gratuiti. Controlla il piano del tuo strumento — la maggior parte (Squarespace, Wix, WordPress) richiede almeno il piano a pagamento base per aggiungere codice di incorporamento personalizzato.

Un visitatore dice che non è successo nulla dopo aver cliccato Acquista o Compra Il checkout Stripe si apre in una nuova scheda del browser, non dentro il widget stesso — il visitatore potrebbe avere un blocco popup attivo, o non aver notato la nuova scheda. Chiedigli di controllare eventuali notifiche di popup bloccati, o le altre schede aperte nel browser.

Un visitatore si è registrato nel widget ma dice di non riuscire ad accedere all'app mobile Dovrebbe riuscirci — registrarsi tramite il widget crea lo stesso tipo di account cliente della registrazione tramite l'app mobile, con l'email e la password inserite.

Il widget appare rotto o senza stile sul mio sito Assicurati di aver copiato l'intero snippet, incluso l'attributo sandbox, e di non aver modificato per errore l'URL src. Se l'indirizzo del tunnel è cambiato dall'ultima volta che l'hai copiato, ricopia uno snippet aggiornato da Impostazioni → Widget del sito web.

Pagine correlate​