Intégration

Intégrez BookingJs, le widget de réservation timum, via une balise script, un import ESM, un composant React ou un iframe – cette page compare toutes les approches.

Balise script (CDN)

La méthode d'intégration la plus simple consiste à utiliser une balise script avec notre CDN. Idéal pour les sites statiques et les prototypes rapides.

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

Exemple fonctionnel sur jsFiddle

Avec paramètre 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(); // La référence est lue depuis le paramètre d'URL
</script>

Import ESM

Pour les projets JavaScript modernes utilisant des outils de build comme Webpack, Vite ou Rollup, vous pouvez installer le paquet en tant que dépendance npm.

Installation

# Avec Yarn
yarn add @timum/booking

# Avec npm
npm install @timum/booking

Utilisation

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

// Assurez-vous qu'un élément avec id="bookingjs" existe
init({ ref: 'ihre-ressourcen-referenz' });

Projet d'exemple sur StackBlitz

Composant React

Pour les applications React, nous proposons un composant natif avec un support TypeScript complet.

Installation

yarn add @timum/booking

Utilisation

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

function BookingPage() {
  return (
    <TimumBooking
      appConfig={{
        ref: 'ihre-ressourcen-referenz',
        // autres options...
      }}
      muiTheme={{
        // Personnalisations du thème MUI (PRO)
      }}
    />
  );
}

Avec toutes les options

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

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

Plusieurs instances sur une même page

TimumBooking prend en charge plusieurs widgets de réservation sur la même page. Chaque instance reçoit automatiquement un ID d'iframe unique et gère sa configuration de manière isolée – les props, thèmes et callbacks restent séparés par instance, et le nettoyage est effectué proprement lors du démontage (unmount).

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

// Plusieurs widgets pour différentes ressources
<div>
  <TimumBooking appConfig={{ ref: 'resource-a@timum', height: '500px' }} />
  <TimumBooking appConfig={{ ref: 'resource-b@timum', height: '500px' }} />
</div>;

iframe (pour systèmes existants)

Si votre CMS n'autorise pas l'insertion de scripts : timum héberge pour chaque référence une page widget prête à l'emploi sous /widget/<referenz>. Utilisez cette URL directement comme source de l'iframe – sans avoir à héberger quoi que ce soit vous-même. Transmettez des options telles que la langue, les types de rendez-vous ou le canal en tant que paramètres d'URL.

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

<!-- Avec des options via paramètre d'URL (par ex. langue et type de rendez-vous) -->
<iframe
  src="https://www.timum.de/widget/ihre-ressourcen-referenz?culture=en&prdRefs=besichtigung"
  width="100%"
  height="600"
  style="border: none;"
></iframe>

Variantes d'affichage

Outre /widget/, il existe d'autres chemins qui affichent la même référence dans d'autres vues de calendrier :

• /widget/<ref> – Vue par défaut
• /weekwidget/<ref> – Calendrier hebdomadaire
• /weekstackwidget/<ref> – Vue hebdomadaire compacte
• /listwidget/<ref> – Vue liste pure
• /details-month-widget/<ref> – Vue mensuelle avec détails des rendez-vous
• /details-week-widget/<ref> – Vue hebdomadaire avec détails des rendez-vous

Page d'intégration personnalisée (pour la communication d'événements)

La page widget hébergée ne propose aucun callback. Si vous avez besoin d'événements sur la page parente, hébergez plutôt votre propre petite page avec l'extrait de balise script et postMessageTarget :

<!-- embed.html – votre propre page avec l'extrait 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' // Envoyer des événements à la page parente
  });
</script>

<!-- Intégration sur votre page -->
<iframe
  src="https://www.example.com/embed.html"
  width="100%"
  height="600"
  style="border: none;"
></iframe>

Comparaison des méthodes

Sujets connexes

• Référencement des entités
• Configuration
• Callbacks