How can I integrate this code into Webflow?
TL;DR
- Use the Embed element to insert HTML/CSS/JS directly into specific page sections.
- Add code to individual pages via Page Settings or globally via Project Settings > Custom Code, then publish the site.
To integrate custom code into Webflow, you have a few options depending on what the code does and where you want it to appear.
1. Identify What Type of Code You’re Adding
- HTML, CSS, or JavaScript can all be included in different areas.
- Determine if the code is just visual markup, a script (e.g., analytics, form integration), or something interactive like a widget.
2. Use the Embed Element (for Page Sections)
- Drag the Embed element from the Elements Panel into your desired place on the page.
- Paste your code directly into the Embed window.
- This is best for content that appears within the body of the page (e.g., buttons, widgets, forms).
3. Add Code to Page Settings (for Page-Specific Code)
- Go to Pages Panel, then click the gear icon (Settings) for the specific page.
- Insert code in:
- Inside <head> tag – for CSS or scripts that need to load before page loads.
- Before </body> tag – for JavaScript or tracking pixels.
- Click Save and republish the site.
4. Add Code Site-Wide (for Global Scripts)
- Go to Project Settings > Custom Code.
- Use:
- Head Code – e.g., custom fonts, global styles, or external scripts.
- Footer Code (Before </body>) – e.g., analytics, chat widgets.
- After pasting the code, click Save Changes and then Publish your site.
5. Hosting External Scripts
- Scripts hosted on external platforms (like a CDN or third-party service) can be referenced via
<script src="...">tags in the Embed element or custom code areas above. - Make sure you trust the source and the script is available via HTTPS.
Summary
To integrate custom code into Webflow, use the Embed element for page content, or add it via Page Settings or Project Settings > Custom Code depending on whether it’s page-specific or site-wide. Always publish your site after adding or updating any code.