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 CaptionsWatermarkEndcard, 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

Enter your email address to send a sample video email to your inbox. Mouseover the video to preview the full campaign.

Make An Impact WIth A Video Welcome

Education This example of a UNSW welcome email showcases how video email is able to deliver a strong and lasting impression

Welcome to Amazon Music Unlimited

Music Increase the effectiveness of your welcome email journeys by treating your audience to a quality video experience directly in the email

UNICEF United Nations Pandemic Classroom

Non-profit UNICEF is able to communicate more information about the COVID Education Crisis utilizing video email marketing.

Spotify Sets The Mood With Video Email

Music Spotify's promotion of playlists also captures the mood you can set by including great quality video playing directly in an HD email video.

Send Yourself This Video Email Sample...

 

You have Successfully Subscribed!