Skip to main content

Installation Best Practices

Pointr widgets are easy to embed, but the surrounding page still matters. A good installation gives the iframe enough room, explains why it is there, and avoids host-page CSS that clips the widget.

Sizing​

Use width="100%" and control the maximum width with CSS.

<div style="max-width:480px">
  <iframe
    src="https://pointr.org/en/widget/booking/your-business-slug"
    width="100%"
    height="720"
    style="border:0;border-radius:12px"
    loading="lazy"
    title="Book an appointment with Pointr"
  ></iframe>
</div>

Recommended starting sizes:

WidgetHeightMax width
Booking720480px
Reviews760760px
Live Availability420480px
Service + Availability720760px
Mini Business Card360420px
Calendar820900px

Accessibility​

Always include a title attribute on the iframe.

title="Book an appointment with Pointr"

Add a visible heading before the widget when the page does not already explain the section.

<h2>Book your appointment</h2>

Performance​

Use lazy loading unless the widget is the first meaningful content on the page.

loading="lazy"

Avoid embedding more than two large widgets above the fold. For most pages, one primary widget and one trust widget are enough.

Layout Rules​

Do:

  • Put the iframe inside a normal block container.
  • Give the iframe enough height.
  • Test at 320px, 390px, 768px, and desktop widths.
  • Keep border:0 and use border radius on either the iframe or the container, not both.

Avoid:

  • Parent containers with overflow:hidden unless the height is carefully set.
  • CSS transforms on parent containers.
  • Very small fixed widths.
  • Nested iframes inside sliders or tabs that lazy-render incorrectly.

Security​

Use the exact Pointr widget URL. Do not proxy the widget through another domain unless you own the security headers and test the embed flow.

The main Pointr app is protected against framing. The widget routes are intentionally embeddable.

Testing Checklist​

  • The iframe loads without browser console frame errors.
  • The widget language matches the URL locale.
  • Text does not overflow horizontally.
  • Booking calls to action open the expected flow.
  • The page works with third-party cookie restrictions.
  • The iframe has a useful title.
  • The host page does not show two scrollbars unless the page itself is long.