> ## 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 One Click com o VTurb?

# Como sincronizar o botão de Upsell One Click com o VTurb?


1. Copie o código do seu botão One Click. O botão será um trecho em HTML, semelhante ao mostrado na imagem abaixo: *(exemplo ilustrativo do botão One Click)*

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

2. Crie uma **div **ao redor do código do botão. Essa **div **servirá para que o botão seja controlado pelo script de delay do VTurb.

Atribua a ela a classe **esconder**, conforme o exemplo:

```
<div class="esconder">
//COLE O SEU CODIGO DO BOTÃO ONE CLICK
</div>
```

Exemplo completo (com um botão genérico ilustrativo):


```
<div class="esconder">
	<button id="oneClickBuy"
	        data-product-id="prod_ABC123"
	        data-offer-id="offer_001"
	        class="btn-oneclick">
	  Comprar agora (1-clique)
	</button>
</div>
```

**Este código deve ser adicionado em sua página, dentro de um html na posição em que deseja que o botão apareça após o tempo do delay.**

3. **Adicione o código de delay na sua página.**

Esse código define o tempo em que o botão (ou qualquer outro elemento com a classe **esconder**) aparecerá durante o vídeo. Ajuste o valor da variável **delaySeconds** conforme o momento desejado (em segundos):


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

<script>
  var delaySeconds = 10;
  var player = document.querySelector("vturb-smartplayer");
  player.addEventListener("player:ready", function() {
    player.displayHiddenElements(delaySeconds, [".esconder"], {
      persist: true
    });
  });
</script>
```