How can I add external scripts (CSS and JS) to a specific page on my website using Webflow?
TL;DR
- Access the Webflow Designer, navigate to the specific page, and open Page Settings using the gear icon.
- Add the CSS link in the "Head Tag" section and the JS link in the "Before </body> Tag" section of Custom Code.
- Save and publish to apply the changes.
To add external scripts like CSS and JS to a specific page in Webflow, follow these steps:
1. Open Your Page Settings
- Go to the Webflow Designer and navigate to the page where you want to add the external scripts.
- Click on the Pages panel on the top left side of the Designer.
- Select the page you wish to edit.
2. Access Page Settings
- With the desired page selected, click on the gear icon next to the page name to open the Page Settings.
- Here, you will find options for custom scripts and code.
3. Add Custom Code
- Scroll to the "Custom Code" section in the Page Settings.
- There are two boxes: "Head Tag" for CSS and "Before </body> Tag" for JavaScript.
- Insert the CSS link into the Head Tag section.
- Insert the JS link into the Before </body> Tag section.
4. Save Changes
- Once your links are inserted in their respective sections, click on Save to apply the changes.
- Publish your site to implement the changes live.
Summary
To add external CSS and JS to a specific page in Webflow, access the page Page Settings, and use the Custom Code section to insert your links. Save and publish your changes for them to take effect.