Setting Up Your CTA Button:

Call To Action buttons (CTAs) are an excellent way to push viewers toward a desired action on your website, after or while they watch your video, like buying your product, signing up for your webinar, opting into your list, etc. 

Setting up CTAs in Vidalytics is super easy and flexible.

The first thing you have to do is go to your video settings page and open the Call To Actions section.

Once open, click on 'Create New CTA'.

The first thing you'll have to choose is where to place your CTA in relation to your video.

  • Below your video and reserving space, means that your video container will, upon loading, already be sized to include your CTA button once it's time for it to display.

  • Below your video and expanding the container, means that the container of the actual CTA won't display until the button appears, which in turn means any content below your video will be pushed down on your page at this point.

  • 'On top' means that your CTA will show up on top of your video, inside of its main container, and not seemingly as a separate element.

After you select the version you like the best, you'll add your button text, link, and select if that link should open in a new tab.

Note: make sure the link you paste in has either http:// or https:// at the beginning ;)

Next up is the time at which you'd like the button to appear.

A timed CTA, is pretty straightforward. It'll show up between the times you specify in the From and To fields. If you leave the 'To' field empty, we'll display your CTA all the way till the end of the video.

And Exit CTA will only be shown when your video is paused, giving you another chance to grab your viewer's attention.

Finally, select colors for your button and interactions, enable or disable their drop shadow, and select if you want your CTA to be shown automatically to returning viewers, without them having to wait to the specified time on video again.

Click 'Save' and your CTA Button has been created, yay!

IMPORTANT: Make sure you re-publish your video after adding or editing your CTA button(s), so your viewers can see them! 

IMPORTANT (2): our CTA Buttons don't appear on mobile fullscreen.

IMPORTANT (3): To stop the CTA from appearing before the video is unmuted, you will need to replace the original video embed code with the code below. Note that you will need to edit the code so that it matches the video embed ID (marked by XXXXXXX on in the example code).

<script type="text/javascript">

var EMBED_CODE_ID = 'vidalytics_XXXXXXXXXXXXXXXX'; // update this to match your Vidalytics Embed ID
var vidalyticsPlayerAPI = null;

function initializePlayerAPI() {
var player = getPlayer();
if (player._player) {
vidalyticsPlayerAPI = player;
onPlayerAPIAvailableCallback();
return;
}
setTimeout(initializePlayerAPI, 100);
}

initializePlayerAPI();

function getPlayer() {
var embeds = (_vidalytics || {}).embeds || {};
if (embeds[EMBED_CODE_ID]) {
return embeds[EMBED_CODE_ID].player || {};
}
return {};
}

function onPlayerAPIAvailableCallback() {
var autoplayStatus = vidalyticsPlayerAPI.autoplayStatus;

if (autoplayStatus === 'muted') {
var ctas = document.getElementsByClassName('vidalytics-cta-button');
var onTimeChangedHandler = function () {
Array.prototype.forEach.call(ctas, function(cta) {
cta.style.opacity = 0;
});
vidalyticsPlayerAPI._player.removeEventHandler('onTimeChanged', onTimeChangedHandler);
};
vidalyticsPlayerAPI._player.addEventHandler('onTimeChanged', onTimeChangedHandler);

var onUnmutedHandler = function () {
Array.prototype.forEach.call(ctas, function(cta) {
cta.style.opacity = 1;
});
vidalyticsPlayerAPI._player.removeEventHandler('onUnmuted', onUnmutedHandler);
}
vidalyticsPlayerAPI._player.addEventHandler('onUnmuted', onUnmutedHandler);
}
}

</script>


Customizing CTAs via CSS

The CTAs are customizable via CSS :) We recommend not modifying the player via ID attribute but rather using classes.

1. Player ID is different on each request 

2. Embed ID is different for different embed codes, so if you would ever change embed code it may stop working later.

Did this answer your question?