Integrazione

Integri BookingJs, il widget di prenotazione timum, tramite tag script, importazione ESM, componente React o iframe: questa pagina confronta tutti i metodi.

Tag script (CDN)

Il metodo di integrazione più semplice consiste nell'utilizzare un tag script con il nostro CDN. Ideale per siti web statici e prototipi rapidi.

<div id="bookingjs" style="margin: 32px"></div>
<script type="module">
  import * as timum from 'https://cdn.timum.de/bookingjs/1/booking.js';

  timum.init({ ref: 'booking-widget-demo-resource@timum' });
</script>

Esempio funzionante su jsFiddle

Con parametro URL

<!-- URL: https://ihre-website.de?ref=ihre-ressourcen-referenz -->
<div id="bookingjs" style="margin: 32px"></div>
<script type="module">
  import * as timum from 'https://cdn.timum.de/bookingjs/1/booking.js';

  timum.init(); // Il riferimento viene letto dal parametro URL
</script>

Importazione ESM

Per i progetti JavaScript moderni con strumenti di build come Webpack, Vite o Rollup, può installare il pacchetto come dipendenza npm.

Installazione

# Con Yarn
yarn add @timum/booking

# Con npm
npm install @timum/booking

Utilizzo

import { init } from '@timum/booking';

// Si assicuri che esista un elemento con id="bookingjs"
init({ ref: 'ihre-ressourcen-referenz' });

Progetto di esempio su StackBlitz

Componente React

Per le applicazioni React offriamo un componente nativo con pieno supporto TypeScript.

Installazione

yarn add @timum/booking

Utilizzo

import { TimumBooking } from '@timum/booking';

function BookingPage() {
  return (
    <TimumBooking
      appConfig={{
        ref: 'ihre-ressourcen-referenz',
        // altre opzioni...
      }}
      muiTheme={{
        // Personalizzazioni del tema MUI (PRO)
      }}
    />
  );
}

Con tutte le opzioni

import { TimumBooking } from '@timum/booking';

function BookingPage() {
  return (
    <TimumBooking
      appConfig={{
        ref: 'ihre-ressourcen-referenz',
        prdRefs: 'produkt-referenz', // opzionale
        channelKey: 'RESOURCE_PUBLIC', // opzionale
        height: '600px',
        culture: 'de',
        callbacks: {
          createBookingSuccessful: ({ timeslot, data }) => {
            console.log('Termin gebucht:', timeslot);
          },
        },
      }}
      muiTheme={{
        palette: {
          primary: {
            main: '#337ab7',
          },
        },
        typography: {
          fontFamily: 'Inter, sans-serif',
        },
      }}
    />
  );
}

Più istanze sulla stessa pagina

TimumBooking supporta più widget di prenotazione sulla stessa pagina. Ogni istanza riceve automaticamente un ID iframe univoco e gestisce la propria configurazione in modo isolato – props, temi e callback restano separati per istanza, e tutto viene ripulito correttamente allo smontaggio (unmount).

import { TimumBooking } from '@timum/booking';

// Più widget per risorse diverse
<div>
  <TimumBooking appConfig={{ ref: 'resource-a@timum', height: '500px' }} />
  <TimumBooking appConfig={{ ref: 'resource-b@timum', height: '500px' }} />
</div>;

iframe (per sistemi legacy)

Se il suo CMS non consente l'inserimento di script: timum ospita per ogni riferimento una pagina widget già pronta all'indirizzo /widget/<referenz>. Utilizzi questo URL direttamente come sorgente dell'iframe, senza bisogno di un proprio hosting. Passi opzioni come lingua, tipi di appuntamento o canale come parametri URL.

<iframe
  src="https://www.timum.de/widget/ihre-ressourcen-referenz"
  width="100%"
  height="600"
  style="border: none;"
></iframe>

<!-- Con opzioni tramite parametro URL (ad es. lingua e tipo di appuntamento) -->
<iframe
  src="https://www.timum.de/widget/ihre-ressourcen-referenz?culture=en&prdRefs=besichtigung"
  width="100%"
  height="600"
  style="border: none;"
></iframe>

Varianti di visualizzazione

Oltre a /widget/, esistono altri percorsi che visualizzano lo stesso riferimento in altre viste del calendario:

• /widget/<ref> – Vista predefinita
• /weekwidget/<ref> – Calendario settimanale
• /weekstackwidget/<ref> – Vista settimanale compatta
• /listwidget/<ref> – Vista elenco pura
• /details-month-widget/<ref> – Vista mensile con dettagli dell'appuntamento
• /details-week-widget/<ref> – Vista settimanale con dettagli dell'appuntamento

Pagina di embed personalizzata (per la comunicazione di eventi)

Nella pagina widget ospitata non sono disponibili callback. Se ha bisogno di eventi sulla pagina padre, ospiti invece una propria piccola pagina con lo snippet del tag script e postMessageTarget:

<!-- embed.html – pagina propria con lo snippet BookingJs -->
<div id="bookingjs" style="margin: 32px"></div>
<script type="module">
  import * as timum from 'https://cdn.timum.de/bookingjs/1/booking.js';

  timum.init({
    ref: 'ihre-ressourcen-referenz',
    postMessageTarget: 'https://www.example.com' // Invia eventi alla pagina padre
  });
</script>

<!-- Incorporamento nella sua pagina -->
<iframe
  src="https://www.example.com/embed.html"
  width="100%"
  height="600"
  style="border: none;"
></iframe>

Confronto dei metodi

Argomenti correlati

• Referenziazione delle entità
• Configurazione
• Callbacks