Custom Code Embed

 

The Embed element gives you the power of code in your project pages. If you have a premium Webflow account or if your project has an active Webflow hosting plan, you can add custom blocks of HTML code to your sites to unlock all kinds of custom functionality. 

You can embed 3rd party elements such as Google Docs and Sheets, social media feeds, live chat apps, forms such as Typeforms, and much more. You can also use your CMS Collection fields to dynamically update embedded code.

Webflow Embed Code Editor
In this lesson
  • ‍Adding an Embed Element
  • ‍Editing the Embed element
  • ‍Live Preview

Adding an Embed Element

Webflow Embed

You can embed third-party code or type in your own custom code. A custom embed can be placed anywhere on the page.

  1. Copy the embeddable code to your clipboard
  2. Press A to open the Elements Panel
  3. Add an Embed element from the Components section
  4. Paste in the custom code you copied in step 1.
  5. Press Save & Close
 
Good to know
If the code doesn’t have any breaks, it will display all on one line. You can scroll horizontally to see the entire snippet of code.
Updating the code with dynamic content: You can incorporate Collection fields into embedded code to dynamically pull information for various uses. Learn more about dynamic embeds.
Must know
If the embeddable code has opening and ending tags, make sure to add them to make the code work.
Adding <html>, <body>, or <head> tags in the embed will break your website/layout.

Editing the Embed element

To edit the code in the Embed element, you can double-click the element or click Open Code Editor in the Embed Settings section of the Element Settings Panel.

Webflow Embed Settings
Good to know
If you cannot see your embed element on the canvas, you can locate it and select it from the Navigator panel. Then, head over to the Settings panel and open the code editor to edit your code.

Live Preview

Custom HTML,wrapped in <iframe> or <style> tags for example will show a preview in the canvas, but some code is restricted to only viewing on the live website. Any time a <script> tag is used in the code editor, you'll see a placeholder in your project.

Webflow Embed placeholder

Once you publish or export your site, the <script> and custom code inside will render where you placed it.

 

Dimensions

If your custom code doesn't explicitly set sizing or dimensions, the content can often take up the full width of its parent element.

Also check out
  • Integrations - features a number of tutorials for services that you can integrate into your Webflow projects with custom code