Add custom blocks of HTML code to your site using the Embed element to unlock all kinds of custom functionality.
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.
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>
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).
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:
To add custom code in a rich text element:
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>
You can incorporate Collection fields into embedded code to dynamically pull information for various uses.
Learn more: Dynamic embeds
To edit the code in the Embed element, you can either:
element settings panel → embed settings → open code editor
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.
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.
Once you publish or export your site, the <script> and custom code inside will render where you placed it.</script>
Embedding Google Docs and Google Spreadsheets into your Webflow site is easy and can be done in two steps.
Resource: Integrations — features a number of tutorials for services that you can integrate into your Webflow projects with custom code
Something went wrong while submitting the form. Please contact support@webflow.com
Got a lesson suggestion? Let us know
Need more help? Want to report a bug? Contact support
Have feedback on the feature? Submit feature feedback