How to create a Custom Action for your videos

Avatar
Brendan O'Driscoll
Who Can Use This Feature?
Self-Service Plans
Free Pro Plus
Business Plans
Essentials (with add-on) Growth Enterprise
Users must have the Edit Videos permission enabled.

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 Selecting the Actions icon from the main menu, then clicking on the New Action button
  3. Select the type of Custom Action that you want to make (Fullscreen or Annotation), then click on CreateIn the pop-up menu, selecting the type of Custom Action that you want to create, either fullscreen or annotation

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.

Using the options in the WYSIWYG editor to build and design your Custom 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

Using the Action Builder to add text, buttons, images or form fields to your custom action

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

Components Description
Background Enter the URL for an externally hosted image to add it as a background to your Action
Large Text & Text

Add a message to your Action with 2 different sizes of text.

You can then use the color pickers to change how the text appears.

Button

Add a button to your Action that allows viewers to open a link to an external webpage.

You can then use the color pickers to change the button and text color.

Form Add fillable form fields to your Action. Includes the option to send a notification to an email address whenever a viewer submits the form

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>

Opening the HTML editor to add references to an external font family stylesheet

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

Using the Annotation Style editor to change the position, dimentions, color and transparency of the Action

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

Annotation setting Description
Dimensions Click and drag the edges of the Action to change its dimensions. Or, enter a value into the width and height fields to change size in pixels.
Position

Click and drag the Action to change its position within the video frame.

Or, enter a value into the fields to move the Action horizontally or vertically by a number of pixels.

Color

Use the color picker to change the background color of the Action.

-Option to select color by RGB or Hex Code values

-Option to change HSB values (hue, saturation, brightness)

Transparency (content or background)

Move the slider or enter a value (0-100%) to adjust transparency.

You can adjust either the transparency of the background or the content of the Action itself.

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

If you've chosen to build a fullscreen action, you can use the Design Setting to change the background color, transparency and 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 

Using the settings in the Advanced Options menu to adjust the behavior of your custom action, like whether the viewer can choose to skip it

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

Setting Description
Allow the viewer to skip the Action and resume the video Adds a button that allows viewers to skip the Action
Only show Action to the viewer once per page load

The Action will only display to the viewer once after the video loads on the page.

If the viewer refreshes the page, the Action will display again.

Skip Action for known contacts

The Action will only appear if the viewer is not yet a known contact in Vidyard (they have not been previously identified)

Pre-fill known data if the viewer is already a contact

Automatically fill in any form fields if the viewer is already a known contact in Vidyard (they have previously been identified)

Skip form for leads known in Marketo (for Marketo Forms only)

Vidyard checks if the viewer is already a known contact in Marketo. If yes, the form does not display.

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 VideoSelecting the Assign tab to add your new custom action to videos in the same folder
  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 videosSelecting videos from the folder to assign the Action to
  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

Choosing when your custom action appears in the videos that you've assign it to (before, during or after the video plays)

Need support

Submit a ticket or start a chat. We'll provide a self-serve resource or connect you with our support team, available 24x5.

Chat with Our Team