Custom code embed

The UI in this lesson may seem different if you've enables the Style Panel Beta! This content will be updated soon!
This video features an old UI. Updated version coming soon!

The embed element gives you the power to add custom code to your projects. If you have a paid Webflow account or if your project has an active site plan, you can add custom blocks of HTML code to your sites to unlock all kinds of custom functionality. 

You can embed third-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
The embed element only support HTML, CSS in <style> tags, and JS in <script> tags. You can't integrate server-side languages (such as Perl, PHP, Python, or Ruby) in an embed element.
In this lesson
  1. Add an embed element
  2. Edit the embed element
  3. Set dimensions
  4. Preview the embedded content
  5. Embed Google Docs and Sheets (an example)
Need to know
Custom code in an embed element cannot be longer than 10,000 characters. If the code you want to place on your site is longer, you can store it on another server and then embed it as a script file. You can also split the code into multiple embed code elements (provided you don't break any JavaScript functions).

Add an embed element

You can embed third-party code or your own custom code and place it anywhere on your page. Just use quick find (CMD/CTRL+E) and type embed or drag an embed element from the Add panel.

Webflow Embed
  1. Copy the embeddable code to your clipboard
  2. Press A to open the Add elements panel
  3. Add an embed element from the components section
  4. Paste in the custom code you copied in step 1
  5. Save and close the modal
Good to know 
If the code doesn’t have any line breaks, it will display all on one line. You can scroll horizontally to see the entire snippet of code.
Must know 
If the embeddable code has opening and closing 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.

Use dynamic content within your custom code

You can incorporate Collection fields into embedded code to dynamically pull information for various uses.

Learn more: Dynamic embeds

Edit the embed element

To edit the code in the embed element, you can either:

  • Double-click the element
  • Select the element and press enter
  • Click open code editor in the settings panel under embed settings
Webflow Embed Settings
element settings panel → embed settings → open code editor
Good to know
If you cannot see your embed element on the canvas, you can find and select it from the Navigator panel. Then, head over to the Settings panel and open the code editor to edit your code.

Set 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. You may be able to append height="100%" width="100%" in your custom code which will allow you to adjust the width and height of the embed element and the content from the Style panel.

Preview the embedded content

Custom HTML wrapped in <iframe> or <style> tags will show a preview in the canvas, but some code embeds can only be viewed 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.


Example — Embed Google Docs and Sheets

Embedding Google Docs and Google Spreadsheets into your Webflow site is easy and can be done in two steps.

  1. Grab the embed code of your Google Doc or Spreadsheet. Learn more about embedding Google Docs
  2. Paste the embed code into an embed element in the Designer

Resource: Integrations — features a number of tutorials for services that you can integrate into your Webflow projects with custom code