Getting Started with Slater for Webflow

Learn how to quickly set up Slater with your Webflow project, write and test custom scripts, and safely publish changes. This guide covers prerequisites, step-by-step instructions, rollback options, and frequently asked questions for a smooth integration.

Published April 14, 2026

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

• Slater Official Website
• Webflow App Marketplace – Slater
• Video: Getting Started with Slater on Webflow (YouTube) (Search for the latest official demo or tutorial videos)

For more details, see the Official Slater Documentation.