Setting Up
Before you start
You’ll need two things:
- A Webflow site — any site with a staging URL (the
.webflow.ioone) - Claude — the AI assistant that will set everything up and build what you need
That’s it. No other tools to learn, no accounts to create.
The setup conversation
The easiest way to get started is to tell Claude:
“I want to use Loops to add custom functionality to my Webflow site. Can you set it up for me?”
Claude handles the setup and gives you clear, simple instructions — like “paste this snippet here in Webflow.”
Here’s what that conversation typically looks like:
You: I want to use Loops on my portfolio site. I need custom animations on the homepage.
Claude: I’ll set that up for you. I’ve created a Loops project for your site and a script for the homepage.
You’ll need to paste two small snippets in Webflow:
1. Go to Site Settings → Custom Code → Before </body> and paste this:
<script src="https://loops.gushon.com/s/abc123"></script>
2. Go to your Homepage → Page Settings → Custom Code → Before </body> and paste this:
<script src="https://loops.gushon.com/s/abc123/homepage"></script>
Then publish your staging site and let me know when you’re done.
You: Done!
Claude: Connected! I can see your site. What would you like me to build?
What are those snippets?
They’re tiny script tags — the same kind of thing you’d paste for Google Analytics or any Webflow embed.
- The first one goes in your Site Settings — it lets Claude communicate with your staging site (the feedback loop)
- The second one goes on the specific page where you want custom behavior
You paste them once and forget about them. Claude tells you exactly what to paste and where.
Where to paste in Webflow
Site Settings snippet (do this once)
- Open your Webflow project
- Click the gear icon in the bottom-left corner
- Select Site Settings
- Click Custom Code in the left menu
- Find the Before </body> tag text box
- Paste the snippet Claude gave you
- Click Save Changes
This snippet is now on every page of your site.
Page snippet (for each page that needs custom functionality)
- In the Webflow Designer, click the Pages panel (left sidebar)
- Find the page you want → hover and click the gear icon
- Scroll down to Custom Code
- Find the Before </body> tag text box
- Paste the page snippet
- Click Save
Publish
Click Publish in the top-right → make sure your staging domain is checked → Publish to Selected Domains.
Then tell Claude you’re done. That’s the whole setup.
Good to know
Your live site isn’t affected. The Site Settings snippet only activates on your .webflow.io staging domain. On your production site, it does nothing — zero performance impact.
Multiple snippets per page are fine. If a page needs animations, form validation, and data fetching, Claude will give you a snippet for each. They all go in the same Before </body> box.
Claude handles everything. You never have to figure out snippets yourself. Claude generates them and tells you exactly where to put them.
Next step
Head to Your First Request to see how a typical conversation with Claude goes.