Показать кнопки пользовательских действий на вашей странице

Вы можете создать дополнительные интерфейсы, которые размещаются с любыми надстройками, расширениями или сторонними сайтами, и у вас может быть 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-OPTIONS и CSP не могут блокировать. Если вас блокируют, вы ограничены загрузкой этого URL в новой вкладке, и это не лучший опыт.
3. Хотя вы можете экспериментировать с использованием URL-адресов, которые вы не контролируете, часто многие из них не будут работать из-за ограничений, наложенных на удаленный сервер. Примером этого является просто вставка URL-адреса PayPal или Google.

Как зарегистрировать действия

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. Этот интерфейс действия должен выполнять мало или совсем не выполнять навигацию. Не следует рассматривать его как способ отображения просто любой страницы.
2. Разработайте интерфейс так, чтобы он находился в небольшом окне, которое не требует много, если вообще, прокрутки и адаптивно реагирует на мобильные и небольшие дисплеи.
3. Убедитесь, что сервер вашего URL позволяет загружать ваш контент с вашего сервера Owncast через X-FRAME-OPTIONS и CSP.
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. Для действий HTML, которые включают пользовательское оформление через теги \<style>, вы должны убедиться, что селекторы как можно более специфичны, чтобы не пересекаться с другими элементами на странице.
6. Для действий HTML, которые напрямую встраивают элемент \<form>, имеет смысл установить target="_blank", чтобы открыть страницу отправки в новой вкладке. Таким образом, вашим зрителям не придется останавливать стрим при отправке формы.