Migration Guide: Move Existing Webflow Custom Code into Slater

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.
Jared Malan