Step-by-step Tutorial
How to embed Video in SendGrid using the Code Editor
Playable is fully integrated with SendGrid, making it quick and easy to add videos to your emails
Engage your audience, supercharge your conversion, and sell more products with SendGrid video email
Video ❤️ Email
Easily add video to your email marketing campaigns.
High quality video that plays automatically on 99% of inboxes.
Patented Video Email technology works with any email platform.
Increase Video Views
Video is the most engaging content. Email is the most trusted channel.
Start sending your best content to your best audience.
Maximize the reach and ROI of your video marketing.
Optimize Engagement
Video stimulates interest and desire more than any other content type.
Video email viewers are better qualified to drive post-click activity.
Get more clicks. Sell more stuff.
Video Tutorial: SendGrid Video Emails Using Code Editor
In this video tutorial, you will learn how to access Playable within your SendGrid dashboard.
The tutorial assumes that you have prepared and uploaded your HTML email template using the Code Editor option. Creating your email template using the Design Editor is also supported.
Step-by-step Tutorial: How to embed video using SendGrid Code Editor
In this tutorial you will learn how to create, embed, and send a video email using SendGrid and Playable, which plays automatically at the moment of opening the email – like these examples.
This tutorial covers designing your emails using the SendGrid Code Editor.
If you use the SendGrid Design Editor instead, please refer to our other tutorials and video guides.
Prepare your email template in SendGrid
1. Log into your SendGrid account
Once logged in create a new SendGrid email in the normal way.
Navigate to the Campaigns page under the Marketing Campaign menu.
Click the Create Campaign button in the top right corner of the screen.
2. Create a new Custom Campaign
Select the Custom tab to enable you to upload your HTML template.
3. Select your editing experience
Select the Code Editor option and click Continue.
The Code Editor is designed to enable you to create and edit a SendGrid template, or build a template with your Custom HTML.
4. Upload your HTML to SendGrid
Copy and paste the code for your HTML template directly into the content area of the Code Editor.
Preview your template by clicking Preview.
By placing your mouse over the element in the template, the HTML Editor Panel, on the left highlights, the HTML code relating to that content. This will help identify the width of the area the video will be placed.
5. Complete your campaign setup
Click the Settings tab on the left of the screen to complete your campaign setup.
Add campaign Name, select the From Sender, enter Subject Line, and Pre-header. You may also select a category in which your campaign will reside for reporting and archive purposes.
Import your Video into Playable
6. Create your Playable account
If you are new to Playable you need to create a new account.
Once you are logged in you will see the Playable’s Welcome page, click Videos to continue.
Please note that Playable offers a 30-day free trial account to test drive the platform. After which you can upgrade your plan or purchase extra plays as required.
7. Upload your video to Playable
Create a title for your video, this will be used to locate it in the future in your Playable account and in reporting. Referencing the dimensions of the image position holder in the email template you can now enter the size (width) of the video content you are looking to create, or keep the optimum size as suggested by Playable.
You have 2 options on how to upload your video content to Playable:
- Copy & paste a URL of the video’s location – Playable accepts content from all the major hosting platforms including YouTube, Vimeo, Brightcove, TikTok, Facebook, and Instagram.
- File Upload – Upload a file from your computer. All video file formats are accepted, including MP4, AVI, and MOV.
Once you have selected your video, click the Apply button to upload your video file.
8. Edit your email video
Having completed the configuration of your video it is now time to edit your video. To commence this click Editor.
Our Online Editor is designed to enable you to create a video clip from the full-length video you uploaded. It is this edit that will be played in your video email. In the Editor, you can crop the video to focus on key content and select multiple scenes to change the duration of the video.
As you are creating your video email the Editor will show you the total duration and allow you to preview the edits, and re-edit until you are happy with your final cut. Once you are happy with your edit click the Continue button.
9. Enhance you email video
You are now ready to add enhancements to your video, including Captions, Watermark, Endcard, or Footer. Simply select the enhancement you wish to add and follow the onscreen prompts to add it to your video.
You now have completed creating your video clip, so click the Compile button to continue.
Playable now compiles this video, creating multiple versions, which will be used to ensure each recipient receives an optimized video most suitable for their device, bandwidth, and connection.
10. Add a Call-To-Action (CTA) link
As the video is playing within the recipients’ email the option exists to include a Call-To-Action (CTA) link within the video.
To set your Click Action, add the link/URL of the destination page you want any clickers of the video to be re-directed to, and save it.
11. Preview & sample your video email
Preview how your video email plays in the major email clients by using the drop-down above the preview window.
You can also send a sample of your video email for internal review. Click the Sample button, complete the form, and hit Send. You can add a message to the sample. This is useful when circulating for internal feedback.
Once you are happy with the sample click Embed in the left-hand menu to continue.
Copy the Embed Code from Playable
10. Embed your video into SendGrid
You have 2 options to embed the video into your email, Select Campaign or Copy Embed Code.
Click on the Select Campaign button and select your email template from the drop-down of recent templates and proceed to the next step.
Alternatively, click the Copy to Clipboard button to grab the Embed Code, optimized to SendGrid.
Paste the Embed Code into SendGrid
13. Embed video into the email
If you used the Select Campaign button you will see a preview of your email. Simply hover over the Image Placeholder or Text/HTML Code Block until you see a red glowing outline. Then click to replace the image/text box with the video.
If you copied the Embed Code then simply paste it into the Text/HTML Code Block.
Continue to design, test, and send your campaign within SendGrid in the normal way.
Continue to design, test, and send your campaign using SendGrid
17. Complete campaign in SendGrid
Once the video has been embedded into your Video Email Template then continue to set up, test, and send the campaign in SendGrid in the normal way.
Seeing Is Believing
Crealy Rides Now In Entertaining Videos
Theme parks With high-quality video email, Crealy Theme Park can show off their new and exciting rides, right in everyone's inbox...so get in line!
Video Displays The Service And The Fun
Restaurants Oscar's Steakhouse can showcase delicious dishes, refreshing drinks, live entertainment, and a glamorous ambiance in video email campaigns.
Dinner Is Served At LongHorn Steakhouse
Restaurants Grill season is here, and LongHorn Steakhouse's delicious cut of meat and most popular dishes will make customers crave with video emails.
Video Email Can Tell Your Brand Story
The National Bank of Canada can deliver product information, investment advice, and financial strategies, or have fun with an engaging brand story
