Skip to main content

Next.js

For the App Router, a normal server component can render the iframe.

export default function BookingSection() {
  return (
    <section>
      <h2>Book an appointment</h2>
      <iframe
        src="https://pointr.org/en/widget/booking/your-business-slug"
        width="100%"
        height="720"
        style={{ border: 0, borderRadius: 12, maxWidth: 480 }}
        loading="lazy"
        title="Book an appointment with Pointr"
      />
    </section>
  );
}

Using Environment Values​

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

export function PointrBookingWidget({ slug, locale = 'en' }: { 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="Book an appointment with Pointr"
    />
  );
}

Common Pitfall​

If you use a strict Content Security Policy on the host site, allow Pointr as a frame source:

frame-src https://pointr.org;