Code Embed element

In Webflow, we add content and structure using built-in elements. And style them visually in the Style panel. And Webflow handles the code behind the scenes. But sometimes, we need to add our own code from outside Webflow. And the Code Embed element lets us do that. Maybe you want to add a third-party scheduling widget to your site; that’s what we’ll start with in this video. We’ll look at: What the Code Embed element is for Where it fits into a layout, How to add your code, And some common issues and quick fixes And we’ll finish with a bonus demo where we add a little custom CSS so you can see two different uses of the embed element. Let’s start with what the Code Embed element actually is. Over in the Add panel, you’ll find the Code Embed element down in the advanced section. It can hold things like HTML snippets, iframe embeds, or small scripts and styles. It’s perfect for things like our scheduling widget, an interactive map embedded from the web, or a custom style you can’t achieve with built-in options. And with the code embed element, all of these live inside a specific section of a page. Now, Webflow also lets you add page- and site-level custom code for scripts that need to run across a full page or entire site — like this chat widget. We cover that in another video. But if the code needs to be built into a specific section’s layout, the Code Embed element is the way to go. Now, let’s look at how it works with layout. Code Embed elements are placed in your layout a lot like any other element — nested somewhere in your hierarchy — usually inside a styled Container or Div. And placing it in a Div with a class lets us control things like margin or padding, height or width, and how it behaves across breakpoints. And styling its parent Container lets us control how it works with other elements. Ours is a grid setup, with two columns and set gap values. But there’s nothing there yet. Let’s add our code. In most cases, embed code or instructions come from a tool’s documentation, like Calendly. And there may even be options for how to embed it. Or even different code types you can use. Or in our case, we’re using the inline embed option, which utilizes Javascript and can be found within the account itself. And that includes some customization options we’ll adjust to fit our brand style and preferences. Now, we can copy the inline embed snippet from Calendly and paste it directly into the Code Embed element. Then save and close. Let’s enter Preview mode and check it out. Looking great. But a head’s up, you may also need to toggle Enable custom code here or even publish to staging to see it. How the code renders depends on its type. But what if it doesn’t render as expected? Let’s talk about some common issues and quick fixes. For starters, if an embed doesn’t appear at all, it’s usually a code issue. And if something’s broken, Webflow may flag the embed, but you’ll need to fix it. One step you can take is to confirm the snippet exactly matches the documentation. And be sure the code is compatible. Code Embeds work with HTML embeds, like script tags or iframes. Snippets meant for frameworks or server-side setups won’t run here. If the embed does appear, but looks wrong, that could be a layout issue. Maybe it’s cramped on desktop and even cuts off on mobile. We can double check our div wrapper sizing. Let’s avoid fixed widths and switch from pixels to percent. And make sure it can shrink and grow as needed. We’ll also check how our grid behaves at smaller breakpoints — for example, make sure that side-by-side columns stack on smaller breakpoints. Embeds behave just like other elements. Where and how they appear is controlled by layout and styling. But one additional note, especially for iframe-based embeds like our map: some providers include settings directly inside the code that control size or behavior — like its specific dimensions. So if you’ve checked everything else and things still behave unexpectedly, review which parameters or other options are available for the type of code you’re using. Ok, before we wrap up, a bonus demo. This time, we’re going to style a button with a gradient transition hover effect with some custom CSS. We could set some of these styles in the Style panel, but in this case, custom code let’s us get even more… well, custom. So we’ll drop a Code Embed element in the section holding the form. Then, paste in some CSS that references our button class and adds a gradient transition on the hover state. Save and close, and we see the change. Ok, let’s recap. We learned that the Code embed element is made to hold small chunks of code within one section of a page. We saw how you can drop it in a div or container and style it to fit your layout. We looked at how tool providers often provide code you can copy, like for our Calendly scheduling widget. We walked through common issues and quick fixes to try when things don’t go as expected. And finished with a quick second example using custom CSS code. And that’s how to use the Code Embed element in Webflow.