# Webflow Integration

Spyglasses provides comprehensive AI SEO, bot detection, and AI referrer tracking for Webflow sites through our **Cloudflare Workers integration**. This approach is necessary because Webflow doesn't provide direct access to request logs or middleware capabilities that Spyglasses requires for effective bot detection and analytics.

## Why Cloudflare Workers?

Webflow is a powerful website builder, but it has certain limitations when it comes to server-side integrations:

### Webflow Limitations

- **No Server Access**: Webflow doesn't provide access to server-side code or middleware
- **No Request Logs**: You can't intercept or analyze incoming HTTP requests
- **Limited Custom Code**: Only client-side JavaScript is supported
- **No Bot Detection**: No way to identify bots before they load your pages

### Cloudflare Workers Solution

Cloudflare Workers sit **in front** of your Webflow site, providing:

- ✅ **Full Request Access**: Analyze every request before it reaches Webflow
- ✅ **Edge Processing**: Lightning-fast bot detection at 300+ global locations
- ✅ **Complete Analytics**: Track bots, AI referrers, and human visitors
- ✅ **Selective Blocking**: Block harmful bots while allowing legitimate crawlers
- ✅ **Zero Webflow Changes**: Your Webflow site remains completely unchanged

## How It Works

```mermaid
graph LR
    A[Visitor] --> B[Cloudflare Worker<br/>Spyglasses Detection]
    B --> C{Is Bot/AI?}
    C -->|Block| D[403 Forbidden]
    C -->|Allow| E[Your Webflow Site]
    B --> F[Spyglasses Analytics]
```

1. **Visitor makes request** to your domain
2. **Cloudflare Worker intercepts** the request before it reaches Webflow
3. **Spyglasses analyzes** the request for bots and AI referrers
4. **Legitimate traffic** is forwarded to your Webflow site
5. **Analytics data** is sent to your Spyglasses dashboard

## Prerequisites

To use Spyglasses with Webflow, you need:

1. **Webflow site** (any plan)
2. **Cloudflare account** (free plan works)
3. **Domain on Cloudflare** (your custom domain must use Cloudflare DNS)

## Setup Process

### Step 1: Move Your Domain to Cloudflare

If your domain isn't already on Cloudflare:

1. Sign up for a [free Cloudflare account](https://www.cloudflare.com)
2. Add your domain to Cloudflare
3. Update your domain's nameservers to Cloudflare's
4. Ensure your site is working through Cloudflare

### Step 2: Configure Webflow

In your Webflow project settings:

1. Go to **Publishing** → **Custom Domain**
2. Add your domain (the one now on Cloudflare)
3. Verify the domain is properly connected

### Step 3: Deploy Spyglasses Worker

**🚀 Easiest Option: Use Our Template**

We've created a ready-to-deploy template that requires **no coding** and **no file editing**:

<a href="https://deploy.workers.cloudflare.com/?url=https://github.com/orchestra-code/spyglasses-cloudflare-worker-example" target="_blank" rel="noopener noreferrer" style={{
  display: "inline-block",
  backgroundColor: "#f38020",
  color: "white",
  padding: "0px 32px",
  borderRadius: "6px",
  textDecoration: "none",
  fontWeight: "600",
  fontSize: "16px",
  border: "none",
  cursor: "pointer",
  transition: "background-color 0.2s ease",
  marginBottom: "16px"
}}>
  🚀 Deploy to Cloudflare Workers
</a>

**✅ Everything is configured in the Cloudflare dashboard - no technical skills needed!**

**Alternative: Manual Setup**

Follow our complete **[Cloudflare Workers Integration Guide](/docs/platforms/cloudflare-workers)** with these Webflow-specific settings:

```toml
# wrangler.toml
name = "webflow-spyglasses-worker"
main = "src/index.ts"
compatibility_date = "2024-12-30"
compatibility_flags = ["nodejs_compat"]

[vars]
ORIGIN_URL = "https://your-site.webflow.io"
SPYGLASSES_DEBUG = "false"
```

### Step 4: Configure Cloudflare Routes

In your Cloudflare dashboard:

1. Go to **Workers & Pages** → **Overview**
2. Click **Add Route**
3. Set route pattern: `*your-domain.com/*`
4. Select your Spyglasses Worker
5. Save the route

## Webflow-Specific Considerations

### E-commerce Sites

For Webflow e-commerce sites, consider these exclusions:

```typescript
const config: SpyglassesWorkerConfig = {
  excludePaths: [
    '/checkout',
    '/account',
    '/cart',
    '/order-confirmation',
  ],
  platformType: 'webflow-ecommerce',
};
```

### Form Submissions

Webflow forms will work normally since the Worker forwards all legitimate traffic:

- ✅ Contact forms continue working
- ✅ Newsletter signups unaffected  
- ✅ E-commerce checkout process unchanged
- ✅ All Webflow integrations remain functional

## Benefits for Webflow Sites

### AI SEO Insights

- **Track AI Platform Visits**: See when your content appears in ChatGPT, Claude, or Perplexity
- **Content Performance**: Understand which pages AI platforms find most valuable
- **SEO Optimization**: Optimize content for both humans and AI

### Bot Protection

- **Scraper Prevention**: Block aggressive content scrapers
- **SEO Protection**: Prevent duplicate content issues from bot scraping
- **Server Load**: Reduce server load by blocking unwanted bots

### Analytics Enhancement

- **Separate Bot Traffic**: Clean analytics data with bot traffic filtered out
- **AI Referrer Tracking**: Track human visitors coming from AI platforms
- **Real User Metrics**: Focus on actual human engagement

## Pricing

### Cloudflare Workers

- **Free Plan**: 100,000 requests/day (sufficient for most sites)
- **Paid Plans**: $5/month for 10M requests + additional usage

## Migration from Other Platforms

If you're moving to Webflow from another platform with existing Spyglasses integration:

1. **Keep your Spyglasses account** - no changes needed
2. **Update your property settings** in the Spyglasses dashboard
3. **Deploy the Cloudflare Worker** as described above
4. **Update your origin URL** to point to your new Webflow site

## Troubleshooting

### Common Issues

**Site not loading through Cloudflare:**
- Verify DNS settings are correct
- Check SSL/TLS encryption mode is set to "Full" or "Full (strict)"
- Ensure Webflow domain is properly configured

**Worker not triggering:**
- Verify route pattern in Cloudflare dashboard
- Check that the Worker is deployed to the correct zone
- Test with debug mode enabled

**Webflow forms not working:**
- Ensure all POST requests are being forwarded correctly
- Check that Webflow's form action URLs are accessible
- Verify no essential paths are excluded

### Getting Help

Need assistance with your Webflow integration?

- 📖 **[Complete Setup Guide](/docs/platforms/cloudflare-workers)** - Full Cloudflare Workers documentation
- 💬 **Support**: Contact support@spyglasses.io
- 🐛 **Issues**: Report bugs or request features

## Deployment Options for Non-Developers

We understand that Webflow users often prefer visual, no-code solutions. Here are your options:

### 🚀 One-Click Deploy (Recommended)
- **No GitHub account needed**
- **No code knowledge required**
- **Deploy directly from our template**

<a href="https://deploy.workers.cloudflare.com/?url=https://github.com/orchestra-code/spyglasses-cloudflare-worker-example" target="_blank" rel="noopener noreferrer" style={{
  display: "inline-block",
  backgroundColor: "#f38020",
  color: "white",
  padding: "0px 32px",
  borderRadius: "6px",
  textDecoration: "none",
  fontWeight: "600",
  fontSize: "16px",
  border: "none",
  cursor: "pointer",
  transition: "background-color 0.2s ease",
  marginBottom: "16px"
}}>
  🚀 Deploy to Cloudflare Workers
</a>

### 🔧 GitHub Import (Simple)
- **Fork our example repository**
- **Use Cloudflare's "Import a repository" feature**
- **Minimal setup required**

Visit: [github.com/orchestra-code/spyglasses-cloudflare-worker-example](https://github.com/orchestra-code/spyglasses-cloudflare-worker-example)

### 📋 Manual Copy-Paste (No GitHub)
- **Download files manually**
- **Copy code into Cloudflare Workers editor**
- **Perfect if you don't want to use GitHub**

## Next Steps

Ready to add Spyglasses to your Webflow site?

👉 **[Use Our Example Template](https://github.com/orchestra-code/spyglasses-cloudflare-worker-example)** (Easiest)

👉 **[Follow the Complete Integration Guide](/docs/platforms/cloudflare-workers)** (Advanced)

Both guides include step-by-step instructions, troubleshooting tips, and support options.