How can I add external scripts (CSS and JS) to a specific page on my website using Webflow?
TL;DR
- Open Page Settings by clicking the gear icon next to the desired page in Webflow.
- Add external CSS in the Inside tag field using
<link rel="stylesheet" href="URL">. - Add JavaScript in the Inside tag (for preloaded scripts) or Before tag (for scripts that run after content loads).
- Use
deferfor asynchronous script loading if needed. - Click Save Changes, publish the site, and test the functionality.
To add external CSS and JavaScript to a specific page in Webflow, use the Page Settings. Follow these steps to ensure the scripts load correctly.
1. Open Page Settings
- Go to Pages in the Webflow Designer.
- Locate the page where you want to add the scripts.
- Click the gear icon (⚙) to open Page Settings.
2. Add External CSS
- In the Custom Code section, locate the Inside tag field.
- Paste your CSS link using the format:
<link rel="stylesheet" href="https://your-external-css-url.css"> - This ensures your external styles load before the page renders.
3. Add External JavaScript
- For scripts that should load before other elements, paste them in the Inside tag field:
<script src="https://your-external-js-url.js"></script> - For scripts that should load after the page content, use the Before tag field.
- If needed, make the script load asynchronously:
<script src="https://your-external-js-url.js" defer></script>
4. Save and Publish
- Click Save Changes at the bottom of the Page Settings panel.
- Publish your site and verify that the external scripts are loading as expected.
Summary
Go to Page Settings, and use the Inside tag for CSS and preloaded JavaScript, and Before tag for scripts that run after content loads. Always test after publishing to confirm correct functionality.