Mostrar Botões de Ação Personalizados em Sua Página

Você pode construir interfaces adicionais que são hospedadas com quaisquer complementos, extensões ou sites de terceiros com 3. Cada ação é uma única URL ou HTML personalizado que será carregado e exibido quando um usuário pressionar um botão na página do 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.

Exemplos

Alguns exemplos dessa funcionalidade podem ser coisas como:

1. Um placar para algum jogo baseado em chat que você construiu ou um jogo externo que você está jogando ao vivo.
2. Listas de ações que realizam animações divertidas em suas sobreposições de stream quando selecionadas.
3. Integrações com seu chatbot de pesquisa que mostra enquetes recentes e os resultados.
4. Caixa de gorjetas para aceitar doações.
5. Uma programação que é mais elaborada ou interativa do que você pode representar em Markdown.

Limitações

1. URLs embutidos via ações externas devem ser hospedados em um servidor que suporte SSL e tenha um protocolo https. URLs não seguras não são suportadas.
2. Essas URLs devem suportar a execução dentro de um iframe. Isso significa que X-FRAME-OPTIONS e a CSP não podem estar bloqueando. Se você for bloqueado, estará limitado a carregar essa URL em uma nova aba e isso não é uma boa experiência.
3. Embora você possa experimentar com URLs que não controla pessoalmente, é provável que muitas delas não funcionem devido a limitações impostas no servidor remoto. Um exemplo disso é simplesmente inserir uma URL do PayPal ou Google.

Como registrar ações

1. Visite o admin e, em "Integrações", vá para a página "Ações Externas".
2. Adicionar uma ação.
3. Defina a URL ou HTML personalizado desta ação. As URLs devem ser um destino HTTPS e seguir as melhores práticas listadas.
4. Dê um nome que será exibido no botão que inicia esta ação, uma descrição opcional que aparecerá no modal que apresenta a ação, uma URL para um ícone opcional para o botão e, opcionalmente, uma cor que será usada para o botão.
5. Se você realmente quiser registrar uma URL que não controla, mas não funcionar com a funcionalidade padrão, pode escolher "Abrir Externamente" e isso abrirá uma nova aba em seu navegador. Isso não é ideal, mas é uma opção.

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.

Melhores práticas

1. A interface desta ação deve realizar pouca ou nenhuma navegação. Não deve ser tratada como uma maneira de mostrar qualquer página.
2. Projete sua interface para caber em uma pequena janela que não requer muito, se houver, rolagem, e que seja responsiva a dispositivos móveis e telas pequenas.
3. Certifique-se de que o servidor da sua URL permite carregar seu conteúdo do servidor Owncast via X-FRAME-OPTIONS e a 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. Para ações HTML que incluem estilização personalizada via \<style> tags, você deve garantir que tenha seletores o mais específicos possível, não colidindo com outros elementos na página.
6. Para ações HTML que incorporam diretamente um elemento \<form>, faz sentido definir target="_blank" para abrir a página de envio em uma nova aba. Dessa forma, seus espectadores não precisarão interromper a transmissão ao enviar o formulário.