Next.js

Im App Router kann ein normales Server Component das iframe rendern.

export default function BookingSection() {
  return (
    <section>
      <h2>Termin buchen</h2>
      <iframe
        src="https://pointr.org/de/widget/booking/ihr-unternehmen"
        width="100%"
        height="720"
        style={{ border: 0, borderRadius: 12, maxWidth: 480 }}
        loading="lazy"
        title="Termin mit Pointr buchen"
      />
    </section>
  );
}

Mit Umgebungswerten

const pointrBaseUrl = process.env.NEXT_PUBLIC_POINTR_BASE_URL ?? 'https://pointr.org';

export function PointrBookingWidget({ slug, locale = 'de' }: { slug: string; locale?: string }) {
  return (
    <iframe
      src={`${pointrBaseUrl}/${locale}/widget/booking/${slug}`}
      width="100%"
      height="720"
      style={{ border: 0, borderRadius: 12, maxWidth: 480 }}
      loading="lazy"
      title="Termin mit Pointr buchen"
    />
  );
}

Häufige Falle

Wenn die Host-Seite eine strenge Content Security Policy nutzt, muss Pointr als Frame-Quelle erlaubt sein:

frame-src https://pointr.org;