Integration

Verschiedene Wege, BookingJs einzubinden

Nur einbetten statt integrieren?

Diese Seite beschreibt die manuelle Entwickler-Integration von BookingJs mit voller Kontrolle über alle Optionen. Den fertig generierten Einbettungscode eines Provider Channels – ganz ohne Konfiguration im Code – finden Sie im Überblick. Zum Überblick

Script Tag (CDN)

Die einfachste Methode zur Integration ist die Verwendung eines Script-Tags mit unserem CDN. Ideal für statische Websites und schnelle Prototypen.

index.htmlhtml

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

Funktionsfähiges Beispiel auf jsFiddle

Tipp

Sie können die Referenz auch als URL-Parameter übergeben:https://ihre-website.de?ref=ihre-ressourcen-referenz

Mit URL-Parameter

index.htmlhtml

<!-- 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(); // Referenz wird aus URL-Parameter gelesen
</script>

ESM Import

Für moderne JavaScript-Projekte mit Build-Tools wie Webpack, Vite oder Rollup können Sie das Paket als npm-Dependency installieren.

Installation

Terminalbash

# Mit Yarn
yarn add @timum/booking

# Mit npm
npm install @timum/booking

Verwendung

app.jsjavascript

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

// Stellen Sie sicher, dass ein Element mit id="bookingjs" existiert
init({ ref: 'ihre-ressourcen-referenz' });

Beispielprojekt auf StackBlitz

React Component

Für React-Anwendungen bieten wir eine native Komponente mit voller TypeScript-Unterstützung.

Installation

Terminalbash

yarn add @timum/booking

Verwendung

BookingPage.tsxtsx

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

function BookingPage() {
  return (
    <TimumBooking
      appConfig={{
        ref: 'ihre-ressourcen-referenz',
        // weitere Optionen...
      }}
      muiTheme={{
        // MUI Theme Anpassungen (PRO)
      }}
    />
  );
}

Mit allen Optionen

BookingPage.tsxtsx

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

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

Mehrere Instanzen auf einer Seite

TimumBooking unterstützt mehrere Buchungs-Widgets auf derselben Seite. Jede Instanz erhält automatisch eine eindeutige iframe-ID und verwaltet ihre Konfiguration isoliert – Props, Themes und Callbacks bleiben pro Instanz getrennt, und beim Unmount wird sauber aufgeräumt.

Mehrere Widgetstsx

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

// Mehrere Widgets für verschiedene Ressourcen
<div>
  <TimumBooking appConfig={{ ref: 'resource-a@timum', height: '500px' }} />
  <TimumBooking appConfig={{ ref: 'resource-b@timum', height: '500px' }} />
</div>;

iframe (für Legacy-Systeme)

Wenn Ihr CMS keine Script-Einbindung erlaubt: timum hostet für jede Referenz eine fertige Widget-Seite unter /widget/<referenz>. Diese URL verwenden Sie direkt als iframe-Quelle – ohne eigenes Hosting. Optionen wie Sprache, Terminarten oder Kanal übergeben Sie als URL-Parameter.

iframe-Einbettunghtml

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

<!-- Mit Optionen per URL-Parameter (z. B. Sprache und Terminart) -->
<iframe
  src="https://www.timum.de/widget/ihre-ressourcen-referenz?culture=en&prdRefs=besichtigung"
  width="100%"
  height="600"
  style="border: none;"
></iframe>

Ansichts-Varianten

Neben /widget/ gibt es weitere Pfade, die dieselbe Referenz in anderen Kalender-Ansichten rendern:

/widget/<ref> – Standardansicht
/weekwidget/<ref> – Wochenkalender
/weekstackwidget/<ref> – kompakte Wochenansicht
/listwidget/<ref> – reine Listenansicht
/details-month-widget/<ref> – Monatsansicht mit Termindetails
/details-week-widget/<ref> – Wochenansicht mit Termindetails

Eigene Embed-Seite (für Event-Kommunikation)

In der gehosteten Widget-Seite stehen keine Callbacks zur Verfügung. Wenn Sie Events auf der Parent-Seite benötigen, hosten Sie stattdessen eine eigene kleine Seite mit dem Script-Tag-Snippet und postMessageTarget:

Eigene Embed-Seitehtml

<!-- embed.html – eigene Seite mit dem BookingJs-Snippet -->
<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' // Events an die Parent-Seite senden
  });
</script>

<!-- Auf Ihrer Seite einbetten -->
<iframe
  src="https://www.example.com/embed.html"
  width="100%"
  height="600"
  style="border: none;"
></iframe>

Hinweis zu iframe

Die gehostete Widget-Seite unterstützt keine Callback-Funktionen. Nutzen Sie für Event-Kommunikation die eigene Embed-Seite mit postMessageTarget.

Vergleich der Methoden

Methode	Vorteile	Nachteile
Script Tag	Einfach, keine Dependencies	Weniger Kontrolle über Build
ESM Import	Tree-shaking, TypeScript	Benötigt Build-Tool
React Component	Native Integration, Props	Nur für React-Projekte
iframe	Isolation, einfach	Eingeschränkte Callbacks

Integration

Script Tag (CDN)

Mit URL-Parameter

ESM Import

Installation

Verwendung

React Component

Installation

Verwendung

Mit allen Optionen

Mehrere Instanzen auf einer Seite

iframe (für Legacy-Systeme)

Ansichts-Varianten

Eigene Embed-Seite (für Event-Kommunikation)

Vergleich der Methoden

Verwandte Themen