@triagly/sdk 0.1.1-beta.3 → 0.1.1-beta.5

package/README.md

@@ -2,12 +2,11 @@
 
 > JavaScript SDK for Triagly - Turn user feedback into GitHub issues instantly.
 
-Lightweight (<10KB gzipped) browser widget that captures user feedback with screenshots and automatically creates GitHub issues.
+Lightweight (<10KB gzipped) browser widget that captures user feedback and automatically creates issues in your tracker.
 
 ## Features
 
 - 🎨 **Beautiful UI Widget** - Clean, customizable feedback form
-- 📸 **Screenshot Capture** - Automatic page screenshots (with html2canvas)
 - 🐛 **Console Log Capture** - Automatically captures browser console errors and warnings for debugging
 - 🤖 **Bot Protection** - Cloudflare Turnstile integration to prevent spam
 - 🔒 **Secure Authentication** - Uses publishable keys with optional hardened mode
@@ -34,9 +33,6 @@ yarn add @triagly/sdk
 <!-- Include Cloudflare Turnstile for bot protection -->
 <script src="https://challenges.cloudflare.com/turnstile/v0/api.js" async defer></script>
 
-<!-- Include html2canvas for screenshot support (optional) -->
-<script src="https://cdn.jsdelivr.net/npm/html2canvas@1.4.1/dist/html2canvas.min.js"></script>
-
 <!-- Include Triagly SDK -->
 <script src="https://unpkg.com/@triagly/sdk/dist/index.min.js"></script>
 ```
@@ -204,6 +200,135 @@ Remove the widget and clean up event listeners.
 triagly.destroy();
 ```
 
+#### `submitNPS(submission)`
+Submit an NPS (Net Promoter Score) metric. Score must be between 0-10.
+
+```typescript
+const response = await triagly.submitNPS({
+  score: 9,
+  question: 'How likely are you to recommend us?',
+  userIdentifier: 'user@example.com',
+  metadata: { source: 'email-campaign' }
+});
+```
+
+#### `submitCSAT(submission)`
+Submit a CSAT (Customer Satisfaction) metric. Score must be between 1-5.
+
+```typescript
+const response = await triagly.submitCSAT({
+  score: 4,
+  question: 'How satisfied are you with our service?',
+  userIdentifier: 'user@example.com'
+});
+```
+
+#### `submitCES(submission)`
+Submit a CES (Customer Effort Score) metric. Score must be between 1-7.
+
+```typescript
+const response = await triagly.submitCES({
+  score: 2,
+  question: 'How easy was it to resolve your issue?',
+  metadata: { support_ticket_id: 'TKT-123' }
+});
+```
+
+#### `getMetricStats(params)`
+Retrieve statistics for a specific metric type with optional date range.
+
+```typescript
+const stats = await triagly.getMetricStats({
+  metricType: 'NPS',
+  startDate: '2025-01-01',
+  endDate: '2025-01-31'
+});
+```
+
+## Metrics Support
+
+The SDK now supports submitting standard metrics like NPS (Net Promoter Score), CSAT (Customer Satisfaction), and CES (Customer Effort Score).
+
+### Submit NPS (Net Promoter Score)
+
+```typescript
+import Triagly from '@triagly/sdk';
+
+const triagly = new Triagly({
+  publishableKey: 'pub_live_abc123'
+});
+
+// Submit NPS (score: 0-10)
+const npsResponse = await triagly.submitNPS({
+  score: 9,
+  question: 'How likely are you to recommend us?',
+  userIdentifier: 'user@example.com',
+  metadata: { source: 'email-campaign' }
+});
+
+console.log('NPS submitted:', npsResponse.id);
+```
+
+### Submit CSAT (Customer Satisfaction)
+
+```typescript
+// Submit CSAT (score: 1-5)
+const csatResponse = await triagly.submitCSAT({
+  score: 4,
+  question: 'How satisfied are you with our service?',
+  userIdentifier: 'user@example.com'
+});
+
+console.log('CSAT submitted:', csatResponse.id);
+```
+
+### Submit CES (Customer Effort Score)
+
+```typescript
+// Submit CES (score: 1-7, lower is better)
+const cesResponse = await triagly.submitCES({
+  score: 2,
+  question: 'How easy was it to resolve your issue?',
+  userIdentifier: 'user@example.com',
+  metadata: { support_ticket_id: 'TKT-123' }
+});
+
+console.log('CES submitted:', cesResponse.id);
+```
+
+### Get Metric Statistics
+
+```typescript
+// Get NPS statistics for a date range
+const stats = await triagly.getMetricStats({
+  metricType: 'NPS',
+  startDate: '2025-01-01',
+  endDate: '2025-01-31'
+});
+
+// Type-safe access based on metric type
+if (stats.metric_type === 'NPS') {
+  console.log(`NPS Score: ${stats.score}`);
+  console.log(`Promoters: ${stats.promoters_percent}%`);
+  console.log(`Passives: ${stats.passives_percent}%`);
+  console.log(`Detractors: ${stats.detractors_percent}%`);
+} else if (stats.metric_type === 'CSAT') {
+  console.log(`Average Score: ${stats.average_score}`);
+  console.log(`Satisfied: ${stats.percent_satisfied}%`);
+} else if (stats.metric_type === 'CES') {
+  console.log(`Average Effort Score: ${stats.average_effort_score}`);
+}
+console.log(`Total Responses: ${stats.total_responses}`);
+```
+
+### Metric Score Ranges
+
+- **NPS**: 0-10 (0 = Not at all likely, 10 = Extremely likely)
+- **CSAT**: 1-5 (1 = Very dissatisfied, 5 = Very satisfied)
+- **CES**: 1-7 (1 = Very easy, 7 = Very difficult)
+
+The SDK automatically validates score ranges and throws descriptive errors for invalid inputs.
+
 ## Examples
 
 ### Custom Button Trigger
@@ -290,25 +415,6 @@ try {
 
 See [Styling Guide](./docs/guides/STYLING.md) for all available variables and more examples.
 
-## Screenshot Support
-
-To enable screenshot capture, include html2canvas:
-
-```html
-<script src="https://cdn.jsdelivr.net/npm/html2canvas@1.4.1/dist/html2canvas.min.js"></script>
-```
-
-Or install via NPM and import in your bundle:
-
-```bash
-npm install html2canvas
-```
-
-```typescript
-import html2canvas from 'html2canvas';
-(window as any).html2canvas = html2canvas;
-```
-
 ## Console Log Capture
 
 The SDK automatically captures browser console messages (errors and warnings by default) to help developers debug issues.

package/dist/api.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"api.d.ts","sourceRoot":"","sources":["../src/api.ts"],"names":[],"mappings":"AAEA,OAAO,EACL,YAAY,EACZ,gBAAgB,EAChB,gBAAgB,EACjB,MAAM,SAAS,CAAC;AAIjB,qBAAa,UAAU;IACrB,OAAO,CAAC,MAAM,CAAS;IACvB,OAAO,CAAC,cAAc,CAAS;IAC/B,OAAO,CAAC,QAAQ,CAAC,CAAwB;IACzC,OAAO,CAAC,gBAAgB,CAAS;IAGjC,OAAO,CAAC,MAAM,CAAC,QAAQ,CAAC,0BAA0B,CAA8B;gBAG9E,cAAc,EAAE,MAAM,EACtB,MAAM,CAAC,EAAE,MAAM,EACf,QAAQ,CAAC,EAAE,MAAM,OAAO,CAAC,MAAM,CAAC,EAChC,gBAAgB,CAAC,EAAE,MAAM;IAS3B;;OAEG;IACH,mBAAmB,IAAI,MAAM;IAI7B;;OAEG;YACW,iBAAiB;IA4B/B;;OAEG;IACG,cAAc,CAClB,IAAI,EAAE,YAAY,EAClB,QAAQ,EAAE,gBAAgB,EAC1B,cAAc,CAAC,EAAE,MAAM,GACtB,OAAO,CAAC,gBAAgB,CAAC;CA2E7B"}
+{"version":3,"file":"api.d.ts","sourceRoot":"","sources":["../src/api.ts"],"names":[],"mappings":"AAEA,OAAO,EACL,YAAY,EACZ,gBAAgB,EAChB,gBAAgB,EACjB,MAAM,SAAS,CAAC;AAIjB,qBAAa,UAAU;IACrB,OAAO,CAAC,MAAM,CAAS;IACvB,OAAO,CAAC,cAAc,CAAS;IAC/B,OAAO,CAAC,QAAQ,CAAC,CAAwB;IACzC,OAAO,CAAC,gBAAgB,CAAS;IAGjC,OAAO,CAAC,MAAM,CAAC,QAAQ,CAAC,0BAA0B,CAA8B;gBAG9E,cAAc,EAAE,MAAM,EACtB,MAAM,CAAC,EAAE,MAAM,EACf,QAAQ,CAAC,EAAE,MAAM,OAAO,CAAC,MAAM,CAAC,EAChC,gBAAgB,CAAC,EAAE,MAAM;IAS3B;;OAEG;IACH,mBAAmB,IAAI,MAAM;IAI7B;;OAEG;YACW,iBAAiB;IA4B/B;;OAEG;IACG,cAAc,CAClB,IAAI,EAAE,YAAY,EAClB,QAAQ,EAAE,gBAAgB,EAC1B,cAAc,CAAC,EAAE,MAAM,GACtB,OAAO,CAAC,gBAAgB,CAAC;CA0E7B"}

package/dist/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,aAAa,EAAE,YAAY,EAAE,MAAM,SAAS,CAAC;AAKtD,qBAAa,OAAO;IAClB,OAAO,CAAC,MAAM,CAAgB;IAC9B,OAAO,CAAC,MAAM,CAAiB;IAC/B,OAAO,CAAC,GAAG,CAAa;IACxB,OAAO,CAAC,WAAW,CAAc;IACjC,OAAO,CAAC,aAAa,CAA8B;gBAEvC,MAAM,EAAE,aAAa;IAwDjC;;OAEG;IACH,OAAO,CAAC,IAAI;IAkBZ;;OAEG;YACW,YAAY;IAgE1B;;OAEG;IACH,IAAI,IAAI,IAAI;IAIZ;;OAEG;IACH,KAAK,IAAI,IAAI;IAIb;;;OAGG;IACG,MAAM,CAAC,IAAI,EAAE,YAAY,EAAE,cAAc,CAAC,EAAE,MAAM,GAAG,OAAO,CAAC,IAAI,CAAC;IAqBxE;;OAEG;IACH,OAAO,IAAI,IAAI;CAKhB;AAGD,cAAc,SAAS,CAAC;AAexB,eAAe,OAAO,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAEA,OAAO,EACL,aAAa,EACb,YAAY,EACb,MAAM,SAAS,CAAC;AAKjB,qBAAa,OAAO;IAClB,OAAO,CAAC,MAAM,CAAgB;IAC9B,OAAO,CAAC,MAAM,CAAiB;IAC/B,OAAO,CAAC,GAAG,CAAa;IACxB,OAAO,CAAC,WAAW,CAAc;IACjC,OAAO,CAAC,aAAa,CAA8B;gBAEvC,MAAM,EAAE,aAAa;IAwDjC;;OAEG;IACH,OAAO,CAAC,IAAI;IAkBZ;;OAEG;YACW,YAAY;IAyD1B;;OAEG;IACH,IAAI,IAAI,IAAI;IAIZ;;OAEG;IACH,KAAK,IAAI,IAAI;IAIb;;;OAGG;IACG,MAAM,CAAC,IAAI,EAAE,YAAY,EAAE,cAAc,CAAC,EAAE,MAAM,GAAG,OAAO,CAAC,IAAI,CAAC;IAqBxE;;OAEG;IACH,OAAO,IAAI,IAAI;CAKhB;AAGD,cAAc,SAAS,CAAC;AAexB,eAAe,OAAO,CAAC"}

package/dist/index.esm.js

@@ -13,6 +13,24 @@ class FeedbackWidget {
     init() {
         this.createButton();
         this.injectStyles();
+        // Load Turnstile script if configured
+        if (this.config.turnstileSiteKey) {
+            this.loadTurnstileScript();
+        }
+    }
+    /**
+     * Load Cloudflare Turnstile script dynamically
+     */
+    loadTurnstileScript() {
+        // Check if already loaded
+        if (window.turnstile || document.querySelector('script[src*="turnstile"]')) {
+            return;
+        }
+        const script = document.createElement('script');
+        script.src = 'https://challenges.cloudflare.com/turnstile/v0/api.js';
+        script.async = true;
+        script.defer = true;
+        document.head.appendChild(script);
     }
     /**
      * Create the feedback button
@@ -27,26 +45,23 @@ class FeedbackWidget {
         // Button orientation
         const orientation = this.config.orientation || 'horizontal';
         button.classList.add(`triagly-orientation-${orientation}`);
+        // Speech bubble SVG icon
+        const speechBubbleIcon = `<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="currentColor" class="triagly-icon"><path d="M20 2H4c-1.1 0-2 .9-2 2v18l4-4h14c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2z"/></svg>`;
+        const largeIcon = `<svg xmlns="http://www.w3.org/2000/svg" width="28" height="28" viewBox="0 0 24 24" fill="currentColor" class="triagly-icon"><path d="M20 2H4c-1.1 0-2 .9-2 2v18l4-4h14c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2z"/></svg>`;
         // Handle button text based on shape
-        const fullText = this.config.buttonText || '🐛 Feedback';
+        const fullText = this.config.buttonText || 'Feedback';
         if (shape === 'circular') {
-            button.innerHTML = '🐛';
+            button.innerHTML = largeIcon;
             button.setAttribute('aria-label', fullText);
         }
         else if (shape === 'expandable') {
-            // Expandable starts with emoji, expands to full text on hover
-            button.innerHTML = '<span class="triagly-btn-icon">🐛</span><span class="triagly-btn-text"> Feedback</span>';
+            // Expandable starts with icon, expands to full text on hover
+            button.innerHTML = `<span class="triagly-btn-icon">${largeIcon}</span><span class="triagly-btn-text"> ${this.config.buttonText || 'Feedback'}</span>`;
             button.setAttribute('aria-label', fullText);
-            // Store custom text if provided
-            if (this.config.buttonText) {
-                const textSpan = button.querySelector('.triagly-btn-text');
-                if (textSpan) {
-                    textSpan.textContent = ' ' + this.config.buttonText.replace('🐛', '').trim();
-                }
-            }
         }
         else {
-            button.innerHTML = fullText;
+            // Default: icon + text
+            button.innerHTML = `${speechBubbleIcon}<span class="triagly-btn-label">${fullText}</span>`;
         }
         button.onclick = () => this.toggle();
         // Position button
@@ -112,9 +127,9 @@ class FeedbackWidget {
             this.setupKeyboardEvents();
             // Set up focus trap
             this.setupFocusTrap();
-            // Focus on title field
-            const titleInput = this.container?.querySelector('input[type="text"]');
-            titleInput?.focus();
+            // Focus on description field
+            const descInput = this.container?.querySelector('#triagly-description');
+            descInput?.focus();
         }, 0);
     }
     /**
@@ -159,7 +174,7 @@ class FeedbackWidget {
         overlay.className = 'triagly-overlay';
         overlay.setAttribute('role', 'dialog');
         overlay.setAttribute('aria-modal', 'true');
-        overlay.setAttribute('aria-labelledby', 'triagly-modal-title');
+        overlay.setAttribute('aria-label', 'Send feedback');
         overlay.onclick = (e) => {
             if (e.target === overlay)
                 this.close('overlay');
@@ -170,7 +185,6 @@ class FeedbackWidget {
         const header = document.createElement('div');
         header.className = 'triagly-header';
         header.innerHTML = `
-      <h3 id="triagly-modal-title">Send Feedback</h3>
       <button type="button" class="triagly-close" aria-label="Close feedback form">×</button>
     `;
         const closeBtn = header.querySelector('.triagly-close');
@@ -179,16 +193,7 @@ class FeedbackWidget {
         form.className = 'triagly-form';
         form.innerHTML = `
       <div class="triagly-field">
-        <label for="triagly-title">Title (optional)</label>
-        <input
-          type="text"
-          id="triagly-title"
-          placeholder="Brief summary of your feedback"
-        />
-      </div>
-
-      <div class="triagly-field">
-        <label for="triagly-description">Description *</label>
+        <label for="triagly-description">What's on your mind?</label>
         <textarea
           id="triagly-description"
           required
@@ -197,6 +202,15 @@ class FeedbackWidget {
         ></textarea>
       </div>
 
+      <div class="triagly-field">
+        <label for="triagly-name">Name (optional)</label>
+        <input
+          type="text"
+          id="triagly-name"
+          placeholder="Your name"
+        />
+      </div>
+
       <div class="triagly-field">
         <label for="triagly-email">Email (optional)</label>
         <input
@@ -206,13 +220,6 @@ class FeedbackWidget {
         />
       </div>
 
-      <div class="triagly-field triagly-checkbox">
-        <label>
-          <input type="checkbox" id="triagly-screenshot" checked />
-          <span>Include screenshot</span>
-        </label>
-      </div>
-
       ${this.config.turnstileSiteKey ? `
       <div class="triagly-field triagly-turnstile">
         <div class="cf-turnstile" data-sitekey="${this.config.turnstileSiteKey}" data-theme="light"></div>
@@ -236,8 +243,16 @@ class FeedbackWidget {
             e.preventDefault();
             this.handleSubmit(form);
         };
+        const footer = document.createElement('div');
+        footer.className = 'triagly-footer';
+        footer.innerHTML = `
+      <a href="https://triagly.com" target="_blank" rel="noopener noreferrer" class="triagly-branding">
+        Powered by <strong>Triagly</strong>
+      </a>
+    `;
         modal.appendChild(header);
         modal.appendChild(form);
+        modal.appendChild(footer);
         overlay.appendChild(modal);
         // Render Turnstile widget if available
         if (this.config.turnstileSiteKey) {
@@ -286,10 +301,9 @@ class FeedbackWidget {
      * Handle form submission
      */
     async handleSubmit(form) {
-        const titleInput = form.querySelector('#triagly-title');
         const descInput = form.querySelector('#triagly-description');
+        const nameInput = form.querySelector('#triagly-name');
         const emailInput = form.querySelector('#triagly-email');
-        const screenshotCheckbox = form.querySelector('#triagly-screenshot');
         const statusDiv = form.querySelector('#triagly-status');
         const submitBtn = form.querySelector('button[type="submit"]');
         const turnstileContainer = form.querySelector('.cf-turnstile');
@@ -303,10 +317,9 @@ class FeedbackWidget {
                 turnstileToken = turnstileContainer.getAttribute('data-turnstile-response') || undefined;
             }
             const data = {
-                title: titleInput.value.trim() || undefined,
                 description: descInput.value.trim(),
+                reporterName: nameInput.value.trim() || undefined,
                 reporterEmail: emailInput.value.trim() || undefined,
-                includeScreenshot: screenshotCheckbox.checked,
                 turnstileToken,
             };
             // Create a promise that waits for actual submission result
@@ -370,21 +383,32 @@ class FeedbackWidget {
         position: fixed;
         z-index: 999999;
         padding: 12px 20px;
-        background: var(--triagly-button-bg, #6366f1);
+        background: var(--triagly-button-bg, #18181b);
         color: var(--triagly-button-text, #ffffff);
         border: none;
         border-radius: var(--triagly-button-radius, 8px);
         font-size: 14px;
         font-weight: 500;
         cursor: pointer;
-        box-shadow: var(--triagly-button-shadow, 0 4px 12px rgba(99, 102, 241, 0.3));
+        box-shadow: var(--triagly-button-shadow, 0 4px 12px rgba(0, 0, 0, 0.15));
         transition: all 0.2s;
+        display: inline-flex;
+        align-items: center;
+        gap: 8px;
       }
 
       .triagly-button:hover {
-        background: var(--triagly-button-bg-hover, #4f46e5);
+        background: var(--triagly-button-bg-hover, #27272a);
         transform: translateY(-2px);
-        box-shadow: var(--triagly-button-shadow-hover, 0 6px 16px rgba(99, 102, 241, 0.4));
+        box-shadow: var(--triagly-button-shadow-hover, 0 6px 16px rgba(0, 0, 0, 0.2));
+      }
+
+      .triagly-button .triagly-icon {
+        flex-shrink: 0;
+      }
+
+      .triagly-button .triagly-btn-label {
+        line-height: 1;
       }
 
       /* Prevent expandable buttons from shifting on hover */
@@ -478,8 +502,8 @@ class FeedbackWidget {
         min-width: auto;
         padding: 12px 20px;
         border-radius: 30px;
-        background: var(--triagly-button-bg-hover, #4f46e5);
-        box-shadow: var(--triagly-button-shadow-hover, 0 6px 16px rgba(99, 102, 241, 0.4));
+        background: var(--triagly-button-bg-hover, #27272a);
+        box-shadow: var(--triagly-button-shadow-hover, 0 6px 16px rgba(0, 0, 0, 0.2));
       }
       .triagly-shape-expandable:hover .triagly-btn-text {
         width: auto;
@@ -538,18 +562,10 @@ class FeedbackWidget {
 
       .triagly-header {
         display: flex;
-        justify-content: space-between;
+        justify-content: flex-end;
         align-items: center;
-        padding: 20px 24px;
+        padding: 8px 12px 0;
         background: var(--triagly-header-bg, #ffffff);
-        border-bottom: 1px solid var(--triagly-header-border, #e5e7eb);
-      }
-
-      .triagly-header h3 {
-        margin: 0;
-        font-size: 18px;
-        font-weight: 600;
-        color: var(--triagly-header-text, #111827);
       }
 
       .triagly-close {
@@ -607,46 +623,21 @@ class FeedbackWidget {
       .triagly-field input:focus,
       .triagly-field textarea:focus {
         outline: none;
-        border-color: var(--triagly-input-border-focus, #6366f1);
-        box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1);
-      }
-
-      .triagly-checkbox label {
-        display: flex;
-        align-items: center;
-        gap: 8px;
-        cursor: pointer;
-        font-weight: 400;
-      }
-
-      .triagly-checkbox label span {
-        user-select: none;
-      }
-
-      .triagly-checkbox input {
-        width: 16px;
-        height: 16px;
-        margin: 0;
-        cursor: pointer;
+        border-color: var(--triagly-input-border-focus, #a1a1aa);
+        box-shadow: 0 0 0 2px rgba(161, 161, 170, 0.15);
       }
 
       /* Focus visible styles for accessibility */
       .triagly-button:focus-visible,
       .triagly-field input:focus-visible,
       .triagly-field textarea:focus-visible,
-      .triagly-checkbox input:focus-visible,
       .triagly-btn-primary:focus-visible,
       .triagly-btn-secondary:focus-visible,
       .triagly-close:focus-visible {
-        outline: 2px solid #6366f1;
+        outline: 2px solid #a1a1aa;
         outline-offset: 2px;
       }
 
-      /* Checkbox label gets visual indicator when checkbox is focused */
-      .triagly-checkbox input:focus-visible + span {
-        text-decoration: underline;
-      }
-
       .triagly-turnstile {
         display: flex;
         justify-content: center;
@@ -672,12 +663,12 @@ class FeedbackWidget {
       }
 
       .triagly-btn-primary {
-        background: var(--triagly-btn-primary-bg, #6366f1);
+        background: var(--triagly-btn-primary-bg, #18181b);
         color: var(--triagly-btn-primary-text, #ffffff);
       }
 
       .triagly-btn-primary:hover:not(:disabled) {
-        background: var(--triagly-btn-primary-bg-hover, #4f46e5);
+        background: var(--triagly-btn-primary-bg-hover, #27272a);
       }
 
       .triagly-btn-primary:disabled {
@@ -713,6 +704,29 @@ class FeedbackWidget {
         background: var(--triagly-error-bg, #fee2e2);
         color: var(--triagly-error-text, #991b1b);
       }
+
+      .triagly-footer {
+        padding: 12px 24px 16px;
+        text-align: right;
+        border-top: 1px solid var(--triagly-footer-border, #e5e7eb);
+        background: var(--triagly-footer-bg, #f9fafb);
+        border-radius: 0 0 var(--triagly-modal-radius, 12px) var(--triagly-modal-radius, 12px);
+      }
+
+      .triagly-branding {
+        font-size: 12px;
+        color: var(--triagly-footer-text, #6b7280);
+        text-decoration: none;
+        transition: color 0.2s;
+      }
+
+      .triagly-branding:hover {
+        color: var(--triagly-footer-text-hover, #18181b);
+      }
+
+      .triagly-branding strong {
+        font-weight: 600;
+      }
     `;
         document.head.appendChild(style);
     }
@@ -878,7 +892,6 @@ class TriaglyAPI {
                 consoleLogs: data.consoleLogs,
             },
             tags: data.tags,
-            screenshot: data.screenshot,
             reporterEmail: data.reporterEmail,
             reporterName: data.reporterName,
             turnstileToken,
@@ -965,34 +978,6 @@ function detectBrowser() {
     }
     return browser;
 }
-/**
- * Capture screenshot of current page
- */
-async function captureScreenshot() {
-    try {
-        // Use html2canvas library if available
-        if (typeof window.html2canvas !== 'undefined') {
-            const canvas = await window.html2canvas(document.body, {
-                logging: false,
-                useCORS: true,
-                allowTaint: true,
-            });
-            return canvas.toDataURL('image/png');
-        }
-        // Fallback to native screenshot API if supported (limited browser support)
-        if ('mediaDevices' in navigator && 'getDisplayMedia' in navigator.mediaDevices) {
-            // This requires user interaction and shows a permission dialog
-            // Not ideal for automatic screenshots
-            console.warn('Screenshot capture requires html2canvas library');
-            return null;
-        }
-        return null;
-    }
-    catch (error) {
-        console.error('Screenshot capture failed:', error);
-        return null;
-    }
-}
 /**
  * Simple rate limiter using localStorage
  */
@@ -1213,7 +1198,7 @@ class Triagly {
             theme: 'auto',
             position: 'bottom-right',
             buttonShape: 'rounded',
-            buttonText: '🐛 Feedback',
+            buttonText: 'Feedback',
             placeholderText: 'Describe what happened...',
             successMessage: 'Feedback sent successfully!',
             errorMessage: 'Failed to send feedback. Please try again.',
@@ -1268,17 +1253,11 @@ class Triagly {
             }
             // Collect metadata
             const metadata = collectMetadata(this.config.metadata);
-            // Capture screenshot if requested
-            let screenshot = null;
-            if (data.includeScreenshot) {
-                screenshot = await captureScreenshot();
-            }
             // Prepare feedback data
             const feedbackData = {
                 title: data.title,
                 description: data.description,
                 reporterEmail: data.reporterEmail,
-                screenshot: screenshot || undefined,
                 consoleLogs: this.consoleLogger?.getLogs(),
             };
             // Submit to API with Turnstile token if provided