Examples of Vidyard Custom Actions
Actions are essentially mini-webpages that show within the frame of the video. By using the flexibility of Vidyard's Custom Actions HTML editor, you can start to build creative solutions that help guide and control the viewer's video experience & content journey.
Below you'll find examples of common types of Custom Actions that you can build. Each example contains a link to a code sample that you can use to get started (Note: code is provided for instructional purposes only).
Think of each code sample as a template. Even without web development experience, you can follow the step-by-step instructions and comments within the code to update the template with your own colors, images, links and a number of other adjustments.
If you have a requirement for something completely customized, contact our Services team to learn more about their offerings.
Background image with external link (Post-roll Full Screen)Let's start with something simple that requires the least amount of effort! You can use a hosted image within an Action that links to an external resource. This could be to a URL, file download or email address. Ideal if you have images already made with CTA buttons, and you are happy to concede some dynamic HTML such as 'on hover' effects. |
|
Call to Action Button Overlay (Annotation)You can use a CTA button at any point within the playback of a video by using an annotation. This style of Action will not stop the video when it appears and will continue to show for a set number of seconds. This encourages an action from your viewers before reaching the end of playback. It could be directly related to the content currently being watched. e.g to see a particular product demo, view a relevant landing page or open an email compose window with a pre-defined subject line. Essentially any action you want them to perform. |
|
Pulsing button for final Call to Action (Post-roll Full Screen)Using animation is a great way to catch the attention of your viewer. This particular button works well in a post-roll Action to guide your viewer towards a next action - perhaps register for an event, book a demo, watch more content or schedule a meeting. |
|
Download Now (Post-roll Full Screen)If you have a hosted file such as a whitepaper, that is relevant to the video content, you can offer this up in a post-roll Action! Ideal if you have an image for the download that you can place on the left, as well as a useful PDF, ZIP or any other type of file hosted for the download!
|
|
Choose your own adventure (Pre-roll Fullscreen)You may have a number of videos in a playlist that cover the same subject, but are designed for different audiences. This Action will allow your viewer to select the appropriate video from your playlist before any playback occurs. This is best used as a Fullscreen Pre-roll Action so that the most appropriate option is chosen before playback. It could even be used as a default Action if your group/folder contains playlists with a consistent number of videos. |
|
Choose your own adventure (Post-roll Fullscreen)You can be in full control of where you want your viewers to go after watching the content (take note YouTube)! These are best used as a Fullscreen Post-roll once playback has completed, providing the viewer with a number of options that you believe will be relevant for their content journey. These could be programmed to go to external web resources, such as subscribe forms; videos within the same playlist; or other sharing/landing pages where further videos are embedded.
|
|
Social Share (Post-roll Fullscreen)If you don't have a next step for the viewer to take, perhaps just provide an easy way for the viewer to share the page to social channels! This could be a great way to attract more viewers to your site. |
|
Skip to Time/Video Navigation Bar (Annotation)Allow your viewers to skip to sections of your video content, wherever it is a timestamp in the current video, or another one in a playlist This annotation Action will show a navigation bar on the side of the video that will expand when clicked. |
|
Invisible/Transparent Skip to Time or Hyperlink (Annotation)This is a clean way to navigate through the video or link externally, without replicating the same text in an additional navigation bar or button. Use this if you have an agenda or external links that already appear within the video, so you can turn these into a set of clickable options! |
|
Book a meeting (Full Screen Post-Roll)These types of Actions provide a number of options to your viewer when the video ends. Especially useful for sales reps, post-roll CTAs allow your viewer to schedule time with you as soon as the video has completed. Link this to your individual's Calendar to book meetings (Calendly, Hubspot, Outreach etc) |
|
Survey or Quiz (Fullscreen Post-Roll)This Action will display a form that you have created already in Google Forms or other surveying tools. |
|
Calendar Link (Fullscreen Post-Roll)Add your Calendar link to an Action! This will allow the viewer to book a meeting with you without navigating away from the video! |
|
Watermark (Annotation)Display your brand's logo throughout your video content without having to 'bake it in' to your video files. |
|
'Quick Action' for emailing (Full screen)The in box 'quick actions' require you to use http(s) based pages as a button link. Use this code as a workaround to have a 'send an email' button instead. |