# NanoLog — Integrated Changelog, Roadmap & Feedback Widget

NanoLog is an ultra-lightweight (<17KB gzipped), zero-dependency, whitelabel product engagement widget for modern SaaS applications. It operates in a secure, isolated Shadow DOM to prevent any style bleeding or host site conflict.

## Installation & Script Block Integration

Inject the standard script tag directly before the closing `</body>` tag of your application:

```html
<!-- Load the widget bundle from the edge CDN -->
<script src="https://www.nanolog.dev/widget.min.js" defer></script>
<script>
  window.addEventListener('load', function() {
    window.NanoLog.init({
      appId: 'YOUR_APP_ID',
      context: {
        userId: 'unique-user-id-123', // Recommended: uniquely identifies user votes/feedback
        role: 'admin',                // User segment (e.g., 'admin', 'user', 'beta')
        tier: 'pro',                  // Subscription tier for cohort targeting
        tenant_id: 'org_987'          // Organization/tenant ID
      }
    });
  });
</script>
```

---

## Production Security: HMAC User Verification

To prevent spoofing or unauthorized user payload injection in production, sign the user payload on your backend using an HMAC-SHA256 signature with your project's webhook/HMAC secret.

### 1. Backend Signature Generation (Node.js/Next.js)

```javascript
import crypto from 'crypto';

export function generateNanoLogSignature(userId, secretKey) {
  return crypto
    .createHmac('sha256', secretKey)
    .update(userId)
    .digest('hex');
}
```

### 2. Frontend Signature Verification Delivery

Pass the computed `signature` value inside the initialization context block:

```javascript
window.NanoLog.init({
  appId: 'YOUR_APP_ID',
  context: {
    userId: 'user_123_prod',
    signature: 'computed_hmac_hex_signature', // Backend-verified signature
    role: 'customer'
  }
});
```

---

## B2B Compliance & Client-Side Privacy (GDPR & HIPAA)

NanoLog captures user feedback safely by sanitizing inputs and visual assets locally *before* they are sent to our servers:

* **Interactive PII Paint Tool**: Allows end users to use a paint brush directly on screenshots to overlay solid black blackout redaction blocks on sensitive numbers, charts, or personal details before submitting.
* **Automated Text Redaction Scrubber**: Client-side scanner automatically targets and masks common PII patterns (emails, phone numbers) and password/CVV fields.

---

## Capture Context & Diagnostics

Every visual feedback ticket automatically packages a clean client diagnostics payload to help engineering diagnose bugs without asking for HAR files:

1. **Viewport Screensize**: Current width and height (e.g., `1440x900`).
2. **Browser & Operating System**: Derived user-agent details (e.g., `Chrome 122 / macOS`).
3. **Current Location URL**: The exact active path where the user triggered the feedback.
4. **Client Console Logs & Exceptions**: Real-time error logs and client exceptions captured at the moment of submission.

---

## Widget Customization & White-Label Styling

You can configure the widget's appearance directly in your dashboard or override styling on the fly using standard CSS variables targeting the Shadow DOM host.

### Custom CSS Variables Override

Apply a `<style>` block anywhere on the host page:

```css
:root {
  --widget-primary-color: #6366f1; /* Brand color */
  --widget-primary-gradient: linear-gradient(135deg, #4f46e5 0%, #06b6d4 100%);
  --widget-bg: #ffffff;
  --widget-text: #0f172a;
  --widget-border: #e2e8f0;
  --widget-font-family: 'Inter', sans-serif;
}
```

### Custom Trigger Binding

To open the widget from a custom button on your SaaS site instead of using the default floating launcher button:

1. Disable the default launcher in the `init` config:
   ```javascript
   window.NanoLog.init({
     appId: 'YOUR_APP_ID',
     showLauncher: false // Hides default floating bubble
   });
   ```
2. Bind the click handler on your custom HTML element:
   ```javascript
   document.getElementById('my-feedback-btn').addEventListener('click', () => {
     window.NanoLog.open();
   });
   ```