How to: Embed Widget Codes to Your Website

What does embed mean?

Embed means to integrate external content into another website or page. You embed something when you place a block of code — called an embed code — into the HTML editor of another website. When you hit ‘Save’ or ‘Publish,’ the media then renders on the published page.

Embedded content is referenced with HTML. HTML is one of the most basic languages used on the web to design and lay out web pages.

You often see this code when you're in the "back end" of your blog post. There’s where you’ll add your embed code.

Below, we cover these steps in more detail for each platform. In general, you’ll want to:

1. Generate the embed code.
2. Access your content management system and paste the embed code in your HTML viewer.
3. Finished! You have embedded content into your website or blog.

Let’s dive into each step.

1. Generate the embed code.

Before embedding external content, you must first generate an embed code for the post or page you want to embed on your website.

All embed codes use iframe tags:

 
<iframe src="url" title="description" ></iframe>

or Javascript tags:

 
<script type="text/javascript” src="URL”></script>

Thankfully, we do this all for you!

Navigate to your Widgets page within the platform and scroll down to the Embed code section:

Select which type of code you would like to embed and click [Copy Code]

Please note: You can only select one type of code to paste into your website. If the widget does not appear with the Javascript code, try using the iframe code.

2. Access your content management system and paste the embed code in your HTML viewer.

Although every CMS is different, you can probably find the HTML viewer with similar steps. We’ll go over how you can do it in CMS Hub and WordPress.

CMS Hub

In CMS Hub, you actually don’t need to add your embed content using the HTML editor (although you have the option to). Here’s how:

• In your HubSpot dashboard, navigate to Marketing > Website > Blog. If you’re planning to add the code to a website page, navigate to Marketing > Website > Website Pages.

• Find the post or page that you’d like to add the embed code to. Hover over it, then click Edit.

• Click into the module where you’d like to add the embed code. An options bar will appear near the top of the screen. In the right-hand side, click Insert.
• Choose Embed from the drop-down menu.

• A pop-up will appear. Paste the iframe code into the text bar.

• Click Insert.
• Finished! You can edit the width and height of the embed content to customize it further.

To access the HTML editor, complete steps 1-3 above. On the top options bar, click Advanced > Source Code. You can then paste your embed code manually. Note that the end result is the same.

WordPress

To paste an embed code into your WordPress website, use the following steps:

• Access your admin area and go to either Pages or Posts.
• Click the title of the post that you want to add the embed code to. This action will take you to the post editor.
• Click the Text tab on the upper right-hand corner of the text editor.

• Paste your embed code where you want the module to appear.

3. Finished! You have embedded content onto your website or blog.

Once you reload the page, your embedded widget will appear.

Add Embedded Content to Increase User Engagement

By embedding external content on your pages and posts, you can increase engagement on your website and get your site visitors to interact with the content you post on social media. The best part is that it’s easy to do — simply generate the embed code, paste it into your HTML editor, and watch your user engagement (and leads) grow!