React

Create a small component so the widget URL and sizing stay consistent.

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 = 'en',
  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`}
    />
  );
}

Use it like this:

<PointrWidget type="booking" locale="en" slug="your-business-slug" />

Notes

Do not build the iframe URL from untrusted user input without validation.
Keep the component client-rendered if your framework does not support iframe rendering on the server.

Notes​

Notes