Articles in this section

See more

How can I create a custom CTA that links to my calendar?

Avatar
Evan Stewart
  • Updated

Overview

This is an annotation that will create a button and give you the option for that button to redirect a user to add in-player downloads, links to shopping carts or other videos, surveys, and more. Vidyard annotations are incredibly flexible, giving you the power to customize them for just about any use you can dream up.

With the example below, the annotation will redirect you to your calendar page.

Solution

  1. In the Vidyard Platform click Content and select Players
  2. Hover over the player to which you want to add the event, then click Events
  3. Select + New Event
  4. Select Annotation and click Add Event
  5. In the Event Builder, click the HTML button and replace the existing code with the example provided at the bottom of this article.
    Paste the code below in the Source code editor
  6. Configure the section -
    </style><div class="calendar-signup"><form><h3>Want to learn more?</h3>
    Note: This configuration will allow you to rename the text above the button.
  7. Configure the section -
    <a target="_blank" id="calendar" href="[Paste calendar URL here]/">
    Note: Paste the URL of where you would like to redirect the user when they click the button
  8. Configure the section -
    <input type="button" value="Book a Call" name="calendar"/>
    Note: This configuration will rename the text of the button
  9. Set the Skippable toggle to OFF and the Published toggle to ON
  10. Set the annotation time to as long as you desire it to show on the player.Location to edit the placement time of the annotation
  11. Click the Source button to exit the source code editor, then select Annotation Style
  12. On the Annotation Style screen set Background Transparency to 100% and click ApplySet transparency to 100% in the Annotation Style
  13. Configure the height/width of the image by dragging the dots and click and drag the image to move to the desired placement of the video
  14. Click Apply
  15. Save

This code can be repurposed multiple times and configured for use in other players.

Code

<script>
$(function() {
$("input[type=button]").click(function() {
API.closeCta({ disablePlay: true });
});
});
</script><style type="text/css">.calendar-signup {
position: relative;
max-width: 600px;
margin: 0 auto;
}

.calendar-signup form {
text-align: center;
}

.calendar-signup form h3 {
color: #fff;
}

.calendar-signup form label {
padding-right: 20px;
color: #fff;
}

.calendar-signup form * {
margin: 20px 0 0 0;
}

.calendar-signup form input[type=text] {
width: 180px;
padding: 6px 10px;
box-shadow: inset 0 1.5px rgba(0,0,0,0.1);
border: 1px solid #ccc;
border-radius: 2px;
}

.calendar-signup form input[type=button] {
padding: 10px 20px;
text-align: center;
background-color: #61c661;
border: 1.5px solid #4ebf4e;
border-radius: 2px;
color: #fff;
box-shadow: 0 1.5px rgba(0,0,0,0.15);
}
.calendar-signup form input[type=button]:hover {
background-color: #3da93d;
border-color: #369636;
}</style><div class="calendar-signup"><form><h3>Want to learn more?</h3><a target="_blank" id="calendar" href="[Paste calendarURL here]/"><input type="button" value="Book a Call" name="calendar"/></a></form></div>
<script type="text/javascript">
$('#calendar').click(function() {
var playerId = window.frameElement.src.split('/');
playerId = playerId[playerId.length-3];
var playerData = {uuid: playerId, event: 'pause'};
window.parent.postMessage(JSON.stringify(playerData), '*');
});
</script>

Related articles