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
- Select the Actions icon from the main menu. This will open the of list Actions for the folder that you're currently in.
- Select New Action
- 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.
- Select the Action Builder tab from the editor
- 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.
- Select Generate when finished
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>
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.
- Select the Annotation Style tab from the editor
- Use the various settings to adjust the Action's position, dimensions, background color or transparency
- Select Apply to finish
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.
- Open the color picker to adjust the background color and transparency. You can also enter RGB or Hex Code values.
- Move the slider or enter a value (0-50px) to adjust the background blur
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.
- Select Advanced Options at the bottom of the Action editor to access additional settings
- 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:
| 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.
- Select the Assign tab
- Click on + Add Video
- 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.
- Click on Close when you've finished selecting videos
- 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
- Select Save to finish