La Miglior Integrazione per la Gestione degli Appuntamenti su Webflow

Se hai bisogno di aggiungere funzionalità di prenotazione a Webflow, probabilmente hai esaminato strumenti come Calendly, SavvyCal o Acuity. Tutti funzionano — ma condividono la stessa limitazione fondamentale: sono costruiti per gli utenti finali, non per gli sviluppatori. Le cose cambiano completamente con Cal.com.

Perché Cal.com si Distingue dalla Concorrenza

La maggior parte delle piattaforme di pianificazione tratta gli sviluppatori come un pensiero secondario. Calendly ti offre un widget incorporabile e un'API limitata — ma stai in gran parte lavorando attorno alla piattaforma, non con essa. SavvyCal è elegante ma altrettanto rigido. Il modello di base è sempre lo stesso: la piattaforma di prenotazione è al comando e tu la stai solo incorporando.

Cal.com adotta un approccio completamente diverso. È sviluppato pensando prima agli sviluppatori (developer-first): open source, un'API REST ben documentata (v2) e costruito per essere profondamente esteso.

Tre Modi per Utilizzare Cal.com in Webflow

Questo articolo tratta tre strumenti complementari che lavorano insieme: l'Embed (per mostrare un'interfaccia utente di prenotazione), l'OAuth (per collegare l'account Cal.com di un utente alla tua app) e i Webhook (per sincronizzare gli eventi di prenotazione con il tuo backend in tempo reale). Puoi usarli in modo indipendente o combinarli a seconda del tuo caso d'uso.

1. Embed — Il Modo più Rapido per Mostrare un'UI di Prenotazione

Il modo più veloce per iniziare è utilizzare l'embed nativo di Cal.com. Inserisci uno script nella tua pagina Webflow e viene visualizzato un calendario di prenotazione — in linea o come finestra modale (popup). I tuoi visitatori interagiranno direttamente con il flusso di prenotazione di Cal.com, che è curato e ottimizzato per dispositivi mobili fin dal primo utilizzo.

Aggiungi questo script al codice personalizzato della tua pagina Webflow (in Impostazioni Pagina → Prima del tag </body>):

(function (C, A, L) {
  let p = function (a, ar) {
    a.q.push(ar);
  };
  let d = C.document;
  C.Cal =
    C.Cal ||
    function () {
      let cal = C.Cal;
      let ar = arguments;
      if (!cal.loaded) {
        cal.ns = {};
        cal.q = cal.q || [];
        d.head.appendChild(d.createElement("script")).src = A;
        cal.loaded = true;
      }
      if (ar[0] === L) {
        const api = function () {
          p(api, arguments);
        };
        const namespace = ar[1];
        api.q = api.q || [];
        typeof namespace === "string"
          ? (cal.ns[namespace] = api) && p(api, ar)
          : p(cal, ar);
        return;
      }
      p(cal, ar);
    };
})(window, "https://app.cal.com/embed/embed.js", "init");

Cal("init", { origin: "https://app.cal.com" });
Cal("ui", {
  styles: { branding: { brandColor: "#000000" } },
  hideEventTypeDetails: false,
});

Quindi aggiungi un pulsante trigger nel tuo canvas Webflow con questi attributi personalizzati:

<button
  data-cal-link="tuo-username/tuo-evento"
  data-cal-config='{"layout":"month_view"}'
>
  Prenota una chiamata
</button>

Questo approccio è ideale per i casi d'uso semplici in cui tu sei l'host — un freelance, un consulente o un'azienda che offre un singolo tipo di appuntamento. I clienti prenotano direttamente nel tuo calendario Cal.com. Puoi personalizzare il colore del brand e il layout, ma l'esperienza base rimane di Cal.com.

2. OAuth — Collega l'Account Cal.com di un Utente alla tua App

Se la tua piattaforma ha più fornitori (coach, medici, consulenti...), vorrai che ciascuno di loro colleghi il proprio account Cal.com in modo che possano gestire la propria disponibilità, tipi di evento e sincronizzazione del calendario. L'OAuth rende questo possibile.

Gli utenti cliccano su "Connetti Cal.com" nella tua app Webflow e attraversano un flusso di autorizzazione standard:

https://app.cal.com/oauth/authorize
  ?client_id=TUO_CLIENT_ID
  &redirect_uri=https://tuaapp.com/cal-callback
  &response_type=code
  &scope=READ_BOOKING,READ_PROFILE

Dopo l'approvazione dell'utente, Cal.com reindirizza alla tua app con un codice di autorizzazione. Lo scambi con dei token sul tuo backend:

POST https://app.cal.com/api/auth/oauth/token
{
  "code": "CODICE_AUTORIZZAZIONE",
  "client_id": "TUO_CLIENT_ID",
  "client_secret": "TUO_CLIENT_SECRET",
  "redirect_uri": "https://tuaapp.com/cal-callback",
  "grant_type": "authorization_code"
}

Archivia l'access_token e il refresh_token accanto al record dell'utente. Ora puoi effettuare chiamate all'API di Cal.com per conto di quell'utente: recuperando i suoi tipi di eventi, leggendo le prenotazioni o visualizzando la sua disponibilità nella tua UI.

Poiché ogni utente gestisce il proprio calendario direttamente in Cal.com, ha accesso a tutto: regole di disponibilità, sincronizzazione con Google Calendar (per prevenire doppie prenotazioni), moduli di assunzione personalizzati e pagamenti Stripe. La tua app coordina semplicemente il flusso — gli utenti sono pienamente consapevoli di avere un account su Cal.com.

3. Webhooks — Sincronizza gli Eventi di Prenotazione col tuo Backend in Tempo Reale

Invece di interrogare (polling) l'API di Cal.com, puoi registrare dei webhook per ricevere notifiche in tempo reale ogni volta che succede qualcosa su un calendario. Cal.com invia una richiesta POST al tuo endpoint per ogni evento.

Cal.com supporta un set completo di eventi webhook:

Ascolta questi eventi sul tuo backend per rendere i dati persistenti, attivare automazioni, inviare email o aggiornare il tuo CRM:

// Esempio handler webhook (Node.js / Express)
app.post("/webhooks/cal", express.json(), async (req, res) => {
  const { triggerEvent, payload } = req.body;

  switch (triggerEvent) {
    case "BOOKING_CREATED":
      await db.bookings.create({
        calBookingId: payload.bookingId,
        userId: getUserByCalEmail(payload.organizer.email),
        startTime: payload.startTime,
        endTime: payload.endTime,
        attendee: payload.attendees[0],
        status: "confirmed",
      });
      break;

    case "BOOKING_CANCELLED":
      await db.bookings.update(
        { status: "cancelled" },
        { where: { calBookingId: payload.bookingId } },
      );
      break;

    case "RECORDING_READY":
      await db.sessions.update(
        { recordingUrl: payload.recordingUrl },
        { where: { calBookingId: payload.bookingId } },
      );
      break;
  }

  res.sendStatus(200);
});

Mettere Tutto Insieme con Webflow, Wized e Xano

Per i builder no-code e low-code, un solido stack tecnico per combinare tutti e tre gli strumenti è Webflow + Wized + Xano.

Webflow gestisce la tua interfaccia utente (UI) — pagine di prenotazione, cruscotti dei fornitori e schermate di connessione. Wized aggiunge la logica front-end JavaScript per comunicare tra Webflow e il tuo backend senza scrivere codice complesso lato client. Xano funge da backend: gestisce lo scambio di token OAuth, archivia le credenziali degli utenti e i record delle prenotazioni, e espone l’endpoint webhook a cui Cal.com invia gli eventi.

Un tipico flusso multi-fornitore si presenta così:

1. Il fornitore clicca su "Connetti il tuo account Cal.com" nell’interfaccia Webflow
2. Wized avvia il redirect OAuth verso Cal.com
3. Il fornitore autorizza l’accesso; Cal.com reindirizza all’app con un codice
4. Xano scambia il codice con i token e li archivia
5. I clienti visitano la pagina di prenotazione del fornitore e usano l’embed Cal.com per prenotare
6. Cal.com invia gli eventi webhook a Xano, che li salva nel database
7. Wized recupera i dati delle prenotazioni da Xano e Webflow li mostra nel cruscotto del fornitore

Casi D'uso del Mondo Reale

Marketplace di Coaching — Ogni coach collega il proprio account Cal.com tramite OAuth. I clienti trovano un coach e prenotano una sessione tramite l’embed sulla sua pagina di profilo. BOOKING_PAID attiva la logica delle commissioni in Xano. RECORDING_READY rende disponibili le registrazioni delle sessioni nel cruscotto del cliente.

Piattaforme di Telemedicina — I medici impostano la propria disponibilità direttamente in Cal.com e sincronizzano il calendario Google. I pazienti prenotano gli appuntamenti tramite l’embed. I webhook BOOKING_CREATED aggiornano le cartelle cliniche e accodano i promemoria degli appuntamenti.

Piattaforme legali o di consulenza — I consulenti usano i moduli di acquisizione integrati di Cal.com per raccogliere dati preliminari. FORM_SUBMITTED invia quei dati a Xano ancora prima che la riunione abbia luogo.

Perché Non Costruirlo da Zero

La gestione degli appuntamenti è uno di quei domini che sembrano semplici finché non ci si addentra nella gestione dei fusi orari, dei buffer tra impegni, dei conflitti di sincronizzazione del calendario, dei flussi di pagamento e della logica delle notifiche. Cal.com ha già risolto tutto questo — e gestisce milioni di prenotazioni.

Combinando embed, OAuth e webhook, ottieni un’infrastruttura di scheduling completa per la tua piattaforma senza costruire nulla da zero. Cal.com si occupa della complessità; tu ti concentri sul tuo prodotto principale.