Rezervačný widget: vlastné CSS a JavaScript

<div data-reserveit="VAS-KLIC"></div>
<script src="http://sk.localhost:8103/widget/reserveit.js" async></script>

<section id="rezervace">
  <h2>Rezervace</h2>
  <div data-reserveit="VAS-KLIC"></div>
</section>

<!-- jednou na stránce, i pro více widgetů -->
<script src="http://sk.localhost:8103/widget/reserveit.js" async></script>

<script src="http://sk.localhost:8103/widget/reserveit.js" data-reserveit="VAS-KLIC" async></script>

<!-- vykreslit do jiného prvku -->
<script src="http://sk.localhost:8103/widget/reserveit.js" data-reserveit="VAS-KLIC"
        data-reserveit-target="#rezervace" async></script>

<iframe id="reserveit-frame" src="http://sk.localhost:8103/b/VAS-KLIC?embed=1" title="Rezervace"
        style="width:100%;border:0;height:900px" loading="lazy"></iframe>
<script>
  window.addEventListener('message', function (e) {
    if (e.origin !== 'http://sk.localhost:8103' || !e.data || e.data.type !== 'reserveit:height') return;
    document.getElementById('reserveit-frame').style.height = e.data.height + 'px';
  });
</script>

<div data-reserveit="VAS-KLIC"
     data-reserveit-service="12"
     data-reserveit-locale="en"
     data-reserveit-prefill='{"name":"Jana Nováková","email":"jana@example.com","phone":"+420 777 123 456"}'>
</div>

<div id="booking"></div>
<script src="http://sk.localhost:8103/widget/reserveit.js" async onload="initBooking()"></script>
<script>
  function initBooking() {
    const widget = ReserveIT.mount('#booking', {
      key: 'VAS-KLIC',
      locale: 'cs',                 // cs | sk | en | de
      service: 12,                  // předvybraná služba (ID)
      prefill: { name: 'Jana Nováková', email: 'jana@example.com', phone: '+420777123456', note: '' },
      theme:   { primary: '#0f766e', primary2: '#14b8a6', radius: 6, buttonStyle: 'solid' },
      options: { title: 'Objednejte se', showPrices: false, redirectUrl: 'https://example.com/dekujeme' }
    });
  }
</script>

const widget = ReserveIT.get(document.querySelector('[data-reserveit]'));

// tmavý režim webu
document.querySelector('#dark-toggle').addEventListener('change', function (e) {
  widget.update({ theme: e.target.checked
    ? { background: '#0f172a', surface: '#1e293b', text: '#e2e8f0', muted: '#94a3b8', border: '#334155' }
    : { background: '#ffffff', surface: '#f5f6fb', text: '#1f2333', muted: '#6b7088', border: '#e3e5f0' } });
});

// React
import { useEffect, useRef } from 'react';

export function Booking({ serviceId, user }) {
  const ref = useRef(null);
  useEffect(() => {
    const widget = window.ReserveIT.mount(ref.current, {
      key: 'VAS-KLIC',
      service: serviceId,
      prefill: user ? { name: user.name, email: user.email } : undefined,
    });
    return () => widget.destroy();
  }, [serviceId, user]);
  return <div ref={ref} />;
}

<!-- Vue 3 -->
<template><div ref="box"></div></template>
<script setup>
import { ref, onMounted, onBeforeUnmount } from 'vue';
const box = ref(null);
let widget;
onMounted(() => { widget = window.ReserveIT.mount(box.value, { key: 'VAS-KLIC' }); });
onBeforeUnmount(() => widget && widget.destroy());
</script>

document.addEventListener('reserveit:booked', function (e) {
  const b = e.detail;

  // Google Analytics 4 / Google Tag Manager
  if (window.gtag) {
    gtag('event', 'purchase', {
      transaction_id: b.code,
      value: b.price || 0,
      currency: 'CZK',
      items: [{ item_name: b.service, item_category: 'rezervace', quantity: b.persons }]
    });
  }
  window.dataLayer && window.dataLayer.push({ event: 'reserveit_booked', booking: b });

  // Meta (Facebook) Pixel
  if (window.fbq) fbq('track', 'Schedule', { content_name: b.service, value: b.price || 0, currency: 'CZK' });
});

// průchod kroky jako trychtýř
document.addEventListener('reserveit:step', function (e) {
  window.gtag && gtag('event', 'reserveit_step', { step: e.detail.step });
});

// po rezervaci přesměrovat na děkovací stránku s kódem rezervace
document.addEventListener('reserveit:booked', function (e) {
  setTimeout(function () {
    location.href = '/dekujeme?rezervace=' + encodeURIComponent(e.detail.code);
  }, 1500);
});

<button type="button" id="open-booking">Objednat se</button>
<dialog id="booking-dialog" style="width:min(760px,95vw);border:0;border-radius:16px;padding:0">
  <div id="booking-box"></div>
</dialog>

<script src="http://sk.localhost:8103/widget/reserveit.js" async></script>
<script>
  const dialog = document.getElementById('booking-dialog');
  let widget = null;
  document.getElementById('open-booking').addEventListener('click', function () {
    widget = widget || ReserveIT.mount('#booking-box', { key: 'VAS-KLIC' });
    widget.reset();
    dialog.showModal();
  });
  dialog.addEventListener('click', function (e) { if (e.target === dialog) dialog.close(); });
  document.getElementById('booking-box').addEventListener('reserveit:booked', function () {
    setTimeout(function () { dialog.close(); }, 4000);
  });
</script>

#rezervace {
  --rit-primary: #e11d48;
  --rit-primary-2: #f97316;
  --rit-radius: 0px;
  --rit-font: var(--font-body, Georgia, serif);
}

/* tmavý režim webu */
@media (prefers-color-scheme: dark) {
  #rezervace { --rit-bg: #0b1120; --rit-surface: #111827; --rit-text: #e5e7eb; --rit-muted: #9ca3af; --rit-border: #1f2937; }
}

[data-reserveit]::part(button-primary) {
  text-transform: uppercase;
  letter-spacing: .05em;
}
[data-reserveit]::part(title) {
  font-family: "Playfair Display", Georgia, serif;
  font-size: 2rem;
}
[data-reserveit]::part(slot-selected) {
  outline: 2px solid currentColor;
  outline-offset: 2px;
}
[data-reserveit]::part(card) {
  border: 0;
  box-shadow: 0 20px 50px -20px rgba(0, 0, 0, .35);
}

/* místo pro widget, dokud se nenačte (bez poskakování stránky) */
[data-reserveit][data-reserveit-state="loading"] { min-height: 480px; }

/* po dokončení rezervace skrýt úvodní text sekce */
#rezervace:has([data-reserveit-step="done"]) .intro { display: none; }

/* chyba → nabídnout telefon */
.fallback-phone { display: none; }
[data-reserveit-state="error"] + .fallback-phone { display: block; }

.rit-card { border-width: 2px; }
.rit-slot { font-variant-numeric: tabular-nums; }

.docs-styled [data-reserveit] {
  --rit-primary: #e11d48; --rit-primary-2: #f97316; --rit-radius: 0px; --rit-font: Georgia, serif;
}
.docs-styled [data-reserveit]::part(button-primary) { text-transform: uppercase; letter-spacing: .06em; }
.docs-styled [data-reserveit]::part(slot-selected) { outline: 2px solid #111; outline-offset: 2px; }
.docs-styled [data-reserveit]::part(title) { font-style: italic; }

<!doctype html>
<html lang="cs">
<head>
  <meta charset="utf-8">
  <title>Masáže — objednávka</title>
  <style>
    :root { --brand: #0f766e; --brand-2: #14b8a6; --font-body: "Nunito", system-ui, sans-serif; }
    #rezervace {
      --rit-primary: var(--brand);
      --rit-primary-2: var(--brand-2);
      --rit-font: var(--font-body);
      --rit-radius: 10px;
      --rit-bg: transparent;
      max-width: 820px; margin: 0 auto;
    }
    #rezervace::part(button-primary) { text-transform: uppercase; letter-spacing: .05em; }
    #rezervace[data-reserveit-state="loading"] { min-height: 480px; }
  </style>
</head>
<body>
  <h1>Relaxační masáž</h1>
  <div id="rezervace"
       data-reserveit="VAS-KLIC"
       data-reserveit-service="12"
       data-reserveit-locale="cs"></div>

  <script src="http://sk.localhost:8103/widget/reserveit.js" async></script>
  <script>
    document.getElementById('rezervace').addEventListener('reserveit:booked', function (e) {
      window.gtag && gtag('event', 'purchase', { transaction_id: e.detail.code, value: e.detail.price || 0, currency: 'CZK' });
    });
  </script>
</body>
</html>

<?php $prefill = ['name' => $user->name, 'email' => $user->email, 'phone' => $user->phone]; ?>
<div data-reserveit="VAS-KLIC"
     data-reserveit-prefill="<?= htmlspecialchars(json_encode($prefill), ENT_QUOTES) ?>"></div>
<script src="http://sk.localhost:8103/widget/reserveit.js" async></script>

<div data-reserveit="VAS-KLIC" data-reserveit-service="12"></div>
<div data-reserveit="VAS-KLIC" data-reserveit-service="15" style="--rit-primary:#7c3aed"></div>
<script src="http://sk.localhost:8103/widget/reserveit.js" async></script>
<script>
  document.addEventListener('reserveit:booked', function (e) {
    console.log('Widget', e.detail.key, 'v prvku', e.target, '→ rezervace', e.detail.code);
  });
</script>

script-src    'self' http://sk.localhost:8103;
connect-src   'self' http://sk.localhost:8103;
font-src      'self' http://sk.localhost:8103;
trusted-types reserveit;          # jen pokud web používá direktivu trusted-types
frame-src     http://sk.localhost:8103;            # jen varianta s iframe