Docs

Appearance

Was sind
Integrationen?

Flyo bietet vielseitige Integrationsmöglichkeiten, um Inhalte nahtlos mit anderen Diensten, Anwendungen und Systemen zu verbinden. Ein besonderer Vorteil: Jede Integration kann durch einen geführten Prozess aktiviert werden. Dieser Prozess begleitet die Nutzer Schritt für Schritt und ermöglicht es, die jeweiligen Tools schnell und ohne tiefgreifende technische Kenntnisse einzurichten und zu nutzen.

Integrationen ermöglichen die Verbindung der Inhalte in Flyo mit externen Tools, Diensten und Plattformen sowie die Entwicklung eigener Anwendungen oder Webseiten.

Inhalte aus Flyo werden dabei immer über die Content Pools den Integrationen zur Verfügung gestellt. Eine Integration hat also immer diejenigen Inhalte zur Verfügung, die via Content Pool der Integration zur Verfügung gestellt werden.

Die einfachste Möglichkeit bietet die Integration von Inhalten mittels HTML Embed Code dar.

Darüber hinaus unterstützt Flyo das Synchronisieren von Inhalten mit bekannten Tools und Plattformen, darunter Webflow (Webseiten), Mailjet (Newsletter), SignageOS (Digital Signage), eCommerce (Shopify), Grafikdesign (Canva)  oder Social Media Netzwerken wie Facebook, Instagram, X, LinkedIn und weiteren.

Zusätzlich können mit Flyo beliebige API-Endpunkte und SKDs generiert werden, die exakt die benötigten Inhalte aus Flyo bereitstellen.

Die Nitro-Integration verwandelt den Flyo Content Hub in ein vollumfängliches Headless CMS: Inhalte und Webseiten-Struktur können dabei direkt in Flyo administriert werden, während die bereitgestellten Endpunkte die Entwicklung moderner Frontends mit maximaler Flexibilität ermöglichen.

Zu jeder Integration findest du in dieser Dokumentation detaillierte Informationen. Bevor du weitergehst, solltest du dich aber noch mit ein paar generellen Aspekten zu Integrationen vertraut machen.

Rate Limit ​

Alle Anfragen an die Server von Flyo unterliegen einem Rate Limiting. Das Rate Limiting ermöglicht maximal 50 Anfragen innerhalb eines Zeitraums von 10 Sekunden. Wenn dieses Limit überschritten wird, antwortet der Server mit dem Status Code 429 Too Many Requests. Der anfragende Host wird vorübergehend blockiert und kann während dieser Zeit keine neuen Anfragen an die Server senden.

Für APIs ist ein Limit von 50 Anfragen innerhalb eines Zeitraums von 10 Sekunden festgelegt. Dadurch können SDKs mit dem Parameter per-page=100 innerhalb von 10 Sekunden maximal 5000 Datensätze abrufen.

Limiten ​

  • api.flyo.cloud/integration —> 50 Anfragen in 10 Sekunden
  • api.flyo.cloud/sdk —> 50 Anfragen in 10 Sekunden
  • api.flyo.cloud/nitro —> 50 Anfragen in 10 Sekunden
  • api.flyo.cloud/venue —> 50 Anfragen in 10 Sekunden

Auslöseverzögerung ​

Um unnötige und ständige Aktualisierungen von Integration zu vermeiden, kann die verzögerte Aktualisierung angewendet werden. Ist kein Wert (bzw. der Wert 0 eingestellt), löst jede Änderung an Inhalten, die in der Integration vorkommen, eine Aktualisierung aus. Jeder Änderung an Inhalten innerhalb der Verzögerungszeit setzt den Countdown bis zur Aktualisierung der Integration zurück.

Beispiel ​

Es gibt eine API-Integration, die Blogbeiträge beinhaltet. Die Verzögerte Aktualisierung ist auf 15 Minuten eingestellt:

  • 10:00 Uhr —> Benutzer A aktualisiert einen Blog. Die Integration würde um 10:15 Uhr aktualisiert.
  • 10:05 Uhr —> Benutzer B aktualisiert einen Blog. Die Aktualisierung der Integration von 10:15 Uhr wird nun gelöscht und eine neue Aktualisierung für 10:20 Uhr wird eingereiht.

Der Standardwert der verzögerten Aktualisierung liegt bei 5 Minuten, wenn es sich um eine Integration handelt, die Daten an Dritte sendet (z.B. Shopify, Webflow, Algolia, SignageOS). Andernfalls ist standardmässig keine (0 Minuten) Verzögerung definiert. Du findest diese Einstellung im Bearbeiten-Menü einer Integration. Das Feld erlaubt nur numerische Werte. Die verzögerte Aktualisierung gilt nicht, wenn du eine Integration aus dem Integration-Bearbeiten-Kontext heraus von Hand speicherst.

Die verzögerte Aktualisierung gilt ebenfalls nicht, wenn sich ein Content Pool verändert (z.B. durch Hinzufügen in einen Pool, Herausplanen oder wenn er nicht mehr den Bedingungen entspricht).

Wichtig: Es wäre theoretisch möglich, dass bei einer langen Verzögerung und ständigen 24/7-Änderungen an Inhalten die Integration nie aktualisiert wird. Der Wert sollte also nicht zu hoch gesetzt werden.

Wann ist diese Funktion sinnvoll? ​

  • Wenn verschiedene Autoren Inhalte aktualisieren oder hinzufügen, löst dies jeweils eine neue Verarbeitung der damit verknüpften Integrationen aus. Dies führt zu vielen Server-Minuten und somit einem höheren Credits-Verbrauch.
  • Integrationen, die ein Caching benutzen, werden durch viele Änderungen und somit Aktualisierungen der Integration einem ständigen "Cache Busting" unterzogen, und der Cache muss sich ständig neu aufbauen. Dies kann infrastrukturintensiv sein.
  • Wenn Daten zu externen Diensten synchronisiert werden (z.B. Shopify, Algolia), unterliegen diese meist einem Rate Limit. Bei ständiger Dateneingabe und somit Auslösung der Integration werden diese APIs häufig aufgerufen.

Metriken ​

Bestimmte Integration bietet out-of-the-box eine Möglichkeit zur Messung von Impressions. Dies geschieht anhand eines Tracking Pixels oder einer Schnittstellen-URL, welche aufgerufen werden kann..

Die mit dem Tracking Pixel gemessenen Impressionen werden verwendet, um Statistiken in Flyo (z.B. auf dem Dashboard oder im Bereich Statistiken) zu generieren.

Info: Die Messung der Impressions ist nicht zu verwechseln mit Requests. Requests zählen die Schnittstellen-Anfragen, die an die Flyo-Server gemacht werden und zur Ermittlung der genutzten Credits benutzt werden.

Was gilt als Impression?​ ​

  • Webflow, API, SDK, Nitro: Misst eine Impression, sobald die Tracking-URL aufgerufen wird. Vergleichbar mit einem klassischen Seitenaufruf.
  • Embed Codes: Misst eine Impression, sobald ein Eintrag für mindestens 4 Sekunden zu 75% im sichtbaren Bildschirmbereich ist. Das Tracking geschieht automatisch und muss nicht aktiviert oder zusätzlich implementiert werden.
  • Signage OS: Misst eine Impression, sobald der generierte QR-Code auf einer Signage-Folie gescannt wurde. Vergleichbar mit einem Klick auf einer Webseite.
  • Map: Misst eine Impression, wenn ein Eintrag in der Map angeklickt und der weiterführende Link aufgerufen wird. Das Tracking geschieht automatisch und muss nicht aktiviert oder zusätzlich implementiert werden.

Einbau via Tracking Pixel ​

Das Tracking Pixel ist für HTML-Seiten oder Seiten ohne dedizierte Backend-Entwicklung geeignet. Es ist ein 1x1 Pixel grosses Bild ohne Ausgabe und kann somit an jeder Stelle auf der Seite eingebunden werden. Diese Art des Tracking Pixel kommt beispielsweise bei Webflow zum Einsatz.

Einbau via API ​

Die API kann für Backend- und Frontend-Anwendungen genutzt werden. Die URL beinhalten keine CORS Restriktionen und können somit auch direkt im Frontend aufgerufen werden.

Beispiel mit JavaScript fetch:

fetch('https://api.flyo.cloud/FLYO_CLOUD_METRIC_API_URL')

Beispiel mit PHP curl:

php
<?php
$ch = curl_init();
curl_setopt($ch, CURLOPT_URL, "https://api.flyo.cloud/FLYO_CLOUD_METRIC_API_URL");
curl_exec($ch);
curl_close($ch);

Mehrere Tracking-Anfragen via API: Es kommt vor, das mehrere Tracking-Anfragen gleichzeitig in einen Request gepackt werden sollen, um die Wartezeit innerhalb des Scripts (Stichwort IO Blocking) zu verkürzen und die generelle Laufzeit des Scripts zu verringern. Um mehrere Tracking-Hashes zu senden, kann der Endpunkt https://api.flyo.cloud/integration/metrics mittels POST request mit Content-Type: application/json aufgerufen werden. Das Array muss jeweils die hashes oder alternativ die API-URL (die den hash ebenfalls enthält) beinhalten.

Hier ein Beispiel Payload welcher auch in Kombination funktioniert:

php
[
    "https://api.flyo.cloud/integration/metric/h/5f1b6641a7af7ee4-46-schema",
    "3d8dd5075f5db664917-58-schema",
]

Weitere Informationen zum Tracking findest du in den jeweiligen Abschnitten der einzelnen Integrationen.

Template Engine ​

Die Nutzung einer Template Engine für Vorlagen verbessern die Organisation des Codes, trennen die Anwendungslogik von der Präsentation und erhöhen die Sicherheit. Sie bieten weitaus bessere Funktionen und aussagekräftigere Möglichkeiten zur Erzeugung von HTML als PHP selbst.

Flyo verwendet die Template Engine an verschiedenen Stellen, wie z.B. für die Erstellung von E-Mails, der Generierung von HTML-Code und der Erstellung von benutzerdefinierten Elementen im WYSIWYG-Editor.

Flyo nutzt das Template-System Latte im Strict-Modus, was bedeutet, dass du dich auf die grundlegenden Funktionen von Latte beschränken musst. Latte ist bekannt für seine Einfachheit und Leistungsfähigkeit, wodurch es besonders leicht zu erlernen und benutzerfreundlich ist. Latte hat die gleiche Syntax wie PHP. Es unterscheidet sich nur in der Schreibweise der Tags, statt <?= und ?> bevorzugt es die kürzeren { und }.

Um Variablen anzusprechen, verwende die Syntax {$name}. Die Existenz von Variablen kannst du mit den Konstrukten {if $name}, {else} und {/if} überprüfen. Für die Integration von Einträgen in deine Templates nutze {foreach $items as $item} und {/foreach}.

Abstand in Variable Name: Achtung, der Syntax { $name } ist nicht valid, es dürfen keine Leerzeichen verwendet werden, um auf eine Variable zuzugreifen. { $name } ➔ {$name}.

Schauen wir uns ein Beispiel an, wie du prüfen kannst, ob die Variable $image vorhanden ist. Wenn ja, wird das Bild angezeigt; andernfalls erscheint eine Meldung, dass das Bild nicht existiert:

{if $image}
  <img src="{$image}" alt="Bildbeschreibung" />
{else}
  Das Bild existiert nicht.
{/if}

Nun zu weiteren Codebeispielen, die zeigen, wie du Latte für verschiedene Aufgaben nutzen kannst.

Schleifen mit foreach nutzen​ ​

Um eine Liste von Items durchzugehen, kannst du foreach verwenden. Hier ein Beispiel, wie du eine Liste von Produktnamen ausgeben könntest:

html
<ul>
{foreach $products as $product}
  <li>{$product->name}</li>
{/foreach}
</ul>

Bedingte Anweisungen nutzen ​

Du kannst mit if-Anweisungen Bedingungen in deinem Template setzen. Hier ein Beispiel, wie du prüfen kannst, ob ein Benutzer eingeloggt ist:

{if $loggedIn}
  Willkommen zurück, {$username}!
{else}
  Bitte logge dich ein, um fortzufahren.
{/if}

Variablen und Filter ​

Das Template-System ermöglicht dir auch, Filter zu nutzen, um die Ausgabe deiner Variablen zu modifizieren. Angenommen, du möchtest den Namen eines Benutzers grosschreiben:

Hallo, {$username|upper}!

Latte bietet eine Vielzahl von Filtern, die du in deinen Templates nutzen kannst, um die Ausgabe deiner Variablen zu manipulieren und zu formatieren. Hier ist eine Liste der verfügbaren Filter in Latte, inklusive einer Verlinkung zur offiziellen Latte-Website für weitere Details und Beispiele. Bitte beachte, dass sich die Liste der Filter und ihre Funktionalitäten mit zukünftigen Versionen von Latte ändern können. Daher ist es immer eine gute Idee, die offizielle Latte-Dokumentation zu konsultieren.

Standardfilter:

  • |date: Formatieren von Datums- und Zeitangaben.
  • |time: Wandelt eine Zeitangabe in einen lesbaren Text um.
  • |number: Formatierung von Zahlen.
  • |currency: Formatierung von Beträgen als Währung.
  • |trim: Entfernt Leerzeichen vom Anfang und Ende eines Strings.
  • |upper: Wandelt einen String in Großbuchstaben um.
  • |lower: Wandelt einen String in Kleinbuchstaben um.
  • |capitalize: Macht den ersten Buchstaben eines Strings groß.
  • |firstUpper: Macht den ersten Buchstaben eines Strings groß, ohne andere zu ändern.
  • |substr: Gibt einen Teilstring zurück.
  • |stripTags: Entfernt HTML- und PHP-Tags aus einem String.
  • |safeUrl: Bereinigt eine URL, um sie sicher in einem href- oder src-Attribut verwenden zu können.
  • |replace: Ersetzt Teile des Strings durch einen anderen.
  • |nl2br: Wandelt Zeilenumbrüche in <br> Tags um.
  • |repeat: Wiederholt den String mehrfach.
  • |batch: Gruppiert Elemente in einem Array in Batches fester Größe.
  • |indent: Fügt vor jede Zeile eines Strings einen bestimmten String ein.
  • |escape: Escaped einen String für die sichere Ausgabe in HTML.
  • |noescape: Markiert einen String als sicher, sodass er nicht automatisch escaped wird.

Die vollständige Liste der Filter und ihre detaillierten Beschreibungen findest du auf der Latte-Website unter dem Abschnitt "Filters". Dort findest du auch Beispiele und Anwendungsfälle für jeden Filter, was besonders nützlich ist, wenn du neu in der Verwendung von Latte bist oder spezifische Funktionalitäten für dein Projekt benötigst.

All rights reserved. Proudly developed in Switzerland by Heartbeat GmbH.