Como fazer incorporação da live e utilizar o recurso de picture in picture?

Como fazer a incorporação da live e utilizar o recurso de Picture-in-Picture (PIP)

Você pode incorporar sua live do Live-co diretamente no seu site, landing page ou plataforma externa utilizando dois formatos:

PIP (Picture-in-Picture): player flutuante que acompanha o usuário enquanto ele navega.
Embed (Iframe Responsivo): player fixo embutido diretamente na página.

A seguir, você encontra os códigos atualizados e todas as recomendações necessárias.

Atualização Importante (2025) - Nova Configuração Necessária

Para garantir o funcionamento correto do PIP e da sincronização com o player incorporado, agora é obrigatório incluir:

only_live: true
username e useremail (opcionais, mas recomendados)

Esses campos ajudam a:

manter a sessão entre PIP e iframe;
identificar o usuário automaticamente;
evitar que o sistema peça nome/e-mail várias vezes;
melhorar o funcionamento do módulo B2B.

1. PIP (Picture-in-Picture)

Este formato exibe o player em janela flutuante (PIP). Ele aparece automaticamente na página, mesmo enquanto o usuário navega por outros conteúdos.

Código atualizado (inserir antes de `</body>`)

<script>
window.embeddedLiveConfig = {
  liveId: "XXX",                      // ID da sua live
  domain: "https://dash.live-co.app/go/",
  only_live: true,                    // Obrigatório
  username: "",                       // Opcional
  useremail: ""                       // Opcional
};
</script>

<script 
  defer 
  src="https://dash.live-co.app/live-co-embed.js"
  liveId="XXX"
  domain="https://dash.live-co.app/go/">
</script>

Sobre os campos

liveId: identificador único da live.
only_live: obrigatório para o PIP funcionar sem conflito.
username / useremail: opcionais; podem ser inseridos automaticamente se o usuário estiver logado no seu sistema.
Caso não sejam informados, o Live-co pode solicitar esses dados ao espectador.

2. Embed (Iframe Responsivo)

Use este modelo quando quiser que a live apareça fixamente dentro da página (como num player tradicional).

Código atualizado

<div class="container" style="position: relative; width: 100%; height: 0; padding-bottom: 56.25%;">
  <iframe
    src="https://dash.live-co.app/go/XXXXX?embed=true&username=NOME_DO_USUARIO&useremail=EMAIL_DO_USUARIO"
    style="position: absolute; top: 0; left: 0; width: 100%; height: 100%;"
    frameborder="0"
    allowfullscreen>
  </iframe>
</div>

Observações

O padding-bottom: 56.25% mantém a proporção 16:9.
O player se ajusta automaticamente à largura da tela (responsivo).
username e useremail são opcionais, mas melhoram a experiência.
Caso não sejam informados, o sistema solicitará dados básicos ao usuário.

Boas Práticas

Utilize HTTPS para evitar bloqueio de conteúdo.
Teste sempre em ambiente de homologação antes de publicar.
No WordPress, cole o código no bloco HTML personalizado.
Em plataformas externas (RD Station, Unbounce, LeadLovers etc.), use sempre o iframe (Embed).