You can add a timed buy button to your page based on the player time and not the time on page, so you are sure your button will drop at the exact time you want in your video. 

To do so, you only need to add a little piece of Javascript to your page. Here's an example: 

<div id="hiddenContent" style="display: none;">
<h1>Some previously hidden content</h1>
</div>

<script>
var TIME_TO_SHOW_THINGS = 15; // in seconds
var HIDDEN_CONTENT_ID = 'hiddenContent';
var EMBED_CODE_ID = 'vidalytics_embed__XXXXXXXXX'; // Replace XXXXXX with your embed code ID
var EMBED_CODE_RETURNING_KEY = EMBED_CODE_ID + '_returning'
if (!localStorage.getItem(EMBED_CODE_RETURNING_KEY)) {
function checkVideoTime() {
var embeds = (_vidalytics || {}).embeds || {};
if (embeds[EMBED_CODE_ID]) {
var player = embeds[EMBED_CODE_ID].player || {};
if (player.getCurrentVideoTime) {
var currentTime = player.getCurrentVideoTime();
if (currentTime >= TIME_TO_SHOW_THINGS) {
showHiddenItem();
return;
}
}
}
setTimeout(checkVideoTime, 1000);
}
checkVideoTime();
localStorage.setItem(EMBED_CODE_RETURNING_KEY, true);
} else {
showHiddenItem();
}
function showHiddenItem() {
document.getElementById(HIDDEN_CONTENT_ID).style.display = 'block';
}
</script>

                   This needs to go after your Vidalytics video embed code.

You will have to customize:

  • TIME_TO_SHOW_THINGS -- Time in the video when you want your content to be shown (in seconds)
  • HIDDEN_CONTENT_ID -- Hidden element ID (ID of the element you wish to hide initially)
  • EMBED_CODE_ID -- Embed code ID (the ID attribute of your Vidalytics’ embed div)

Note: If you want your timed button to appear when viewers have actually unmuted your video (not just autoplayed), add this extra condition inside the checkVideoTime method:


" && !player.player.isMuted()" 

It is pure JS so it does not need any dependencies like jQuery 😉

Timed Buy Buttons That Don't Show Up on Refresh

If you want your timed content to not show up if the page is refreshed (unless the viewer is already past the time the content/button should drop), here's a modified version of the code:

<div id="hiddenContent" style="display: none;">
<h1>Some previously hidden content</h1>
</div>

<script>
var TIME_TO_SHOW_THINGS = 15; // in seconds
var HIDDEN_CONTENT_ID = 'hiddenContent';
var EMBED_CODE_ID = 'vidalytics_embed__XXXXXXXXX'; // Replace XXXXXX with your embed code ID
var EMBED_CODE_RETURNING_KEY = EMBED_CODE_ID + '_returning'
function checkVideoTime() {
var embeds = (_vidalytics || {}).embeds || {};
if (embeds[EMBED_CODE_ID]) {
var player = embeds[EMBED_CODE_ID].player || {};
if (player.getCurrentVideoTime) {
var currentTime = player.getCurrentVideoTime();
if (currentTime >= TIME_TO_SHOW_THINGS) {
showHiddenItem();
return;
}
}
}
setTimeout(checkVideoTime, 1000);
}
checkVideoTime();
function showHiddenItem() {
document.getElementById(HIDDEN_CONTENT_ID).style.display = 'block';
}
</script>


Example:

Creating Two Timed Buy Buttons for Two Different Videos

If you need to create two timed buy buttons for two videos (1 for each), you would need to use multiple video embeds, then follow the steps above.

After that, wrap the JavaScript in a separate function to enclose the variable scope. Here's an example:

<div id="hiddenContent" style="display: none;">
<h1>Some previously hidden content</h1>
</div>

<script>

function forFirstVideo() {
var TIME_TO_SHOW_THINGS = 15; // in seconds
var HIDDEN_CONTENT_ID = 'hiddenContent';
var EMBED_CODE_ID = 'vidalytics_embed__XXXXXXXX'; // Replace XXXXXX with your embed code ID
var EMBED_CODE_RETURNING_KEY = EMBED_CODE_ID + '_returning'
if (!localStorage.getItem(EMBED_CODE_RETURNING_KEY)) {
function checkVideoTime() {
var embeds = (_vidalytics || {}).embeds || {};
if (embeds[EMBED_CODE_ID]) {
var player = embeds[EMBED_CODE_ID].player || {};
if (player.getCurrentVideoTime) {
var currentTime = player.getCurrentVideoTime();
if (currentTime >= TIME_TO_SHOW_THINGS) {
showHiddenItem();
return;
}
}
}
setTimeout(checkVideoTime, 1000);
}
checkVideoTime();
localStorage.setItem(EMBED_CODE_RETURNING_KEY, true);
} else {
showHiddenItem();
}
function showHiddenItem() {
document.getElementById(HIDDEN_CONTENT_ID).style.display = 'block';
}
}
forFirstVideo();
</script>

The time out code is wrapped with function "forFirstVideo" and the call to that function forFirstVideo() is added right below.

Then, all you have to do is duplicate the code and just modify the second one to have a different function name, like "forSecondVideo".

Did this answer your question?