FAQ PlayVSL

Guia rápido de embed, eventos e integrações.

Voltar

1) Como embedar o PlayVSL?

Copie este bloco e cole na sua página. Troque apenas a URL do YouTube e o link do botão.

<div id="playvsl"></div>
<script src="https://playvsl.com/playvsl.js"></script>
<script>
  PlayVSL.init({
    container:'#playvsl',
    youtubeUrl:'https://youtu.be/wqGiHRWeTR0',
    buttonUrl:'https://playvsl.com/',
    buttonText:'QUERO MEU SNIPPET AGORA - É GRÁTIS',
    buttonShowAtSeconds:10
  });
</script>

2) Quais eventos existem?

Eventos servem para medir comportamento do usuário (play, pausa, clique no CTA, conclusão etc.). Você pode usar callbacks específicos ou centralizar tudo em onEvent.

• onReady
• onPlay
• onFirstPlay
• onResume
• onRestart
• onPause
• onProgress
• onCTAView
• onCTAClick
• onComplete
• onError

PlayVSL.init({
  ...,
  onEvent: (payload) => {
    console.log(payload.event, payload);
  }
});

3) Como fazer “sumir elementos acima do vídeo no play”?

Use este padrão quando quiser focar o usuário no vídeo. No play, você esconde os blocos de cima; no pause, volta a mostrar.

A forma correta é: classe nos elementos que quer ocultar (ex.: h1 e h3) e uma classe de estado no body (ex.: video-playing).

<h1 class="hide-on-play">Título principal</h1>
<h3 class="hide-on-play">Subtítulo da oferta</h3>

PlayVSL.init({
  ...,
  onPlay: () => document.body.classList.add('video-playing'),
  onPause: () => document.body.classList.remove('video-playing')
});

.video-playing .hide-on-play {
  display:none;
}

4) Como enviar eventos via webhook?

Forma mais simples: enviar onEvent para qualquer webhook (n8n, Make, Zapier ou API própria).

Eventos possíveis: ready, play, firstPlay, resume, restart, pause, progress, ctaView, ctaClick, complete, error.

const WEBHOOK = 'https://SEU-N8N/webhook/playvsl-events';

PlayVSL.init({
  ...,
  onEvent: (payload) => {
    fetch(WEBHOOK, {
      method:'POST',
      headers:{'Content-Type':'application/json'},
      body: JSON.stringify(payload),
      keepalive: true
    }).catch(()=>{});
  }
});

Exemplo de payload

{
  "event": "ctaClick",
  "videoId": "wqGiHRWeTR0",
  "sessionId": "9e4e...",
  "visitorId": "d31b...",
  "pageUrl": "https://seusite.com/vsl",
  "lang": "pt",
  "currentTime": 312.4,
  "duration": 1320.0,
  "engagedTime": 298.1,
  "ctaShown": true,
  "ts": 1772490000000
}

5) Dúvidas comuns

Respostas objetivas para quem está implementando o player pela primeira vez.

O botão de CTA não apareceu. O que pode ser?

Verifique buttonShowAtSeconds. Para mostrar no início, use 0.

Quero que o botão abra em nova aba

Use buttonNewTab: true.

Como deixar o botão mais arredondado?

Use buttonRounded: true.

Ainda com dúvidas ou sugestões?

Se precisar de ajuda ou quiser sugerir melhorias, envie um email para contato@digi6.com.br.