Light mode Switch to Dark mode High contrast

All courses

Custom code in Webflow

Login with your Webflow account to track your progress

Custom code in Webflow

Add custom code to extend your site beyond built-in options.

Webflow generates clean HTML, CSS, and JavaScript behind the scenes as you build on the visual canvas. But some projects require additional code to support third-party tools, custom styling, or behavior scripts.

In this course, you’ll learn how custom code works in Webflow and where it can be added based on scope and impact. You’ll explore layout-level embeds using the Code Embed element, page-level and site-level scripts added through Settings, and how custom code interacts with CMS-driven content. You’ll also learn how to preview, test, and troubleshoot code before publishing, and how to keep it maintainable as your site grows.

By the end of this course, you’ll be able to:

• Add custom code at the layout level using the Code Embed element
• Add scripts at the page and site levels within Settings
• Describe how custom code works within the Webflow CMS
• Preview, test, and troubleshoot custom code
• Maintain and scale custom code over time

Table of contents

1

Getting started

Getting started

Getting started

Coming soon

1

Background & preview 2:00

Background & preview

Coming soon

1

Where you can add custom code 4:00

Where you can add custom code

Coming soon

2

Adding custom code

Adding custom code

Adding custom code

Coming soon

2

The Code Embed element 6:01

The Code Embed element

Coming soon

2

At the layout level (Code Embed element) 3:00

At the layout level (Code Embed element)

Coming soon

2

Page & site level code 3:36

Page & site level code

Coming soon

2

Page-level code 3:00

Page-level code

Coming soon

2

Site-level code 4:00

Site-level code

Coming soon

2

Adding custom code

Custom code in the Webflow CMS 3:01

Custom code in the Webflow CMS

Coming soon

2

In the Webflow CMS 5:00

In the Webflow CMS

Coming soon

3

Managing custom code

Managing custom code

Managing custom code

Coming soon

3

Previewing, testing, & troubleshooting 5:00

Previewing, testing, & troubleshooting

Coming soon

3

Best practices for maintainable code 4:00

Best practices for maintainable code

Coming soon

4

Wrap up

Wrap up

Wrap up

Coming soon

4

Try it: use the Code Embed element 4:00

Try it: use the Code Embed element

Coming soon

4

Wrap up

Try it: add page-level code 4:00

Try it: add page-level code

Coming soon

4

Wrap up

Try it: add site-level code 4:00

Try it: add site-level code

Coming soon

4

Additional resources 2:00

Additional resources

Coming soon

Progress

0%

Details

Intermediate

57m

15

Lessons

Assets & links

Assessment

Test your knowledge

Enroll Now →

Continue Learning

<h3>Intro to Optimize</h3>Learn how to use Webflow Optimize to improve your site's conversion rate using testing, personalization, and AI Optimize.

<h3>Webflow 101</h3>Introducing Webflow 101, the ultimate course to learn the fundamentals of web design and development.

<h3>Prepare to publish your site</h3>Learn how publishing works in Webflow, manage site changes with confidence, and prepare for launch.

<h3>Webflow SEO fundamentals</h3>Learn how to plan, build, and maintain a search-friendly Webflow site using best practices and built-in SEO tools.

<h3>Take your app live with Webflow Cloud</h3>Prepare and deploy an existing app, connect live data, and keep it running.

<h3>Collaborate with your team</h3>Learn how to set up roles, permissions, and workflows in Webflow so your entire team can work together safely, confidently, and efficiently.

{
  "@context": "https://schema.org",
  "@type": "Course",
  "name": "Custom code in Webflow",
  "description": "Add custom code to extend your site beyond built-in options.",
  "url": "https://university.webflow.com/courses/custom-code-in-webflow",
  "inLanguage": "en",
  "provider": {
    "@type": "Organization",
    "name": "Webflow University",
    "sameAs": "https://university.webflow.com"
  }
}