> ## Knowledge Base Index
> Fetch the complete knowledge base index at: https://help.vturb.com/sitemap.xml
> Use this file to discover available pages before exploring further.
> Pure-Markdown content can be obtained by appending a '.md' suffix to the content URLs listed in the sitemap (without the trailing slash).

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

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

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

${frame}[Tutorial código de delay](https://scripts.converteai.net/12ad2d53-6275-484d-a818-c6c5c23f6c5f/players/64779a4247265d0009b209dc/embed.html)

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

![](https://storage.crisp.chat/users/helpdesk/website/390a843820d6ba00/image_ywgwce.png =1011xauto)

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!

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

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:

![](https://storage.crisp.chat/users/helpdesk/website/390a843820d6ba00/captura-de-tela-2022-12-14-144_16ztwxd.png =574xauto)

2. 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:

![](https://storage.crisp.chat/users/helpdesk/website/390a843820d6ba00/captura-de-tela-2022-12-14-145_czj1go.png =443xauto)

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".

![](https://storage.crisp.chat/users/helpdesk/website/390a843820d6ba00/captura-de-tela-2022-12-14-150_1y3oz78.png =279xauto)

![](https://storage.crisp.chat/users/helpdesk/website/390a843820d6ba00/captura-de-tela-2022-12-14-150_rxyfoi.png =546xauto)

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

![](https://storage.crisp.chat/users/helpdesk/website/390a843820d6ba00/captura-de-tela-2022-12-14-150_xelwyd.png =630xauto)

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!

|| Caso esteja usando o Upsell One Click da Hotmart, precisará seguir mais uma etapa para que funcione corretamente. Criamos um artigo explicando o que fazer, é só clicar [aqui](https://help.vturb.com/pt-br/article/como-sincronizar-o-botao-de-upsell-one-click-com-o-vturb-1qxesfr/)