AI Summarize Widget ✨

A tiny, CSS-safe widget that lets visitors send your articles to ChatGPT, Claude, Gemini, or Perplexity in one click.

Other languages: Türkçe · Deutsch · Français · 中文 · العربية

---

⚡ Setup in 2 Steps

Step 1 — Add the script

Paste this just before the closing </body> tag:

<script src="https://unpkg.com/ai-summarize-widget/dist/ai-summarize-widget.min.js"></script>

Using NPM / React / Next.js?

npm install ai-summarize-widget

import AISummarizeWidget from 'ai-summarize-widget';

Step 2 — Initialize

<script>
  new AISummarizeWidget({
    type: 'fixed'   // ✨ floating button appears in the bottom-right corner
  });
</script>

Open your page — a ✨ button appears. Click it → pick an AI → article is copied to clipboard → redirected automatically.

---

🔧 Two Modes

Mode 1 — Floating Button + Modal (type: 'fixed')

A sticky FAB in the corner. Clicking opens a centered dialog. Best for blogs and article pages.

<script>
  new AISummarizeWidget({
    type: 'fixed',
    theme: 'auto',            // 'auto' | 'dark' | 'light'
    buttonColor: '#4f46e5',
    lang: 'en'
  });
</script>

Mode 2 — Inline Button + Popover (type: 'inline')

Injects the button into any existing element (e.g. your share bar).

<div class="share-area">
  <button>Share on X</button>
  <!-- ✨ injected here -->
</div>

<script>
  new AISummarizeWidget({
    type: 'inline',
    target: '.share-area',
    theme: 'dark',
    buttonColor: '#10b981'
  });
</script>

---

🎯 Content Scope (contentScope)

Restrict parsing to a specific element — useful when a page has multiple articles (e.g. news feeds).

// News feed: 40 article cards on the page
// inline → closest('.article') is used automatically
new AISummarizeWidget({
  type: 'inline',
  target: '.article .share-bar',
  contentScope: '.article',
  buttonColor: '#4f46e5'
});

// Fixed FAB: picks the article most visible in the viewport
new AISummarizeWidget({
  type: 'fixed',
  contentScope: '.article',
});

Situation	Behavior
contentScope not set	Default heuristic detection (unchanged)
1 match	That element is parsed
inline + multiple matches	inlineBtn.closest(sel) → the card containing the button
fixed + multiple matches	Element with the largest visible area in the viewport
0 matches	Falls back to default heuristic

---

🌗 Theme (theme)

Value	Behavior
'auto' (default)	Follows OS dark/light mode, updates in real-time
'dark'	Always dark
'light'	Always light

---

⚙️ All Options

Option	Type	Default	Description
type	String	'fixed'	'fixed' (floating FAB + modal) or 'inline' (inject into a container)
theme	String	'auto'	Color theme: 'auto', 'dark', 'light'
target	String	null	Required for 'inline'. CSS selector of the element to inject the button into
contentScope	String	null	Restrict parsing to a CSS selector. Smart multi-element detection included
buttonColor	String	'#4f46e5'	Button color (any HEX or RGB)
lang	String	Auto	Language code: 'en', 'tr', 'de'… Reads browser language if omitted
redirectDelay	Number	1200	ms before redirecting to the AI (shows "Copied!" toast first)

---

🚀 Features

• 🎯 contentScope — Pinpoint which element to parse. Perfect for news sites with many article cards
• 🌗 Dark / Light / Auto Theme — Switches instantly when OS theme changes; applies to both the modal and the inline popover
• 🛡️ Zero CSS Conflict — All styles scoped under #aisw-root with all: unset. Safe with Tailwind, Bootstrap, and any CSS reset
• 🔗 AIO (AI SEO) — Auto-extracts JSON-LD, OpenGraph, and Twitter Card metadata as prompt context
• 🧹 Smart Content Extraction — Strips ads, navbars, sidebars, and comments. Pure article body only
• 📱 Mobile Deep Linking — Bypasses popup blockers on iOS/Android. Opens native apps directly
• 🌍 Multi-Language + RTL — en, tr, de, fr, es, zh, ru and more; full RTL for ar, fa, he, ur

---

📦 Publishing to npm / unpkg

# Build
npm run build

# Publish (requires npm login)
npm publish

After publishing, the CDN URL is live immediately:

https://unpkg.com/ai-summarize-widget@latest/dist/ai-summarize-widget.min.js
https://cdn.jsdelivr.net/npm/ai-summarize-widget@latest/dist/ai-summarize-widget.min.js

---

📄 License

MIT © 2026 Mustafa Savul