Einbindung des Widgets

iFrame

Die vorerst einzige Möglichkeit unser Widget auf Deiner Seite einzubinden ist die klassische iFrame-Variante. Du kannst entweder die nachfolgende Beschreibung für die Einbindung des Widgets verwenden oder einfach den Code über unsere Partner-Seite generieren.

Snippet

Das iframe-Snippet kann an beliebiger Position auf der Seite eingefügt werden. Die Einbindung erfordert lediglich das folgende Snippet:

<iframe

id="meinereise"

src="https://widget.meinereise.org/"

style="border:0;width:100%;"

allow="geolocation; clipboard-write">

</iframe>

Solltest Du bereits mit unserer Partner-Seite einen Link mit Deinen persönlichen Einstellungen generiert haben, kannst Du diesen anstelle des Standard-URLs verwenden:

<iframe

id="meinereise"

src="---DEIN CUSTOM LINK---"

style="border:0;width:100%;"

allow="geolocation; clipboard-write">

</iframe>

Automatische Höhenanpassung

Um das Scrolling zu deaktivieren und die Höhe automatisch anzupassen, benötigt es zusätzlich die Einbindung folgendes Scripts:

<script defer src="https://cdn.meinereise.org/widget/meinereise.min.js"></script>

Solltest Du ein SPA (wie Vue, React, Svelte etc.) verwenden, kann folgende Funktion für die Höhenanpassung in Deiner Anwendung ausgeführt werden:

window.iFrameResize({}, "#meinereise")

Für die Anpassung des iFrames verwenden wir die Library iFrame Resizer. Hierfür gibt es unter anderem Ports für verschiedenste Frameworks. Außerdem hast Du die Möglichkeit weitere individuelle Anpassungen (wie Events und Options) festzulegen. Diese sind ebenfalls hier dokumentiert.

Vorschau