Setting Up Your CTA Button:

Call To Action buttons (CTAs) are an excellent way to perform 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 also super flexible.

The first thing you have to do is go to your video settings page and set up your CTA Button.

The CTA Section is under VID SETTINGS. 

Click it to expand and then click on 'Create New CTA'.

Fill in all the information for this CTA, like the URL it will open once it is clicked, and when should it show up and go away in your video:

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

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

The colors of your CTA will be the same as the ones you choose to use on your 'Appearance' tab, so they will match the colors on all of your settings. 

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?