How can I create a hyperlinked background image in an Action?

Overview

One of the most simplistic ways to create a Custom Action is to embed a full image and link it to either a URL or email address. This solution avoids coding individual HTML elements with CSS styles, as the image itself will have been designed to show the CTA button as part of the graphic. 

Some caveats of creating an Action this way is that you can only use one link, as clicking anywhere on the image will open that single URL. You also cannot create any on hover effects for certain parts of the Action, resulting in the visual looking and acting less dynamic than using more heavily coded HTML and CSS.

The example below shows an image with a button that has been designed by a graphic designer, uploaded onto a web server and then rendered in an Action.

Steps

1. Create a new Action by clicking Actions and then New Action (top right).

2. Select Fullscreen from Custom and press Create.

3. Give your Action a name and then click on the HTML tab

4. Copy and paste code from this Vidyard CodePen into the editor (Note: code is provided for instructional purposes only)

5. Make changes to the code that will suit your presentation of the content. Replace 'EXTERNAL LINK' with the webpage you wish to send your viewer to (you can replace 'https://' with 'mailto:' if it is an email address rather than webpage). Replace 'IMAGE LINK' with the image that is hosted and publicly accessible.

6. Save and Assign the content.

7. Click on the Add Video button from the top right and select a video for the Action.

8. Select a timepoint that suits this Action. POST will appear after the final frame and is most common.

Job done! You could even make this a default event if you would like the same experience across all of the videos in your group!