Benutzerdefinierte Aktionsschaltflächen auf Ihrer Seite anzeigen

Sie können zusätzliche Schnittstellen erstellen, die mit Add-ons, Erweiterungen oder Websites von Drittanbietern gehostet werden. Jede Aktion ist eine einzelne URL oder benutzerdefiniertes HTML, das geladen und angezeigt wird, wenn ein Benutzer einen Knopf auf der Owncast-Seite drückt.

Plugin action buttons require Owncast v0.3.0

Plugins can also contribute action buttons alongside the ones you register by hand. See the plugin manifest documentation.

Beispiele

Einige Beispiele für diese Funktionalität könnten Dinge sein, wie:

1. Ein Leaderboard für ein Chat-basiertes Spiel, das du gebaut hast, oder ein externes Spiel, das du im Stream spielst.
2. Listen von Aktionen, die lustige Animationen über Ihrem Stream-Overlay abspielen, wenn sie ausgewählt werden.
3. Integrationen mit Ihrem Abstimmungs-Chatbot, der aktuelle Umfragen und die Ergebnisse anzeigt.
4. Tipp-Glas zur Annahme von Spenden.
5. Ein Zeitplan, der schicker oder interaktiver ist, als das, was Sie in Markdown darstellen können.

Einschränkungen

1. URLs, die über externe Aktionen eingebettet sind, müssen auf einem Server gehostet werden, der SSL unterstützt und ein https-Protokoll hat. Unsichere URLs werden nicht unterstützt.
2. Diese URLs müssen innerhalb eines iFrames funktionieren. Das bedeutet, dass X-FRAME-OPTIONS und die CSP nicht blockierend sein dürfen. Wenn Sie blockiert sind, sind Sie darauf beschränkt, diese URL in einem neuen Tab zu laden, und das ist kein tolles Erlebnis.
3. Während Sie experimentieren können, indem Sie URLs verwenden, die Sie nicht persönlich kontrollieren, ist es oft wahrscheinlich, dass viele von ihnen aufgrund von Einschränkungen des Remote-Servers nicht funktionieren. Ein Beispiel dafür ist einfach, eine PayPal- oder Google-URL einzufügen.

So registrieren Sie Aktionen

1. Besuchen Sie die Admin-Oberfläche und gehen Sie unter "Integrationen" zur Seite "Externe Aktionen".
2. Fügen Sie eine Aktion hinzu.
3. Legen Sie die URL oder den benutzerdefinierten HTML-Code dieser Aktion fest. URLs sollten ein HTTPS-Ziel sein und den aufgeführten Best Practices folgen.
4. Geben Sie ihr einen Namen, der auf der Schaltfläche angezeigt wird, die diese Aktion startet, eine optionale Beschreibung, die im Modal angezeigt wird, das die Aktion präsentiert, eine URL zu einem optionalen Symbol für die Schaltfläche und optional eine Farbe, die für die Schaltfläche verwendet wird.
5. Wenn Sie wirklich eine URL registrieren möchten, die Sie nicht kontrollieren, und sie nicht mit der Standardfunktionalität funktioniert, können Sie sagen, dass sie "Extern Öffnen" soll, und sie wird einen neuen Tab in Ihrem Browser öffnen. Das ist nicht optimal, aber es ist eine Option.

Query parameters passed to URL actions

When a viewer opens a URL action, Owncast appends query parameters to your URL:

• instance is always appended and holds the URL of the Owncast page the viewer is on. Useful if you host one action for multiple servers.
• username and userId are appended only when the viewer has a chat user. username is the display name, which is not unique. userId is a stable identifier for that chat user.

These parameters are conveniences, not authenticated identity. Anyone can open your URL with any values, so never grant access or make privileged API calls based on them. Use them to pre-fill forms and label sessions.

The iframe sandbox

A URL action loads inside a modal in an iframe with sandbox="allow-same-origin allow-scripts allow-popups allow-forms". Your page can run scripts, submit forms, and open popups, but it cannot navigate the top-level Owncast page or trigger downloads.

There is no postMessage bridge. An embedded action cannot close or resize the modal, and it has no way to call back into Owncast. Treat the action as a self-contained page.

Best Practices

1. Die Benutzeroberfläche dieser Aktion sollte wenig bis gar keine Navigation durchführen. Sie sollte nicht als Möglichkeit betrachtet werden, einfach beliebige Seiten anzuzeigen.
2. Gestalten Sie Ihre Benutzeroberfläche so, dass sie in einem kleinen Fenster lebt, das nicht viel Scrollen erfordert und auf mobilen und kleinen Displays responsiv ist.
3. Stellen Sie sicher, dass der Server Ihrer URL das Laden Ihres Inhalts von Ihrem Owncast-Server über X-FRAME-OPTIONS und die CSP erlaubt.
4. The query parameters Owncast appends tell you which server and which chat user opened the action. Use them to pre-fill forms, and remember they can be faked, so never treat them as proof of identity.
5. Für HTML-Aktionen, die benutzerdefiniertes Styling über \<style>-Tags enthalten, sollten Sie sicherstellen, dass Sie Selektoren haben, die so spezifisch wie möglich sind und nicht mit anderen Elementen auf der Seite kollidieren.
6. Für HTML-Aktionen, die ein \<form>-Element direkt einbetten, macht es Sinn, target="_blank" einzustellen, um die Einreichseite in einem neuen Tab zu öffnen. Auf diese Weise müssen Ihre Zuschauer den Stream nicht stoppen, wenn sie das Formular einreichen.