Integration
Ein Embed Code kann Inhalte aus einem Content Pool via HTML-Code darstellen. Die Embed Codes, die mit Flyo generiert werden, basieren auf Web Components und funktionieren mit allen gängigen Browsern. Sie eignen sich zur einfachen Integration von Inhalten aus Flyo auf einer bestehenden Webseite.
Beispiel für einen Embed Code:
<script src="https://embed.flyo.cloud/embed.min.js"></script>
<embed-list id="XX" token="123123123123123123123123123123123"></embed-list>Layout
Ein Embed Code kann mit unterschiedlichen Layouts dargestellt werden. Die einzelnen Layouts werden in den Einstellungen der Integration in Flyo konfiguriert. Die zur Verfügung stehenden Layouts bieten unterschiedlich viel Platz für Informationen und setzen den Fokus entweder auf visuelle (z.B. Layout "Karten") oder Textelemente (z.B. Layout "Kompakte Liste").
((Grafik Layouts))
Embed Code einbinden
Wenn immer möglich, sollte der Script-Teil <script src="https://embed.flyo.cloud/embed.min.js"></script> in die <head> Section einer Webseite eingebunden werden und der Script-Teil für den Inhalt <embed-list id="XX" token="1234"></embed-list> am eigentlichen Ausgabeort eingebunden wird:
<html>
<head>
<title>Meine Webseite</title>
<script src="https://embed.flyo.cloud/embed.min.js"></script>
</head>
<body>
<p>Hier kommt mein Embed Code:</p>
<embed-list id="XX" token="1234"></embed-list>
</body>
</html>Werden mehrere Embed Codes auf einer Seite eingebunden, sollte das embed.min.js-Script nur einmal eingebunden werden.
Schriftgrösse
Embed Codes verwenden Schriftgrössen in der Einheit em. Dies bedeutet, dass die Schriftgrösse relativ zur Schriftgröße des übergeordneten Elements (z. B. div, body) bestimmt wird.
In folgendem Beispiel wird die Basis-Schriftgrösse durch das div auf 18px gesetzt:
<div style="font-size:18px">
<embed-list id="80" token="Token" />
</div>Die Angabe 18px setzt die Basis-Schriftgrösse (100%, 1em) innerhalb des Embed Codes auf 18px fest. Jede Angabe in em innerhalb dieses Containers verhält sich relativ zu diesen 18px. Das bedeutet, dass der Embed Code dynamisch mit unterschiedlichen Schriftgrössen arbeitet, je nachdem, wie em im Code verwendet wird. Ein Beispiel:
<div style="font-size:18px">
<embed-list>
<p style="font-size:1em">Dieser Text hat eine Schriftgröße von 18px.</p>
<p style="font-size:1.5em">Dieser Text hat eine Schriftgröße von 27px (1.5 × 18px).</p>
</embed-list>
</div>Der Embed Code arbeitet also mit relativen Werten, sodass die Schriftgrösse proportional zur festgelegten Basis-Schriftgrösse (18px) angepasst wird. Wenn du die Basisgrösse im übergeordneten Element änderst, passen sich auch alle em-basierten Schriftgrössen entsprechend an.
Schriftart
Die Schriftart wird von den allgemeinen CSS-Regeln im <body> oder <html>-Tag übernommen. In diesem Fall wird die Schriftart Arial für alle untergeordneten Elemente, einschliesslich des List-Embed Code, verwendet. Ein Beispiel:
<html style="font-family: Arial, sans-serif;">
<body>
<div style="font-size:18px">
<embed-list id="80" token="Token" />
</div>
</body>
</html>Legacy Mode für ältere Browser
Embed Codes verwenden eine moderne Form von Javascript-Komponenten, welche von älteren Browsern nicht unterstützt werden. Dies gilt insbesondere für den Microsoft Internet Explorer 11 und älter. Wenn diese Versionen dennoch unterstützt werden sollen, muss zusätzlich das folgende Script eingebunden werden:
<script src="https://unpkg.com/@webcomponents/webcomponentsjs@2.4.3/webcomponents-loader.js"></script>