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#

Last updated on