Selector in Webseite einbinden

Der Selector kann auf einer beliebigen Webseite oder Landing-Page oder in ein CMS integriert werden. Dies kann als Snippet- oder iFrame-Integration erfolgen.

Einbindung als Snippet

Um den Selector an der gewünschten Position einzubetten (z.B. als WordPress-Plugin, Jimdo-Erweiterung, etc.), verwenden Sie bitte das unten stehenden Code-Snippet:

<script
id="foxbase-selector-bootstrap"
src="https://digitizer.app/selector/index.js"
data-selector-id="ID DES SELECTORS"
data-scroll-adjust="0"
data-lang="de_DE">
</script>

Alle Parameter, bis auf die data-selector-id, sind optional. Eine verkürzte Version ist:

<script
id="foxbase-selector-bootstrap"
src="https://digitizer.app/selector/index.js"
data-selector-id="ID DES SELECTORS">
</script>

Erklärung der Snippet-Parameter

• data-selector-id: Hier muss die ID des Selectors eingefügt werden. Die Selector ID kann u.a. in der URL gefunden werden:

• data-scroll-adjust: Hiermit wird der Abstand zum Header festgelegt. Ideal für floating headers.
• data-lang: Mit diesem Parameter kann die Sprache festgelegt werden, wenn Übersetzungen vorliegen. Die Sprache Ihres Selectors, beispielsweise en_EN für Englisch oder de_DE für Deutsch, können Sie auch in der URL-Endung erkennen.

Einbindung als iFrame

Alternativ kann der Selector auch über die Selector-URL als iFrame eingebunden werden:

<iframe
id="responsive-iframe"
src="URL DES SELECTORS"
width="100%"
height="1000px"
name="Selector-Name"
title="Selector-Titel">
</iframe>

Erklärung der iFrame-Parameter

• id: Eine iFrame id kann optional hinzugefügt werden.
• src: Hier muss die gesamte URL, mit der Ihr Selector aufgerufen wird, eingefügt werden. Ein Beispiel ist die im oben stehenden Bild zu sehende Selector-URL.
• width und height: Für die iFrame-Integration müssen Breite und Höhe des iFrames angegeben werden. Dies kann über „width“ und „height“ erfolgen oder mittels
  style="width: 100%; height: 500px; border: 0px; outline: 0px;"
• name und title: Optional kann ein Name und Titel des Selectors hinzugefügt werden.
  

Automatische Anpassung der iFrame-Höhe

Wenn Sie Ihren Selector per iFrame einbinden, werden die Inhalte in ein Fenster innerhalb Ihrer Website geladen. Damit sich das iFrame dynamisch an die Höhe des Selectors anpasst, fügen Sie unter den iFrame folgenden Code ein:

<script src="https://cdn.foxbase.de/files/js/iframeResizer.min.js"></script>
<script>
iFrameResize({ log: false }, '#the iframe id');
</script>

Das Element #the iframe id ersetzen Sie durch die ID des iFrames. Anschließend passt sich das iFrame automatisch an die Höhe Ihres Selectors an.

Beispiel der Einbindung in WordPress via Snippet:

Fügen Sie das Code Snippet an der entsprechenden Stelle der Webseite ein, wo es zu sehen sein soll.