Custom code

Add custom blocks of HTML code to your site using the Embed element to unlock all kinds of custom functionality.

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, surveys, and much more. You can also use your CMS Collection fields to dynamically update embedded code.

A HTML embed code editor includes 3 rows custom code, a save button and a save & close button.

‍

The embed element only supports HTML, CSS in <style> tags, and </style>JS in <script> tags. You can't integrate server-side languages (such as Perl, PHP, Python, or Ruby) in an embed element.</script>

In this lesson

Add an Embed element
Edit the Embed element
Set dimensions
Preview the embedded content
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, or in a rich text element. Just use quick find (CMD/CTRL+E) and type embed or drag an embed element from the Add panel.

To add custom code directly into your design:

Copy the embeddable code to your clipboard
Press A to open the Add elements panel
Add an embed element from the components section
Paste in the custom code you copied in step 1
Save and close the modal

The custom code button is highlighted in the insert menu.

‍

To add custom code in a rich text element:

Place your cursor where you’d like to add custom code
Click the plus sign to open the insert menu and click the custom code button
Add your code

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.

Important!

Adding <html>, <body>, or <head> tags in the embed will break your website/layout.</head></body></html>

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

The settings panel includes the HTML embed settings section. The HTML embed settings includes a text input field for an ID and a dropdown menu for embed settings with a "open code editor" button.

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></iframe> or <style></style> tags will show a preview in the canvas or within your rich text element, but some code embeds can only be viewed on the live website. Any time a <script></script> tag is used in the code editor, you'll see a placeholder in your project.

An HTML embed preview includes a warning icon and text that reads "This <script> embed will only appear on the published/exported site."

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

Embed Google Docs and Sheets (as an example)

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

Grab the Embed code of your Google Doc or Spreadsheet. Learn more about embedding Google Docs
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

Try Webflow — it's free

No items found.