> ## 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).

# How to sync the One Click Upsell button with VTurb?

# How to sync the One Click Upsell button with VTurb?


1.  Copy the code for your One Click button. The button will be an HTML snippet, similar to the one shown in the image below: *(illustrative example of the One Click button)*

![](https://storage.crisp.chat/users/helpdesk/website/-/3/9/0/a/390a843820d6ba00/image_190p7x6.png =791xauto)


2.  Create a **div** around the button's code. This **div** will allow the button to be controlled by the VTurb delay script.

Assign the class **hide **to it, as in the example:

```
<div class="hide">
//PASTE YOUR ONE CLICK BUTTON CODE HERE
</div>
```

Complete example (with an illustrative generic button):

```
<div class="hide">
	<button id="oneClickBuy"
	        data-product-id="prod_ABC123"
	        data-offer-id="offer_001"
	        class="btn-oneclick">
	  Buy now (1-click)
	</button>
</div>
```

3.  **Add the delay code to your page.**

This code defines the time at which the button (or any other element with the **hide&#32;**class) will appear during the video. Adjust the value of the **delaySeconds** variable according to the desired time (in seconds):

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

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