1) Einbindung der Topangebote via ›Webomponents‹

Mittels unserer Webcomponents (oder Webkomponenten) können Sie die, als „Topangebote“ markierten ehrenamtlichen Tätigkeiten (Angebote) 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/topoffer/v1/freinettopoffercomponent.esm.js"></script>

An der Stelle an der die Topangebote integriert werden sollen, 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-topoffer></freinet-topoffer>

Das einfachste Setup wäre z.B.

<html>
   <head>
      <script type="module" src="https://www.freinet-online.de/js/webcomponent/topoffer/v1/freinettopoffercomponent.esm.js"></script>
   </head>
   <body>
      <freinet-topoffer agid="{AGENTUR_ID}" styleid="{STYLE_ID}" detail-url="{URL_ZUR_WEBCOMPONENT}" {default | minimal | list}></freinet-topoffer>
   </body>
</html>

 

Konfiguration der „Topangebote“

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

Attributname Datentyp und Beispiel Beschreibung

agid

Ist vom Datentyp number.

Die ID des Mandanten (AgenturID)

styleid

Ist vom Datentyp number.

Dieses Attribut bestimmt den Veröffentlichungskanal, über den auf die veröffentlichten Angebote zugegriffen werden kann.

detail-url (Optional)

Ist vom Datentyp string.

Wenn Sie auf Ihren Unterseiten auch unsere Angebots-Webkomponente veröffentlicht haben, können Sie hier die URL dazu nennen, z.B. https://www.meine-homepage.de/ehrenamtssuche

Attribut {default | minimal | list} (Optional)

Ist vom Datentyp string.

Default: default.

Das Attribut ermöglicht es Ihnen die den Umfang der Darstellung zu beeinflussen. Die Webkomponenten liefert drei Zustände aus, die Sie nach belieben mit CSS nachgestalten können.

default liefert Bild, Angebotstitel, Einrichtungstitel und Kurzbeschreibung aus. (Je nach Einstellung erscheint zusätzlich ein ›Mehr Informationen‹ Button und ein Drucken-Button)

minimal liefert Bild, Angebotstitel, Einrichtungstitel aus. (Je nach Einstellung erscheint zusätzlich ein ›Mehr Informationen‹ Button und ein Drucken-Button)

list liefert Angebotstitel (als Link) sowie Einrichtungstitel aus.

* der ›Mehr Informationen‹ Button erscheint nur, wenn Sie den Parameter ›detail-url‹ verwenden.

 

 

2) Einbindung der Topangebote via ›JSON-Objekt‹ und z.B. JQuery

Die Topangebote können auch als Json-Objekt abgefragt werden.
Dieses Objekt kann leicht mit einem Ajax-Request und ein wenig JQuery ausgegeben werden (z.B. als Carousel)

https://www.freinet-online.de/query/iframe/topoffer.php?agid={agentur_id}&styleid={style_id}&frametyp=20&return_as=json