If your custom code isn't working on your Webflow site (whether added in the page footer, project footer, or Embed element), here are the steps to troubleshoot and fix the issue.
1. Verify the Code Type and Placement
- Scripts or external embeds should go in the Project Settings > Custom Code > Footer for site-wide effect, or Page Settings > Custom Code > Footer for page-specific use.
- If it’s visual HTML elements or widgets, use a "Embed" component placed on the canvas.
- Scripts that manipulate HTML must wait for the DOM to load — wrap them in
window.onload
or DOMContentLoaded
.
2. Check Webflow's Embed Permissions
- Webflow disables scripts/scripts-style embeds in the Designer preview. You must publish the site to a custom domain or to the
webflow.io
subdomain to test whether they’re working. - Embedded code (Script/iframe) won't display in preview or Designer mode.
3. Ensure the Script Is Not Blocked
- Browser or ad blockers can block scripts from domains like Facebook, TikTok, or custom trackers. Test your published site in a private/incognito window with extensions turned off.
- Check the developer console (F12) in your browser for JavaScript errors when viewing the published site.
4. Validate External Links and Sources
- If your code includes
<script src="...">
, confirm that: - The script URL is correct and publicly accessible.
- The site uses HTTPS and doesn't block third-party embeds via CORS or Content Security Policies.
5. Watch for Conflicts or Incorrect Syntax
- One missing semicolon or bracket in a script can prevent it from running.
- Avoid duplicate script tags or library loads (e.g., loading jQuery manually when Webflow already includes it).
- If you're using the Embed element for scripts, make sure you're not inserting only
<script src="...">
without pairing it with <script></script>
if needed.
7. Delay Script Execution If Needed
- For dynamically loaded elements (like sliders or forms), your script might need to run after the DOM and Webflow interactions have initialized. Use a wrapper like:
window.addEventListener("load", function() { ... });
- Or use
setTimeout(function(){...}, 1000)
as a test.
8. Publish Again After Changes
- Every time you add or change custom code, click Publish again. The code changes do not appear on the live site until published.
Summary
To make your code work on your Webflow page, ensure it's added in the correct location, properly formatted, not blocked by the browser, and that you're testing on the published site, not the Designer. If you've confirmed all of the above and it’s still not rendering, share the actual code snippet you're using to allow for more specific diagnosis.