How to add Vidyard videos to HubSpot marketing emails
You can easily add Vidyard videos to your marketing emails in HubSpot's drag & drop email editor.
Simply copy the email campaign embed code for your video and paste it into email builder's HTML module.
Since video playback is not supported inside most email clients, the email campaign code adds your video's thumbnail image with a play button to the body of the email. When clicked, the image links your email recipients to a your branded sharing page where they can watch your video.
Requirements
- You must have permission in HubSpot to create new marketing emails
Adding video to your marketing email
-
Create a new email (or edit an existing email) in HubSpot
- Select Marketing > Email from the main menu to get started
- In the email editor, select +more to click and drag an HTML-Email element onto the layout
- Copy and paste the email campaign embed code for your video (obtained from Vidyard) into the HTML box.
- You should see your video's thumbnail image appear where you placed the HTML module in the drag & drop editor.
- You should see your video's thumbnail image appear where you placed the HTML module in the drag & drop editor.
How to identify contacts who watch your video
To ensure each email recipient who watches your video is properly identified in Vidyard, you'll need to add a special string to the video URL in the embed code.
The string combines Vidyard's identification parameter with HubSpot's personalization token (merge tag) for contact emails: ?vyemail=
and {{contact.email}}
.
- Find
share.vidyard.com/watch/
in the<a href>
tag of the embed code - Add
?vyemail={{contact.email}}
to the end of the URL
The end result should look like this:
<a href="https://share.vidyard.com/watch/JJkazZR7foHWFu4KPa?vyemail={{contact.email}}" target="_blank" title="short video">
How to change the size of the thumbnail image
In addition to the editing options in HubSpot's email builder, you can also edit the HTML of the video's thumbnail to change its size.
For example, add width="640"
and height="360"
to the <img>
tag to make the thumbnail larger.
<img src="//cdn.vidyard.com/thumbnails/7812491HSA1BRNEUDYpjo5QMMH_play_button_small.jpg" alt="Yukon" width="640" height="360/>