FAQ PlayVSL

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

1) Como embedar o PlayVSL?

Padrão atual (recomendado): snippet declarativo com data-playvsl. É mais estável em Bubble/mobile e não depende de window.load.

<div id="playvsl"
  data-playvsl
  data-youtube-url="https://www.youtube.com/watch?v=wqGiHRWeTR0"
  data-primary-color="#c62116"
  data-button-url="https://tally.so/r/5BzMOE"
  data-button-text="PLAY VSL DE ALTA CONVERSÃO"
  data-button-show-at-seconds="5"
  data-button-new-tab="true"
  data-button-rounded="true"
  data-button-bg="#c62116"
  data-button-reveal-effect="none"
  data-button-font-family="roboto"
  data-button-font-size="20"
  data-button-bold="true"
  data-lang="pt"
></div>
<script src="https://playvsl.com/playvsl.v1.1.2.min.js"></script>

Parâmetros principais e o que fazem

container: seletor do elemento onde o player será renderizado.
youtubeUrl: URL do vídeo no YouTube (watch, short ou embed).
primaryColor: cor primária do player (barra, overlays e destaques).
data-button-url e data-button-text: destino e texto do CTA.
data-button-show-at-seconds: segundo de exibição do CTA (0 = imediato).
data-button-new-tab, data-button-rounded, data-button-bg: comportamento/estilo do CTA.
data-button-reveal-effect: entrada do CTA (none, fade, pulse).
data-button-font-family, data-button-font-size, data-button-bold: tipografia do CTA.
lang: idioma da interface (pt ou en).

2) Como usar callbacks (modo avançado)?

Se você precisa de callbacks como onPlay/onPause, use o modo programático com PlayVSL.init(...).

Exemplo: esconder elementos acima do vídeo no play e reexibir no pause.

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

<div id="playvsl"></div>
<script src="https://playvsl.com/playvsl.v1.1.2.min.js"></script>
<script>
  PlayVSL.init({
    container: '#playvsl',
    youtubeUrl: 'https://www.youtube.com/watch?v=wqGiHRWeTR0',
    primaryColor: '#c62116',
    buttonUrl: 'https://tally.so/r/5BzMOE',
    buttonText: 'PLAY VSL DE ALTA CONVERSÃO',
    buttonShowAtSeconds: 5,
    onPlay: () => document.body.classList.add('video-playing'),
    onPause: () => document.body.classList.remove('video-playing')
  });
</script>

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

3) Quais eventos existem?

Eventos servem para medir comportamento do usuário (play, pausa, clique no CTA, conclusão etc.). Para usar callbacks/eventos, utilize o modo programático com PlayVSL.init(...). O snippet declarativo é focado em embed rápido.

onReady
onPlay
onFirstPlay
onResume
onRestart
onPause
onProgress
onCTAView
onCTAClick
onComplete
onError

<div id="playvsl"></div>
<script src="https://playvsl.com/playvsl.v1.1.2.min.js"></script>
<script>
  PlayVSL.init({
    container: '#playvsl',
    youtubeUrl: 'https://www.youtube.com/watch?v=wqGiHRWeTR0',
    primaryColor: '#c62116',
    buttonUrl: 'https://tally.so/r/5BzMOE',
    buttonText: 'PLAY VSL DE ALTA CONVERSÃO',
    buttonShowAtSeconds: 5,
    onEvent: (payload) => {
      console.log(payload.event, payload);
    }
  });
</script>

Exemplo híbrido limpo (declarativo + logs)

Sem usar PlayVSL.init no snippet principal. Você declara no HTML e escuta eventos via funções globais/DOM.

<div id="playvsl"
  data-playvsl
  data-youtube-url="https://youtu.be/4YjmqZPMyLE"
  data-primary-color="#C62116"
  data-button-url="https://playvsl.com/"
  data-button-text="QUERO MEU SNIPPET AGORA - É GRÁTIS"
  data-button-show-at-seconds="240"
  data-button-new-tab="true"
  data-button-rounded="true"
  data-button-bg="#C62116"
  data-button-reveal-effect="none"
  data-button-font-family="arial"
  data-button-font-size="20"
  data-button-bold="true"
  data-lang="pt"
  data-on-play-function="PlayVSLHooks.onPlay"
  data-on-pause-function="PlayVSLHooks.onPause"
  data-on-event-function="PlayVSLHooks.onEvent"
  data-dispatch-dom-events="true"
></div>

<script>
window.PlayVSLHooks = {
  onPlay:  (p) => console.log('[PlayVSL][onPlayFunction]', p),
  onPause: (p) => console.log('[PlayVSL][onPauseFunction]', p),
  onEvent: (p) => console.log('[PlayVSL][onEventFunction]', p.event, p)
};

['ready','play','firstPlay','resume','restart','pause','progress','ctaView','ctaClick','complete','error']
  .forEach((evt) => document.addEventListener('playvsl:' + evt, (e) => {
    console.log('[PlayVSL][DOM]', evt, e.detail);
  }));

document.addEventListener('playvsl:event', (e) => {
  console.log('[PlayVSL][DOM][generic]', e.detail.event, e.detail);
});
</script>

<script src="https://playvsl.com/playvsl.v1.1.2.min.js"></script>

Exemplo de payload do `onEvent`

{
  "event": "progress",
  "videoId": "wqGiHRWeTR0",
  "sessionId": "8f2a...",
  "visitorId": "0d77...",
  "pageUrl": "https://seusite.com/vsl",
  "pageDomain": "seusite.com",
  "lang": "pt",
  "currentTime": 132.4,
  "duration": 840,
  "engagedTime": 79.8,
  "ctaShown": false,
  "ts": 1772574000000
}

Atributos e significados

event: tipo do evento (play, pause, progress, ctaClick...).
videoId: ID do vídeo no YouTube.
sessionId: sessão atual do navegador.
visitorId: identificador persistente do visitante.
currentTime: segundo atual no momento do evento.
engagedTime: tempo engajado real após início humano.
ctaShown: se o CTA já foi exibido.
ts: timestamp do evento.

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) => {
    const body = new URLSearchParams();
    Object.entries(payload || {}).forEach(([k,v]) => body.append(k, String(v ?? '')));

    fetch(WEBHOOK, {
      method:'POST',
      headers:{'Content-Type':'application/x-www-form-urlencoded;charset=UTF-8'},
      body,
      keepalive: true,
      credentials: 'omit'
    }).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
}

Como mapear no n8n (body.*)

body.event: evento recebido (ex.: firstPlay, ctaView, ctaClick).
body.videoId, body.pageDomain, body.lang: contexto para segmentação.
body.currentTime, body.engagedTime: profundidade de consumo.
body.ts: horário do evento (unix ms).

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.

Quando o modal “continuar assistindo” aparece?

Ele só aparece quando há progresso real salvo de uma sessão iniciada por humano (não por teaser autoplay).

Ainda com dúvidas ou sugestões?

Se precisar de ajuda ou quiser sugerir melhorias, envie um email para contato@digi6.com.br ou fale direto com o criador do PlayVSL pelo WhatsApp.