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)

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

Updated on: 10/06/2025