Freinet Online
64342 Burkhardtstraße 24
Seeheim-JugenheimGermany

Tel: +49 6257 - 5037290
.

Statt Iframe: Webcomponents

Mittels unserer Webcomponents können Sie die veröffentlichten Datensätze auf Ihrer Homepage zu präsentieren.

Auf Ihrer Homepage können Sie (bzw. Ihr Webmaster) an passender Stelle folgenden Quellcode einbauen:

<script type="module" src="https://www.freinet-online.de/js/webcomponent/app/v1/freinet-suche-web-component.esm.js"></script>

An der Stelle an der die Freinet Ehrenamtssuche integriert werden soll, kann das Custom-Tag <freinet-verwaltete-suche> verwendet werden. Üblicherweise wird das Tag im <body> Bereich der Webseite integriert. Es können beliebige andere HTML Elemente davor oder danach verwendet werden. Ebenso die Integration des Custom-Tags in andere Elemente (z.B. ein <div> o.ä.) ist möglich.

<freinet-verwaltete-suche></freinet-verwaltete-suche>

Das einfachste Setup wäre z.B.

<html>
   <head>
      <script type="module" src="https://www.freinet-online.de/js/webcomponent/app/v1/freinet-suche-web-component.esm.js"></script>
   </head>
   <body>
      <freinet-verwaltete-suche api-key="IHR_API_KEY"></freinet-verwaltete-suche>
   </body>
</html>

 

Konfiguration der Ehrenamtssuche

Es stehen folgende Attribute bereit, die mit dem Tag verwendet werden können.

Attributname Datentyp und Beispiel Beschreibung

backend-url (Optional)

Ist vom Datentyp string. Ein Beispiel für eine Konfiguration ist z.B. https://freinet-online.de/query/webcomponents/

Dieses Optionale Attribut ermöglicht es die Suchkonfiguration von einer bestimmten URL nachzuladen. Üblicherweise bleibt dieses Attribut unkonfiguriert, da die Web Component der Ehrensamtssuche bereits ohne explizit Angabe eine gültige Konfiguration mitliefert.

api-key (Optional)

Ist vom Datentyp string.

Ist bei jeder load-module-Option, bis auf load-module="eak" ein Pflichtattribut!

eak-agid (Optional)

Ist vom Datentyp number.

Wird nur bei load-module="eak" benötigt!

load-module (Optional)

Ist vom Datentyp string.

Default: angebot

Kann folgende Werte annehmen:

angebot [api-key pflicht]

veranstaltung [api-key pflicht]

veranstalter [api-key pflicht]

eak [eak-agid pflicht]

Dieses Attribut ändert je nach Option den Endpunkt, an dem die Daten zu dem jeweiligen Modul abgeholt werden. Je nach Option wird ein zusätzliches Attribut, wie api-key oder eak-agid pflicht.

avoid-iframe-modal (Optional)

Ist vom Datentyp boolean.

Default: false.

Dieses Attribut ermöglicht es Ihnen das Verhalten der Weiterempfehlungslink’s anzupassen. Standardmäßig öffnen diese in einem iFrame-Modal. Wird diese Option gesetzt, öffnen diese danach in einem neuen Tab.

disable-load-spinner (Optional)

Ist vom Datentyp boolean.

Default: false.

Das Attribut ermöglicht es Ihnen die Ladeanzeige der Web-Component zu deaktivieren.

disable-autoscroll (Optional)

Ist vom Datentyp boolean.

Default: false.

Ermöglicht das Deaktivieren des Auto-Scrolling-Features, womit der Nutzer zum Anfang der Ergebnisliste/des Angebots gescrollt wird, falls dieses nicht im Sichtfeld des Nutzers liegt.

Restriktionen auf der eigenen Website

Das Verhalten der Web-Component wird, bis auf einen GET-Parameter fos-module, größtenteils mit dessen Fragement-Identifikator z.B. #/suche? und folgendem beeinflusst.

Die Verwendung der selbigen GET-Parameter und auch Fragmente sollten auf Ihrer Seite vermieden werden, um die Funktionalität der Web-Component zu gewährleisten.

Allgemeine Selektoren ihrer Seite, wie z.B. auf ein <a>-Tag können das Verhalten/Aussehen auch von selbigen Elementen innerhalb der Web-Component beeinflussen.

Diese Web-Component lädt dynamisch Javascript und CSS von Freinet-Servern nach.

Angewandt werden diese Inhalte jedoch größtenteils auf Elemente innerhalb der Web-Component.