npm package: @idliapam/radar-widget
Description: In-app changelog, announcements, and surveys widget. Show users what's new.
Author: Idliapam
Latest version: 1.1.0

# @idliapam/radar-widget

**In-app changelog, announcements, and user communication widget. Tell users what's new without them leaving your app.**

[![npm version](https://img.shields.io/npm/v/@idliapam/radar-widget.svg)](https://www.npmjs.com/package/@idliapam/radar-widget)
[![License: MIT](https://img.shields.io/badge/License-MIT-violet.svg)](https://opensource.org/licenses/MIT)

---

## The Problem

You ship features every week. Nobody notices.

Your changelogs live on a blog nobody reads. Your product emails have 12% open rates. Users complain about missing features that you shipped 3 months ago.

**The disconnect between what you build and what users know exists is killing your adoption metrics.**

## The Solution

Radar is a lightweight widget that adds a "What's New" bell icon to your app. When users click it:

1. **Announcements appear in-app** — no redirects, no emails to ignore
2. **Unread badge** shows count of new updates — creates curiosity
3. **Categories** (Feature, Fix, Improvement, Security) help users scan
4. **Read tracking** — know which users read which announcements

On the cloud version, you also get:
- AI-generated changelogs from your Git commits
- Multi-channel delivery (email + WhatsApp + Slack)
- In-app NPS surveys and feedback collection
- Status page with incident management
- Public roadmap with user voting
- Session replay and heatmaps

---

## Quick Start

### Option 1: Script Tag (30 seconds)
```html
<script src="https://unpkg.com/@idliapam/radar-widget"></script>
<script>
  Radar.init({ apiKey: 'YOUR_API_KEY' });
</script>
```

### Option 2: NPM
```bash
npm install @idliapam/radar-widget
```
```javascript
import { Radar } from '@idliapam/radar-widget';

Radar.init({
  apiKey: 'YOUR_API_KEY',
  user: { id: '123', email: 'user@example.com' },
});
```

A bell icon appears in the corner of your app. Users click it to see your latest updates.

---

## What It Does

| Feature | Description |
|---------|-------------|
| **Bell Icon** | Floating notification bell with unread count badge |
| **Announcements Panel** | Slide-out panel showing latest updates with category badges |
| **Unread Tracking** | Tracks which announcements are new (stored in localStorage) |
| **Categories** | Feature (violet), Fix (green), Improvement (blue), Security (red) |
| **Responsive** | Works on desktop and mobile |
| **Lightweight** | < 5KB gzipped, zero dependencies |
| **Customizable** | Position, color, user identification |

---

## Configuration

```javascript
Radar.init({
  // Required
  apiKey: 'YOUR_API_KEY',

  // Widget appearance
  position: 'bottom-right',       // bottom-right | bottom-left | top-right | top-left
  color: '#6366F1',               // Bell button color

  // User identification (for targeting)
  user: {
    id: 'user_123',
    email: 'user@example.com',
    name: 'Jane Doe',
    plan: 'pro',                  // For segment targeting
  },

  // Callbacks
  onOpen: () => analytics.track('changelog_opened'),
});
```

---

## Self-Hosting (Free Forever)

```bash
docker run -p 3000:3000 idliappam/radar-server
```
```javascript
Radar.init({
  apiKey: 'any-key',
  endpoint: 'https://your-server.com/api/v1/radar',
});
```

Self-hosted: 1 project, 1 editor, unlimited announcements. Free forever.

---

## Cloud Version

Get your API key at [radar.idliapam.in](https://radar.idliapam.in)

Cloud adds:
- **AI Changelog Generation** — connect GitHub, AI writes release notes from commits/PRs
- **Multi-Channel Delivery** — one announcement goes to widget + email + WhatsApp + Slack
- **In-App Surveys** — NPS, emoji reactions, text feedback, triggered by page or event
- **Targeted Announcements** — show updates to specific user segments (free vs paid, new vs returning)
- **Status Page** — operational/degraded/down indicators with incident management
- **Public Roadmap** — users vote on what to build next
- **Analytics** — read rates, engagement metrics, feature adoption tracking
- **Session Replay + Heatmaps** — watch how users interact with your app
- **Team Collaboration** — multiple editors, review workflow, scheduling

---

## Why Radar vs Alternatives

| Feature | Radar | Beamer | LaunchNotes | Canny |
|---------|-------|--------|-------------|-------|
| AI Changelog from Git | Yes | No | No | No |
| In-App Widget | Yes | Yes | Yes | No |
| WhatsApp Delivery | Yes | No | No | No |
| In-App Surveys (NPS) | Yes | Yes | No | No |
| Status Page | Yes | No | No | No |
| Public Roadmap | Yes | No | No | Yes |
| Session Replay | Yes | No | No | No |
| Self-Host Option | Yes | No | No | No |
| Open Source Widget | Yes | No | No | No |
| Starting Price | ₹1,999/mo | $49/mo | $99/mo | $79/mo |

---

## Use Cases

- **SaaS Products** — Keep users informed about new features and fixes
- **Product Teams** — Communicate releases without writing blog posts
- **Developer Tools** — Auto-generate changelogs from GitHub PRs
- **Mobile Apps** — In-app "What's New" screen for app updates
- **E-commerce** — Announce sales, new products, policy changes
- **Internal Tools** — Communicate platform updates to employees

---

## Framework Examples

### React
```jsx
import { useEffect } from 'react';
import { Radar } from '@idliapam/radar-widget';

function App() {
  useEffect(() => {
    Radar.init({ apiKey: 'YOUR_KEY' });
    return () => Radar.destroy();
  }, []);
  return <div>Your app</div>;
}
```

### Next.js
```jsx
<Script src="https://unpkg.com/@idliapam/radar-widget" />
<Script id="radar-init">{`Radar.init({ apiKey: 'YOUR_KEY' })`}</Script>
```

---

## API Reference

### `Radar.init(config)` — Initialize the widget
### `Radar.destroy()` — Remove the widget

---

## Contributing

We welcome contributions! Open an issue or PR on [GitHub](https://github.com/Ankitajainkuniya/radar-widget).

## Support

- Documentation: [docs.idliapam.in](https://docs.idliapam.in)
- Issues: [GitHub Issues](https://github.com/Ankitajainkuniya/radar-widget/issues)
- Email: hello@idliapam.in

## License

MIT - see [LICENSE](LICENSE)

---

Built by [Idliapam](https://idliapam.in) — the unified AI platform for modern businesses.