# AI Website Summarizer — Full Specification & Integration Architecture

> Comprehensive technical documentation, widget configuration parameters, and embedding guidelines for AI Website Summarizer.

## Executive Overview

AI Website Summarizer provides website owners, SaaS platforms, documentation portals, and publishers with an instant, embeddable widget that enables visitors and AI agents to summarize long-form pages, articles, and documentation. The widget operates client-side with zero heavy dependencies, extracting core page text and structuring 1-click prompts for ChatGPT, Claude, and Google Gemini.

## Core Capabilities

1. **Instant LLM Routing**: 1-click execution that pre-fills user prompts directly into chat.openai.com, claude.ai, and gemini.google.com with active URL context.
2. **Context Window Efficiency**: Formats page summaries with structured markdown headings, bulleted takeaways, and actionable next steps.
3. **Zero-Dependency Vanilla JS**: Single static asset (`widget.js`, ~16KB uncompressed) served globally via Cloudflare edge CDN.
4. **Zero Layout Shift (CLS)**: Embeds cleanly either as a non-intrusive floating trigger or as an inline component.
5. **No Origin API Keys Required**: The widget does not require visitors to enter server-side API keys, preventing quota exhaustion and security exposure.

## Complete Embed Specifications

### 1. Standard Floating Widget (Bottom-Right)
Place this script tag immediately before the closing `</body>` tag on any page:

```html
<script 
  src="https://www.aiwebsitesummarizer.com/widget.js" 
  data-brand="Your Brand" 
  data-prompt="Summarize the core features and pricing on this page"
  data-theme="dark"
  defer>
</script>
```

### 2. Static Inline Container
To embed the summarizer directly inside an article body or sidebar, add a container element:

```html
<div id="ai-summarizer-target"></div>
<script 
  src="https://www.aiwebsitesummarizer.com/widget.js" 
  data-brand="Your Brand"
  data-position="static"
  defer>
</script>
```

## Supported HTML Data Attributes

| Attribute | Type | Default | Description |
|---|---|---|---|
| `data-brand` | string | "AI Summarizer" | Brand or site name displayed in the header pill |
| `data-prompt` | string | Auto-generated | Custom prompt passed into the LLM chat window |
| `data-theme` | string | "dark" | Visual palette: "dark" or "light" |
| `data-position`| string | "floating" | Placement mode: "floating" (fixed pill) or "static" (in-place container) |
| `data-z-index` | string | "99" | CSS z-index stacking context for floating mode |
| `data-ga-id` | string | null | Optional Google Analytics 4 Measurement ID (e.g. "G-XXXXXX") |

## Platform Integration Guides

### WordPress
1. Navigate to **Appearance ➔ Theme File Editor** or use a header/footer injection plugin (e.g., WPCode).
2. Insert the standard `<script>` tag into the footer section of `footer.php`.

### Webflow
1. Open **Project Settings ➔ Custom Code ➔ Footer Code**.
2. Paste the `<script>` tag and publish to production.

### Next.js (App Router)
Include the script in `app/layout.tsx`:
```tsx
import Script from 'next/script';

export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <html lang="en">
      <body>
        {children}
        <Script 
          src="https://www.aiwebsitesummarizer.com/widget.js" 
          strategy="lazyOnload" 
          data-brand="Your Brand"
        />
      </body>
    </html>
  );
}
```

## Related Network Sites
- [Michael Vereb Portfolio](https://www.michaelvereb.com)
- [llms-text.com Directory & Generator](https://www.llms-text.com)
- [Copy Markdown Extension](https://www.copymarkdown.md)
- [FastMCP Server Directory](https://www.fastmcp.dev)