React

Erstelle eine kleine Komponente, damit URL und Größen konsistent bleiben.

type PointrWidgetProps = {
  locale?: string;
  slug: string;
  type?: 'booking' | 'reviews' | 'availability' | 'services-availability' | 'business-card' | 'calendar';
};

const sizes = {
  booking: { height: 720, maxWidth: 480 },
  reviews: { height: 760, maxWidth: 760 },
  availability: { height: 420, maxWidth: 480 },
  'services-availability': { height: 720, maxWidth: 760 },
  'business-card': { height: 360, maxWidth: 420 },
  calendar: { height: 820, maxWidth: 900 },
};

export function PointrWidget({ locale = 'de', slug, type = 'booking' }: PointrWidgetProps) {
  const size = sizes[type];
  const src = `https://pointr.org/${locale}/widget/${type}/${slug}`;

  return (
    <iframe
      src={src}
      width="100%"
      height={size.height}
      style={{ border: 0, borderRadius: 12, maxWidth: size.maxWidth }}
      loading="lazy"
      title={`Pointr ${type} widget`}
    />
  );
}

<PointrWidget type="booking" locale="de" slug="ihr-unternehmen" />

Hinweise

Baue die iframe-URL nicht aus ungeprüften Nutzereingaben.
Verwende Client-Rendering, wenn dein Framework iframes nicht sauber serverseitig rendert.

Hinweise​

Hinweise