Custom code embed

 

The embed element gives you the power to add custom code to your projects. If you have a premium Webflow account or if your project has an active Webflow 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
In this lesson
  1. Adding an embed element
  2. Editing the embed element
  3. Setting dimensions
  4. Previewing the embedded content
  5. Embedding Google Docs and Sheets (an example)

Adding an embed element

Webflow Embed

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.

  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
 

Using dynamic content within your custom code

You can incorporate Collection fields into embedded code to dynamically pull information for various uses. Learn more about dynamic embeds.

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.
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).
Must know
If the embeddable code has opening and closing tags, make sure to add them to make the code work.
Important
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 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.

Setting 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.

Previewing 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 — Embedding 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
Also check out

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