How can I add external scripts (CSS and JS) to a specific page on my website using Webflow?
TL;DR
- Open the desired page's settings in the Webflow Designer.
- Add external CSS in the “Inside tag” field and JavaScript in the “Before tag” field.
- Save changes and publish the site to apply and test the code.
To add external CSS or JavaScript files to a specific page in Webflow, you need to insert them into that page’s custom code area.
1. Access the Page Settings
- Go to your Webflow Dashboard and select the project you want to edit.
- In the Designer, open the Pages panel (left sidebar).
- Hover over the page you want to edit, then click the gear icon to open Page Settings.
2. Add CSS or JS in the Custom Code Fields
- In the Page Settings, scroll down to the Custom Code section.
- Use the Inside tag field to add your external CSS or any head scripts:
- Example:
<link rel="stylesheet" href="https://example.com/styles.css"> - Use the Before tag field to add external JavaScript files:
- Example:
<script src="https://example.com/script.js"></script>
3. Save and Re-Publish
- Once your code is added in the appropriate field, click Save at the bottom.
- Back in the Designer, click Publish to apply changes to your live site.
4. Notes and Limitations
- Scripts won't run in Preview Mode—you must publish the site to test.
- Only certain script sources are permitted, especially in Webflow's Free or Starter plans.
- Avoid adding scripts that conflict with Webflow's built-in jQuery if possible.
Summary
To add external CSS or JavaScript to a specific Webflow page, insert the link or script tags in the Page Settings > Custom Code section under the appropriate fields, then save and publish the site to apply the changes.