How to create a Custom Action for your videos

Custom Actions allow you to build your own fully customized in-video CTA from scratch.

With access to common Action components like buttons, form fields and text, you can build a call-to-action, then add your own HTML, CSS, and Javascript. This will let you customize how it looks, feels and behaves.

Custom Actions are ideal if:

• One of Vidyard's pre-built Quick Actions does not suit your needs
• You have the knowledge and resources to work with HTML and CSS
• You want to create an Action that includes third-party scripts like a calendar (from tools like Calendly) or marketing forms (from automation platforms like HubSpot, Pardot or Eloqua).

Create a new Custom Action

1. Select the Actions icon (🎯) from the main menu. This will open the of list Actions for the folder that you're currently in.
2. Select New Action
3. Select the type of Custom Action that you want to make (Fullscreen or Annotation), then click on Create

Building your new Custom Action

Give your Action a name and description. Then, use the available editing tools to start building your custom CTA.

There are several tabs in the editor that you can use to help build the Action:

• Visual tab--> as you put your Action together, use the visual tab to preview what it will look like. You can also change font, text color, and alignment.
  
  
• HTML tab --> access and edit the source code of your Action
   
• Action Builder tab --> add common components to build your Action, like a background image, text, buttons and form fields
  
  
• Annotation Style tab --> for Annotation-type Actions only. Change the position, dimensions, background color and transparency of the Action.

The Action Builder

The Action Builder allows you to add a number of common components to an Action and position them within the video frame. You can then use the HTML editor to make further customizations with your own HTML, CSS, or Javascript.

1. Select the Action Builder tab from the editor
2. Add components to create your Action, like text, a button or form fields. You can then use the directional arrows to move the elements up or down on the canvas.
3. Select Generate when finished

Here's a summary of each option in the Action builder:

The HTML editor

As you add text, buttons, images and other components to your Action, use the HTML editor to customize how the Action looks, feels and behaves.

In the source code editor you can add HTML, CSS, and JavaScript, as well as references to external libraries or stylesheets.

As an example, you may want to reference an external font stylesheet to customize any text in your Action. Along with the reference link to the stylesheet, you can then add the font family to the CSS in the source code. 

<link href="https://fonts.googleapis.com/css?family=Barrio" rel="stylesheet">
<style>
p {
font-family:'Barrio',cursive;
}
</style>

Note: any JavaScript that you add to the source code will not render inside the Actions editor or the preview. To preview custom code configurations, assign your Action to a test video. You can then use the link to the video to view it on the sharing page.

Annotation style settings

The Annotation Style tab will be available if you've selected Annotation as the type of Custom Action that you want to create. These settings allow you to change the position of the Action in the video frame, its dimensions, background color and transparency.

1. Select the Annotation Style tab from the editor
2. Use the various settings to adjust the Action's position, dimensions, background color or transparency
3. Select Apply to finish

Here's a description of how to use each of the Annotation settings:

Design Settings (fullscreen Actions)

Design Settings allow you to adjust the background of fullscreen Actions, specifically the color, transparency and amount of blur.

These settings will be available if you've selected fullscreen as the type of custom Action that you want to create.

1. Open the color picker to adjust the background color and transparency. You can also enter RGB or Hex Code values.
2. Move the slider or enter a value (0-50px) to adjust the background blur

Note: the Blur effect is not supported if viewers use a legacy browser like Internet Explorer 11 to watch your video. Vidyard videos are best watched with a compatible, supported browser.

Advanced Actions Options

Advanced Options allow you to adjust how the Action behaves for your viewers. For example, you may want to give viewers the option to skip over your Action.

1. Select Advanced Options at the bottom of the Action editor to access additional settings
2. Switch the setting toggles ON or OFF to change how the Action behaves 

Here's a quick breakdown of how each setting affects the Action:

Assigning your Custom Action to a video

Once you've finished building your custom Action, you can then assign it to 1 or more videos in the same folder.

1. Select the Assign tab
2. Click on + Add Video
3. Select the plus button (+) beside a video to assign the Action
   • Need to find the right video? You can also use the search box to find videos by their title, description, internal notes, tags or UUID.
4. Click on Close when you've finished selecting videos
5. Select when the Action appears during the playback of each assigned video
   • Click on PRE for the Action to appear before the start of a video
   • Click on POST for the Action to appear after a video finishes
   • Alternatively, move the slider to position the Action at a specific second during the video
6. Select Save to finish