Selektor in Webseite einbinden

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

⚠️ Hinweis: Selektor-Whitelisting ist unbedingt erforderlich

Unabhängig davon, für welche Art der Integration Sie sich entscheiden: Jede Website, auf der Sie Ihren Selektor implementieren möchten, muss vorab von FoxBase per Whitelisting freigeschaltet werden. Auf diese Weise ist Ihr Selektor sicher eingebettet und vor unerwünschter Nutzung durch Dritte geschützt. Bitte fragen Sie das Whitelisting bei Ihrem persönlichen Customer Success Manager an. In der Regel erfolgt die Freischaltung innerhalb eines Tages. Bitte geben Sie uns jedoch mindestens eine Woche vor dem geplanten Go-live Bescheid.

Einbindung als Snippet

Um den Selektor 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 SELEKTORS"
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 SELEKTORS"
</script>

Erklärung der Snippet-Parameter

• data-selector-id: Hier muss die ID des Selektors eingefügt werden. Die Selektor 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 Selektors, beispielsweise en_EN für Englisch oder de_DE für Deutsch, können Sie auch in der URL-Endung erkennen.

Staging-Selektor in Website einbinden

Anstelle des Live-Selektors kannst Du auch den Staging-Selektor einbinden. Dies ist sinnvoll, wenn Du innerhalb einer Testumgebung prüfen möchtest, wie Änderungen an der Selektor-Konfiguration für Deine Endnutzer aussehen werden, bevor Du den Arbeitsstand publishst.

Ergänze hierfür data-staging="true" im Snippet-Code:

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

Einbindung als iFrame

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

<iframe id="responsive-iframe" 
src="URL DES SELEKTORS" 
width="100%" 
height="1000px" 
name="Selektor-Name" 
title="Selektor-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 Selektor aufgerufen wird, eingefügt werden. Ein Beispiel ist die im oben stehenden Bild zu sehende Selektor-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 Selektors hinzugefügt werden.

Automatische Anpassung der iFrame-Höhe

Wenn Sie Ihren Selektor per iFrame einbinden, werden die Inhalte in ein Fenster innerhalb Ihrer Website geladen. Damit sich das iFrame dynamisch an die Höhe des Selektors 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. Wichtig ist, dass Sie hierbei den Hashtag „#“ nicht entfernen. Anschließend passt sich das iFrame automatisch an die Höhe Ihres Selektors 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.