Connecting Slater to Webflow enables safe, collaborative development and deployment of custom JavaScript on your site. Follow these steps to get started and ensure a smooth, secure workflow.
Prerequisites
Before beginning, ensure the following:
- Access to a Webflow project with permission to edit Site settings
- Ability to edit Custom code (found under Site Settings > Custom code)
- A Slater account (sign up via the Webflow App Marketplace or hi.slater.app)
Step-by-Step Integration
1. Create a Slater Account
- Sign up at Slater.app and add the Slater Webflow app to your project.
2. Add the Slater Script (One Time Only)
- In Webflow, go to Site settings > Custom code > Footer code
- Paste the Slater script snippet (provided in the Slater App) just before the closing
</body> tag - Save your changes and publish your site
3. Write and Test Code in Slater
- Create a new file and write your JavaScript code
- Utilize AI assistance within Slater if needed
- Publish to your staging environment (e.g.,
yourproject.webflow.io) to test and validate behavior safely
4. Publish to Production
- Once testing is complete, publish the same script to production directly from Slater
- Your live Webflow site will automatically load the latest hosted script
Rollback and Safety Features
- Use the History tab in Slater to revert to any previous version of your code
- Leverage Smart Script to ensure staging and production environments always load the correct script versions
Quick-Start Sample
Try this simple first step to verify your setup:
console.log("👋")
- Add this code, publish to staging, and confirm it appears in the browser console
- Once verified, promote the script to production
Frequently Asked Questions (FAQs)
- Do I need to add the script on every page?
- No. Add it once at the site level for site-wide use.
- Can I target specific pages?
- Yes. Select the desired page(s) when generating your Slater file.
- Can I collaborate with my team?
- Yes. Invite teammates and manage permissions directly within Slater.
Additional Resources
For more details, see the Official Slater Documentation.
