How to Sync the Hotmart Upsell Button with VTurb?

In your Hotmart Funnel, start by copying the Widget Code.



Paste the Widget Code on your page: Drop the widget code onto your page and set it up using our delay code that's synced with your video.
We've crafted a synchronized script for you: This ensures that even if viewers pause the video, everything remains in sync, boosting both retention and conversions.
Added benefit of caching: For returning viewers who've previously reached the pitch, they'll have instant access to sections without waiting for the entire video replay.


💡 📢 Always test on a demo page first to ensure everything functions seamlessly!


We have created a script synchronized with the video! With it, even if the user pauses the video, everything will remain synchronized, improving your retention and conversions!

Here's the breakdown:

Decide when in the video the elements should pop up.
Tag the elements you want this feature on with the “hide” class.
Copy the delay code and insert it right below your video player's script.

Step-by-Step Guide:

1. Decide when in the video the elements should pop up.

Here, you'll find out how to set the appearance time IN SECONDS for various sections and elements on your site. Swap out the number 10 for the desired delay duration:



2. Tag elements with the “hide” class.

For those using pure HTML, you'll want to wrap the elements you wish to influence with this delay script inside a div and tag it with the class “hide”, as demonstrated below:



Lastly, simply place the delay script right below your video's JS embed (not within the same div, but following your video div).

💡 For the Elementor users out there, paste the delay script within the same HTML box of your video, ensuring a gap exists between the JS embed and delay script:

a) Incorporate the script within the Elementor's HTML box:



b) Tag elements or sections with the “hide” class:

Right-click the specific element (or even a whole section) you wish to delay and choose "edit element". In the side panel that appears, select "advanced".





Then, head over to the CSS Class section and type in: “hide”.



And voila! Your delay script should now be active and running on your site!

Important: Always check the script in incognito mode to ensure it functions properly on your site!

Moreover, if you have multiple videos on a page, ensure the main one uses the JS code while others stick to the iFrame. This helps avoid any script conflicts, ensuring smooth delay functionality.

Here's the actual Delay Script Code:

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

Updated on: 10/17/2023