Guia de instalação

1. Cole o código do player

No painel, abra o vídeo e vá em Código. Cole onde o vídeo deve aparecer:

<div data-vslpro="v_SEUVIDEO" style="aspect-ratio:16/9"></div>
<script src="https://play.vslpro.app/p/v_SEUVIDEO.js" async></script>

O aspect-ratio reserva o espaço do vídeo antes de ele carregar, então a página não pula.

2. Turbo (opcional)

No <head> da página, para o navegador começar a buscar o player e a capa antes de ler o resto:

<link rel="preconnect" href="https://play.vslpro.app">
<link rel="preload" href="https://play.vslpro.app/p/v_SEUVIDEO.js" as="script">

3. Iframe

Para plataformas que não aceitam script:

<iframe src="https://play.vslpro.app/embed/v_SEUVIDEO" style="width:100%;aspect-ratio:16/9;border:0"
  allow="autoplay; fullscreen; encrypted-media" allowfullscreen></iframe>

No iframe, o botão abaixo do vídeo e a revelação de blocos da página não funcionam, porque ficam fora do iframe.

4. Revelar a oferta no pitch

Coloque a classe vslpro-hidden nos blocos que só devem aparecer no pitch:

<section class="vslpro-hidden">Sua oferta, preços e botão de compra</section>

No painel, em Player, ligue Revelar a oferta na página e escolha o segundo. Quem volta à página depois de ter chegado ao pitch já encontra tudo aberto.

5. Placar: vendas no painel

1. No painel, abra Placar e copie a URL de postback.
2. Cole essa URL na área de webhooks da sua plataforma (Hotmart, Kiwify, Eduzz ou outra) e marque os eventos de compra aprovada e reembolso.
3. Pronto. Os links de checkout da sua página ganham o parâmetro sck com a sessão de quem clicou, e a plataforma devolve esse parâmetro na venda.

Para marcar um link que o VSL PRO não reconhece como checkout, adicione data-vslpro-checkout:

<a href="https://meucheckout.com/produto" data-vslpro-checkout>Comprar</a>

6. Pixel e eventos

Com o Pixel da Meta ou o GA4 na página, o player envia VSLPlay, VSL25, VSL50, VSL75, VSLPitch e VSLEnd.

Para quem programa, o elemento do player dispara eventos que você pode ouvir:

document.querySelector('[data-vslpro]').addEventListener('vslpro:pitch', (e) => {
  console.log('chegou no pitch', e.detail.session);
});
window.addEventListener('vslpro:reveal', () => { /* a oferta apareceu */ });

Eventos disponíveis: vslpro:start, vslpro:pitch, vslpro:cta-shown, vslpro:cta, vslpro:end e, na janela, vslpro:reveal.