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 hosting 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
  • Adding an embed element
  • Editing the embed element
  • ‍Live preview

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

Live preview

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.

 

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