Adding Vocal Video Embed Codes to Your Site
This guide is for Vocal Video customers who would like step-by-step instructions for adding embed codes to websites and blogs.
Getting your Embed Code
We provide an easy-to-use Embed Builder to configure your embedded video players. They even automatically update if you edit the embedded videos in your Vocal Video account.
Just copy your embed code and paste the HTML code where you want it to appear on your site. For the curious, the embed code is made up of a combination of an iframe tag and some JSON metadata which helps your video thumbnails show up in Google/Bing search results, driving more clicks to your site.
Using your Embed Code
Since your embed code is just a snippet of HTML, you'll need to either paste it into your site's HTML files, or if you're using some type of content-managment system/blogging platform/website builder. You'll need to know how to add a custom bit of HTML in your system. Click below to jump to your platform:
If you're using the open-source version of Wordpress, either on a self-hosted blog, or via commercial Wordpress hosting other than Wordpress.com (like WPEngine), you can create a custom HTML block and paste your embed code there.
If your site is hosted on Wordpress.com, iframes aren't allowed in custom HTML blocks. If this situation applies to you, let us know at email@example.com.
You can embed Vocal Videos in a Shopify theme, in a product page, or even a content page or blog post.
Adding a video to a Shopify theme: edit your theme's Liquid templates and paste your embed code where you want it to appear.
Adding a video to a Shopify page, blog post, or product description: Navigate to the page, blog post, or product you want to add your video embed code to and click the "Show HTML" button. Then paste in your embed code.
Embedded videos can be added to your Hubspot web pages, landing pages, blog posts, or knowledge base pages via a Rich Text Module or, in some places, via a Video Module.
Refer to Hubspot's thorough guide based on the type of module you'd like to use, but we recommend the "Embed an external media file with an embed code" method for the most predictable results:
- In your HubSpot account, navigate to website pages, landing pages, blog, or knowledge base.
- Hover over your page, post, or article, then click Edit.
- In the content editor, click the rich text module.
- In the rich text toolbar, click the Insert dropdown menu and select Embed.
- In the dialog box, enter the external media file's embed code. You will be shown a preview of your file.
- Click Insert.
You can paste your Vocal Video embed code into your Leadpages landing pages via their HTML widget. See here for more details.
To add your Vocal Video embed code to a Convertkit landing page or form, simply paste your code into an HTML block.
To add a Vocal Video embed code to a blog post or page in Ghost, paste it into an HTML block.
Don't see your CMS, blog, or website platform here? Not to worry – just consult their documentation or contact their support about how to insert a custom snippet of HTML into your pages. HTML is what the entire web was built on, so odds are whatever your website is built with, it supports adding some custom HTML snippets.
As always, if you have questions, feel free to get in touch with us at firstname.lastname@example.org.
Let us know when you embed your videos!
Seeing where and how you embed your videos is also helpful for us as we work on improvements to our embedded video player and other types of embeds such as galleries, playlists, and videos with featured quotes called out.