Die Venue Integration ermöglicht es ausgewählten Content-Administratoren, Inhalte zu deinem Flyo hinzuzufügen oder zu bearbeiten, ohne dass sie direkten Zugang zur Flyo-Administration benötigen. Dieser Bereich ist klar abgegrenzt und erlaubt den Administratoren nur den Zugriff auf spezifische Inhalte, für die sie berechtigt sind. Sie können entweder bestehende Inhalte bearbeiten oder, sofern sie die entsprechende Berechtigung haben, neue Inhalte hinzufügen. Als Flyo-Benutzer kannst du diese Inhalte anschliessend prüfen und freigeben.
Ein typisches Anwendungsbeispiel ist die Verwaltung von Veranstaltungen in deinem Flyo, bei der externe Partner die Pflege der Veranstaltungen übernehmen sollen. Über die Venue Integration erhalten diese Partner Zugriff auf die entsprechenden Veranstaltungsinhalte und können diese bearbeiten oder neue Veranstaltungen erstellen.
Die Venue Integration kann entweder direkt über einen Vue App Embed Code eingebunden werden oder mittels der API-Schnittstellen, die Venue bereitstellt, um die Integration nahtlos in deine eigene Anwendung zu integrieren. Dies ermöglicht es, die Venue Integration mit einem individuellen Look & Feel an das Design deiner Applikation anzupassen.
Konfiguration Venue-Integration
Die Venue-Integration bezieht sich wie alle Integrationen auf einen oder mehrere Pools. Wenn z.B. eine weitere Entität über die Venue-Integration verwaltet werden soll, muss der entsprechende Content Pool zugeordnet werden.
User werden pro Content Pool berechtigt. Bei einer Änderung der zugrundeliegenden Content Pools müssen auch die entsprechenden Berechtigungen ergänzt werden
Welche Felder können durch Venue-Users editiert werden? Können Venue-Users neue Einträge erstellen oder nur bestehende bearbeiten?
Dies lässt sich pro Entität konfigurieren. Standardmässig können Venue-Users alle Pflichtfelder editieren.
Content-Administratoren
Content-Administratoren (Venue-Users) sind externe Personen, die Inhalte pflegen, ohne Zugang zur eigentlichen Flyo-Oberfläche zu haben. Sie werden pro Content Pool berechtigt: Wird ein weiterer Content Pool zur Venue-Integration hinzugefügt, müssen die entsprechenden Benutzer auch für diesen Pool berechtigt werden.
Einen externen Content-Administrator fügst du im Content Editor eines Eintrags hinzu. Sobald ein Content-Administrator hinzugefügt wurde, kann er sich im Venue-Loginbereich anmelden und die für ihn freigegebenen Einträge bearbeiten oder (sofern berechtigt) neue Einträge erstellen.
Alle von Content-Administratoren erstellten oder geänderten Inhalte kannst du als Flyo-Benutzer anschliessend prüfen und freigeben. Wie Content-Administratoren mit der Venue-Oberfläche arbeiten, ist im Abschnitt Venue Oberfläche beschrieben.
Vue Embed Code
Die Vue-App kann direkt in deine Webseite eingebunden werden, indem ein einfacher HTML-Code verwendet wird. Wenn Vue 3 bereits in deiner Webseite integriert ist, ist es nicht erforderlich, Vue erneut einzubinden, da die vorhandene Instanz genutzt werden kann.
<script src="https://unpkg.com/vue@3/dist/vue.global.prod.js"></script>
<script src="https://venue.flyo.cloud/venue.umd.min.js"></script>
<link rel="stylesheet" href="https://venue.flyo.cloud/venue.css">
<div id="venueApp">
<venue id="XYZ" token="XYZXYZXYZXYZ"></venue>
</div>
<script>Vue.createApp({components: {venue: venue}}).mount('#venueApp')</script>Verwende
venue.umd.min.jsund nichtvenue.umd.js: die minifizierte Datei ist rund einen Viertel so gross (32 KB statt 61 KB gzip) und ansonsten identisch.
Die ID und Token findest du in der Flyo Integration.
Attribute
| Attribut | Pflicht | Beschreibung |
|---|---|---|
id | ja | ID der Venue-Integration |
token | ja | Token der Venue-Integration |
theme | nein | light (Standard), dark, auto oder inherit. Siehe Design anpassen. |
api | nein | Abweichender API-Endpunkt, standardmässig https://api.flyo.cloud/venue |
Design anpassen
Der Embed bringt ein eigenes, framework-freies Stylesheet mit. Schrift, Schriftgrösse und Textfarbe erbt er automatisch von deiner Seite, auch in den Formularfeldern. Farben, Eckenradien und Abstände steuerst du über --flyo-venue-* CSS-Variablen. Diese darfst du überall setzen, zum Beispiel auf :root, und sie gewinnen unabhängig von der Reihenfolge deiner Stylesheets.
:root {
--flyo-venue-radius: 12px;
--flyo-venue-color-primary: #b8112c;
}Alle Details, die vollständige Variablenreferenz sowie Beispiele für Tailwind und Next.js findest du unter Venue Design anpassen.
OpenAPI Spezifikation
Die öffentliche OpenAPI-Spezifikation für die Venue Integration ist verfügbar. Diese Spezifikation hilft dir als Entwickler, die API effizient zu nutzen, da sie eine umfassende Dokumentation der verfügbaren Endpunkte, Methoden und Datenstrukturen bereitstellt.