Integración

Integre BookingJs, el widget de reserva de timum, mediante etiqueta script, importación ESM, componente React o iframe: esta página compara todas las formas.

Etiqueta script (CDN)

El método de integración más sencillo es usar una etiqueta script con nuestro CDN. Ideal para sitios web estáticos y prototipos rápidos.

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

Ejemplo funcional en jsFiddle

Con parámetro de 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 referencia se lee del parámetro de URL
</script>

Importación ESM

Para proyectos JavaScript modernos con herramientas de compilación como Webpack, Vite o Rollup, puede instalar el paquete como dependencia npm.

Instalación

# Con Yarn
yarn add @timum/booking

# Con npm
npm install @timum/booking

Uso

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

// Asegúrese de que exista un elemento con id="bookingjs"
init({ ref: 'ihre-ressourcen-referenz' });

Proyecto de ejemplo en StackBlitz

Componente React

Para aplicaciones React, ofrecemos un componente nativo con soporte completo de TypeScript.

Instalación

yarn add @timum/booking

Uso

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

function BookingPage() {
  return (
    <TimumBooking
      appConfig={{
        ref: 'ihre-ressourcen-referenz',
        // más opciones...
      }}
      muiTheme={{
        // Personalizaciones del tema MUI (PRO)
      }}
    />
  );
}

Con todas las opciones

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

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

Varias instancias en una misma página

TimumBooking admite varios widgets de reserva en la misma página. Cada instancia recibe automáticamente un ID de iframe único y gestiona su configuración de forma aislada: los props, temas y callbacks permanecen separados por instancia, y todo se limpia correctamente al desmontar (unmount).

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

// Varios widgets para diferentes recursos
<div>
  <TimumBooking appConfig={{ ref: 'resource-a@timum', height: '500px' }} />
  <TimumBooking appConfig={{ ref: 'resource-b@timum', height: '500px' }} />
</div>;

iframe (para sistemas heredados)

Si su CMS no permite la inserción de scripts: timum aloja para cada referencia una página de widget ya lista en /widget/<referenz>. Use esta URL directamente como origen del iframe, sin necesidad de alojamiento propio. Pase opciones como el idioma, los tipos de cita o el canal mediante parámetros de URL.

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

<!-- Con opciones mediante parámetro de URL (p. ej., idioma y tipo de cita) -->
<iframe
  src="https://www.timum.de/widget/ihre-ressourcen-referenz?culture=en&prdRefs=besichtigung"
  width="100%"
  height="600"
  style="border: none;"
></iframe>

Variantes de vista

Además de /widget/, existen otras rutas que muestran la misma referencia en otras vistas de calendario:

• /widget/<ref> – Vista predeterminada
• /weekwidget/<ref> – Calendario semanal
• /weekstackwidget/<ref> – Vista semanal compacta
• /listwidget/<ref> – Vista de lista pura
• /details-month-widget/<ref> – Vista mensual con detalles de la cita
• /details-week-widget/<ref> – Vista semanal con detalles de la cita

Página de inserción propia (para comunicación de eventos)

La página de widget alojada no ofrece ningún callback. Si necesita eventos en la página principal, aloje en su lugar su propia página pequeña con el fragmento de la etiqueta script y postMessageTarget:

<!-- embed.html – su propia página con el fragmento de 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' // Enviar eventos a la página principal
  });
</script>

<!-- Inserción en su página -->
<iframe
  src="https://www.example.com/embed.html"
  width="100%"
  height="600"
  style="border: none;"
></iframe>

Comparación de métodos

Temas relacionados

• Referenciación de entidades
• Configuración
• Callbacks