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

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



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



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!

📢 Sempre utilize em uma página de teste antes, garantindo total funcionalidade!

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

Passo a Passo:

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:



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

Caso sua página seja em HTML PURO, você deverá criar uma div ao redor dos elementos que você quer que sejam influenciados pelo script de delay e nomear a div com a classe esconder , como na forma abaixo:

<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)!

Caso você esteja no Elementor, só precisará colar o script de delay na mesma CAIXA HTML do seu vídeo, deixando um espaço entre o embed js e script de delay

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!

Importante: Sempre teste a funcionalidade do script em seu site em guia anônima!
E mais: Caso você tenha mais de 1 vídeo na sua página, é necessário deixar apenas o principal em código JS e o restante em iFrame, para evitar conflito entre eles e o seu código de delay funcionar perfeitamente.


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