Como sincronizar o botão de Upsell da Hotmart com o VTurb?

Se preferir, você pode seguir esse tutorial em VÍDEO:

1. No seu Funil da Hotmart, você vai copiar o Código Widget:

2. Coloque o Código Widget na sua página e configure ele utilizando o nosso código de delay sincronizado com o vídeo:

Criamos um script sincronizado com o vídeo! Nele, mesmo se o usuário pausar o vídeo, irá ficar tudo sincronizado, melhorando sua retenção e suas conversões!

Além disso, também criamos um cache para que, quando o usuário que já chegou no pitch retornar para a página, ele consiga ter acesso às seções e não precise esperar todo o vídeo novamente!

1. Defina o tempo do vídeo em que os elementos devem aparecer.
2. Adicione a classe “esconder” nos elementos em que você deseja adicionar essa funcionalidade.
3. Copie o código de delay e cole ele abaixo do script do seu player.

Passo a Passo:

1. Defina o tempo do vídeo em que os elementos devem aparecer.

Abaixo mostramos onde você deve alterar o tempo EM SEGUNDOS para as seções e elementos aparecerem em sua página. Troque o número 10 pelos segundos que do delay que você deseja:

2. Adicione a classe “esconder” nos elementos em que você deseja adicionar essa funcionalidade.

<div class= "esconder">

_SEÇÃO A SER ESCONDIDA

</div>

Depois, é só incluir o script de delay abaixo do embed JS do seu vídeo (não em mesma div, mas sim depois da div do seu vídeo)!

Para isso, siga os passos a seguir:

a) Deixando o script dentro da caixa HTML no Elementor:

b. Acrescentando a classe Esconder nos elementos/seções:

Quando você clica com o botão direito sobre o elemento que receberá o delay, dentro da sua página, e vai em "editar elemento" (podendo também ser uma seção completa), abrirá uma seção de edição na lateral: Você deverá clicar em "Avançado".

Agora, você deve ir na seção Classe CSS e colocar a classe: esconder.

Pronto! Seu código script já estará funcionando normalmente em seu site!

Aqui está o Código script de delay:

<style>.esconder { display: none }</style>

<script type="text/javascript">
document.addEventListener("DOMContentLoaded", function() {
/* ALTERE O VALOR 10 PARA OS SEGUNDOS EM QUE AS SEÇÕES VÃO APARECER */
var SECONDS_TO_DISPLAY = 10;
var CLASS_TO_DISPLAY = ".esconder";

/* NO CHANGES NEEDED BELOW THIS POINT. */
var attempts = 0;
var elsHiddenList = [];
var elsDisplayed = false;
var elsHidden = document.querySelectorAll(CLASS_TO_DISPLAY);
var alreadyDisplayedKey =`alreadyElsDisplayed${SECONDS_TO_DISPLAY}`
var alreadyElsDisplayed = localStorage.getItem(alreadyDisplayedKey);

setTimeout(function () { elsHiddenList = Array.prototype.slice.call(elsHidden); }, 0);

var showHiddenElements = function () {
elsDisplayed = true;
elsHiddenList.forEach((e) => e.style.display = "block");
localStorage.setItem(alreadyDisplayedKey, true);
};

var startWatchVideoProgress = function () {
if (typeof smartplayer === 'undefined' || !(smartplayer.instances && smartplayer.instances.length)) {
if (attempts >= 10) return;
attempts += 1;
return setTimeout(function () { startWatchVideoProgress() }, 1000);
};

smartplayer.instances[0].on('timeupdate', () => {
if (elsDisplayed || smartplayer.instances[0].smartAutoPlay) return;
if (smartplayer.instances[0].video.currentTime < SECONDS_TO_DISPLAY) return;
showHiddenElements();
});
};

if (alreadyElsDisplayed === 'true') {
setTimeout(function () { showHiddenElements(); }, 100);
} else {
startWatchVideoProgress();
};
});
</script> 

Estamos aqui para ajudá-lo em cada etapa da customização do seu vídeo. Se surgir alguma dúvida ou necessitar de suporte, conte com a nossa equipe!

Atualizado em: 20/10/2023