Einführung

Als Icony-Partner betreiben Sie vielleicht eigene Webseiten. Es bietet sich daher an, bestimmte Inhalte aus dem Icony-Netzwerk auf Ihren Seiten einzubinden. Das kann z.B. eine einfache Suchmaske sein, es ist aber auch möglich komplexere Inhalte, wie eine Liste aktueller Benutzeraktionen, anzuzeigen. Mit dieser API bieten wir Ihnen eine einfache Möglichkeit auf solche Inhalte zu zugreifen.

Die Icony JS-API wurde zur asynchronen Verwendung entwickelt, um zu verhindern, dass der Browser auf das Laden der Icony-Inhalte warten muss. Die API ist kompatibel zu allen gängigen Browsern.

Schnell-Start

Um die Icony JS-API nutzen zu können, kopieren Sie den folgenden kurzen JavaScript-Code in den <head>-Bereich Ihrer Webseite. Ersetzen Sie dabei unbedingt den Wert myPlatformId durch die tatsächliche ID Ihrer Partner-Plattform. Dadurch wird Ihre Icony-Plattform als Linkziel gesetzt. (Falls Sie nicht wissen, wie Ihre Plattform-ID lautet, wenden Sie sich gerne an uns!) 

<!-- Icony JS-API -->
<script>
  (function(i,c,o,n,y,j,s){i['IconyObject']=y;i[y]=i[y]||function(){function b(a){
  return a?(a^Math.random()*16>>a/4).toString(16):'i'+([1e7]+1e7).replace(/[018]/g,b)+1*new Date}
  var k=arguments;k.id=b();(i[y].q=i[y].q||[]).push(k);if(i[y].R){i[y].R()};return k.id;};
  j=c.createElement(o),s=c.getElementsByTagName(o)[0];j.async=1;j.src=n;s.parentNode.insertBefore(j,s)
  })(window,document,'script','//js.icony.com/api.js','icony');
  icony('create', 'myPlatformId');

  document.addEventListener("DOMContentLoaded", function(event) {
    icony('get', 'search', 'dom', function (response) {
      document.getElementById("mySearchBoxContainer").appendChild(response.data);
    }, {css_prefix: 'icony_'});
  });
</script>
<!-- End Icony JS-API -->

Bei der Ausführung des Codes, wird die API-Bibliothek asynchron geladen und in die Seite eingebunden. Außerdem wird eine globale Funktion mit dem Namen icony erzeugt (Zeile 3-7). Diese Funktion wird dann verwendet um Ihre Seite bei der Icony JS-API zu registrieren (Zeile 8).

Anschließend (Zeile 11-13) wird eine Anfrage an den API-Server geschickt, um eine einfache Suchmaske auf Ihrer Webseite einzubinden. Dazu müssen Sie noch in den <body> ihrer Webseite ein Container-Element mit der ID mySearchBoxContainer einfügen.

<div id="mySearchBoxContainer"></div>

Hinweis: Änderungen am DOM sollten erst durchgeführt, wenn dieser bereit ist. Führen Sie DOM-Manipulationen daher immer nur durch, wenn Sie sich dessen sicher sein können. Nutzen Sie dafür z.B. das DOMContentLoaded-Event oder spezielle Funktionen einer JavaScript-Bibilothek. (Beispiel jQuery: $(document).ready(handler))

War die Anfrage erfolgreich, so wird die Suchmaske als Kind dieses Elements in Ihre Seite eingefügt. Die Angabe des Plichtfelds css_prefix bestimmt, welche Klassennamen im CSS verwenden werden.

Suchmaske Ergebnis der Anfrage

Was kommt als nächstes

Im Schnell-Start haben Sie ein kleines Suchfeld auf Ihrer Webseite eingebunden und alles soweit vorbereitet, dass Sie unsere API jetzt vollständig ausnutzen können. Die nächsten Schritte haben wir Ihnen kurz zusammengefasst:

Referenzen

Für die Icony JS-API stehen derzeit die folgenden Referenzen zur Verfügung:

  • Methoden-Referenz - Auflistung und Details der möglichen API-Methoden.
  • Feld-Referenz - Umfassende Auflistung aller Optionen-Felder bei get-Anfragen.
  • Formate - Übersicht und Beschreibung der möglichen Antwortformate.
  • Modul-Referenz - Eine detaillierte Darstellung der verfügbaren Module.
  • Widget-Referenz - Auflistung und Beschreibung der verfügbaren Widgets.
  • Variablen-Referenz - Umfassende Auflistung aller Variablen für Widgets.
  • Fehlermeldungen - Kurze Erklärung der möglichen Fehlermeldungen.