Installations-Best-Practices

Pointr Widgets sind einfach einzubauen, aber die umgebende Seite ist trotzdem wichtig. Eine gute Integration gibt dem iframe genug Platz, erklärt den Kontext und verhindert CSS, das den Inhalt abschneidet.

Größe

Verwende width="100%" und begrenze die maximale Breite mit CSS.

<div style="max-width:480px">
  <iframe
    src="https://pointr.org/de/widget/booking/ihr-unternehmen"
    width="100%"
    height="720"
    style="border:0;border-radius:12px"
    loading="lazy"
    title="Termin mit Pointr buchen"
  ></iframe>
</div>

Widget	Höhe	Maximale Breite
Booking	720	480px
Reviews	760	760px
Live Availability	420	480px
Service + Availability	720	760px
Mini Business Card	360	420px
Calendar	820	900px

Barrierefreiheit

Setze immer ein aussagekräftiges title-Attribut.

title="Termin mit Pointr buchen"

Performance

Nutze Lazy Loading, außer das Widget ist der wichtigste Inhalt direkt am Seitenanfang.

loading="lazy"

Layout-Regeln

Empfohlen:

• iframe in einen normalen Block-Container setzen.
• Ausreichend Höhe geben.
• Bei 320px, 390px, 768px und Desktop testen.
• border:0 verwenden und Border Radius entweder am iframe oder am Container setzen.

Vermeiden:

• Parent-Container mit overflow:hidden, wenn die Höhe nicht sauber gesetzt ist.
• Sehr kleine fixe Breiten.
• iframes in Slidern oder Tabs, die Inhalte fehlerhaft lazy rendern.

Sicherheit

Nutze die exakte Pointr Widget-URL. Die Haupt-App ist gegen Framing geschützt; die Widget-Routen sind bewusst einbettbar.

Test-Checkliste

• Das iframe lädt ohne Frame-Fehler in der Browser-Konsole.
• Die Sprache passt zum URL-Locale.
• Kein horizontaler Überlauf.
• Buchungs-CTAs öffnen den erwarteten Flow.
• Das iframe hat einen sinnvollen title.