跳至主要内容

在您的页面上显示自定义操作按钮

您可以构建额外的界面,这些界面与任何附加组件、扩展或第三方网站一起托管,其中包含3个接口。 每个操作都是一个单一的URL或自定义HTML,当用户按下Owncast页面上的按钮时,将加载并显示。

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.

示例

此功能的一些示例可能是:

  1. 您构建的一些基于聊天的游戏的排行榜或您在直播中玩的外部游戏。
  2. 在选择时会在您的直播覆盖上执行有趣动画的操作列表。
  3. 与您的投票聊天机器人集成,显示最近的投票及其结果。
  4. 小费罐以接受捐赠。
  5. 一个比您在Markdown中所能表示的更华丽或更互动的日程。

限制

  1. 通过外部操作嵌入的URL必须托管在支持SSL并具有https协议的服务器上。 不安全的URL不受支持。
  2. 这些URL必须支持在iframe内部使用。 这意味着X-FRAME-OPTIONSCSP不能被阻止。 如果您被阻止,那么您只能在新选项卡中加载此URL,这体验不佳。
  3. 虽然您可以尝试使用您不个人控制的URL,但通常许多URL由于远程服务器施加的限制而无法正常工作。 一个例子就是简单地放入一个PayPal或Google的URL。

如何注册操作

  1. 访问管理面板,在“集成”下转到“外部操作”页面。
  2. 添加一个操作。
  3. 设置此操作的URL或自定义HTML。 URL应为HTTPS目标,并遵循列出的最佳实践。
  4. 给它一个将在启动此操作的按钮上显示的名称,一个可选的描述将在呈现操作的模态中显示,一个指向可选图标的URL,以及选择性地用于按钮的颜色。
  5. 如果您真的想注册一个您不控制的URL,但它在默认功能下无法工作,您可以告诉它“外部打开”,它将会在您的浏览器中打开一个新标签页。 这并不是最佳选择,但这是一个选项。

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.

最佳实践

  1. 此操作的UI应几乎不进行导航。 它不应被视为仅仅用作显示任何页面的方式。
  2. 设计您的UI以适应一个不需要 much 的小窗口,如果有的话,滚动,并且对手机和小显示器是响应式的。
  3. 确保您的URL的服务器允许通过X-FRAME-OPTIONSCSP从您的Owncast服务器加载您的内容。
  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. 对于通过\<style>标签包含自定义样式的HTML操作,您应该确保选择器尽可能具体,不与页面中的任何其他元素冲突。
  6. 对于直接嵌入\<form>元素的HTML操作,将target="_blank"进行设置以在新选项卡中打开提交页面是合理的。 这样,您的观众在提交表单时就不必停止直播。

Improve this page

See something missing or incorrect? Edit this page and improve the documentation for everyone.

Contributors to this documentation
Gabe KangasGabe Kangas
O
Owncast
X
xarantolus