Lesson info

If you're on one of Webflow's premium plans, or have already set up Webflow Hosting for your site, you can use the embed element to bring all the power of code to your project. You can add custom blocks of HTML code to your sites to unlock all kinds of custom functionality.

In this video, we'll cover the basics of embeds, including:

  1. ‍Adding an embed to your site
  2. ‍Editing your code embed
  3. ‍Previewing your code embed

Assets

Want to follow along with this lesson? Fortunately, we created a zip file which contains all the assets used in the project, and we've included that link 

right here
.

Transcript

The Embed element lets us integrate code right into our project.

And to demonstrate this, we'll use a custom form embed from Typeform, but this process is similar for most third-party embeds: they'll usually provide code that looks something like this. Or this. Or even this.

We simply right click to copy the embeddable code to our clipboard, and over in our project, we can access our Embed element, located under Components in our Elements Panel. And we'll place this in a container to constrict its width, but you can put the element wherever you choose.

For now, we're immediately shown the code editor.

We'll go to paste in the custom code we copied to our clipboard. Now the code might not have any breaks in it. In other words: it's all on one line. So if you're concerned that the whole thing didn't paste in, you can scroll horizontally.

Let's press Save & Close.

We'll see a placeholder in our project. As we will any time there's a <script> embed that's pasted into the code editor. There are also embeds that use <iframe>, and those can usually preview right on the Canvas.

And once we publish or export our site, it'll show up right where we placed it.

If your third-party code doesn't explicitly set sizing (or dimensions) the content can often take up the full width of its parent element. As we covered earlier, this Typeform embed is as wide as the container we placed it in.

That's a third-party embed. At any time, we can double-click the embed element to open the code editor, and of course, you can also use the same element for your own custom code. A custom embed lets you place it in a specific location on the page.