Migration Guide: Move Existing Webflow Custom Code into Slater

Gather your current site/page embeds, create matching files in Slater, connect your Webflow project, publish to staging, verify, then remove duplicates and promote to production.

Published April 14, 2026

Before you start: Inventory your code

• Site‑wide code: Copy code from Webflow Project Settings → Custom Code → Head/Footer.
• Page‑level embeds: Review pages and templates for Embed elements and Page Settings → Custom Code.
• Third‑party libraries: Note any external scripts (e.g., GSAP) and their versions.

Connect your Webflow project to Slater

1. Create a project in Slater.
2. Copy your project’s Slater script from the connection instructions.
3. In Webflow Project Settings → Custom Code, paste the script (commonly in the site footer) and save.
4. Publish your site so the connection is active.

Recreate your structure in Slater

• Create files that mirror your original organization (e.g., globals, page‑specific scripts, utilities).
• Leave external libraries in Webflow.
• Use Slater’s editor to lint and refine code; consider adding comments to clarify responsibilities.

Publish to staging first

• In Slater, publish changes to Staging.
• If you use the Smart Script, it can load staging files on webflow.io and production files on your custom domain automatically.

Verify behavior and performance

• On your webflow.io domain, use DevTools → Network to confirm the correct Slater file is loading and no 404/console errors occur.
• Click through critical flows (navigation, forms, animations).

De‑duplicate and promote

• Once staging looks good, remove redundant Webflow embeds that have been moved into Slater to avoid double execution.
• Publish to Production in Slater and republish your Webflow site.
• Re‑test on the production domain.

Rollback strategy

• You can access snapshots to restore the previous version of your code.
• If issues arise, republish the last known‑good production version from Slater while you investigate in staging.

Common pitfalls

• Load order: Ensure vendor libraries are included before dependent code.
• Mixed locations: Avoid keeping half of a feature in Webflow embeds and half in Slater—centralize to one place for clarity.
• Page scope: If a script is page‑specific, keep it scoped in Slater to avoid unintended side effects elsewhere.

FAQs

• Do I need to remove all existing embeds? Not necessarily. Migrate incrementally; just avoid duplicated logic.
• Can I keep some code in Webflow and some in Slater? Yes—Slater complements Webflow. Document what lives where.
• How do I verify which environment is loading? Check the Network tab for the file path/URL Slater serves to that domain.