@triagly/sdk 0.1.2 → 1.3.0

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>
 ```
@@ -419,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

@@ -1,11 +1,12 @@
 import { FeedbackData, FeedbackMetadata, FeedbackResponse } from './types';
+export type Environment = 'production' | 'staging';
 export declare class TriaglyAPI {
     private apiUrl;
     private publishableKey;
     private getToken?;
     private turnstileSiteKey;
     private static readonly DEFAULT_TURNSTILE_SITE_KEY;
-    constructor(publishableKey: string, apiUrl?: string, getToken?: () => Promise<string>, turnstileSiteKey?: string);
+    constructor(publishableKey: string, environment?: Environment, apiUrl?: string, getToken?: () => Promise<string>, turnstileSiteKey?: string);
     /**
      * Get the Turnstile site key
      */

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;AAOjB,MAAM,MAAM,WAAW,GAAG,YAAY,GAAG,SAAS,CAAC;AAEnD,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,WAAW,GAAE,WAA0B,EACvC,MAAM,CAAC,EAAE,MAAM,EACf,QAAQ,CAAC,EAAE,MAAM,OAAO,CAAC,MAAM,CAAC,EAChC,gBAAgB,CAAC,EAAE,MAAM;IAU3B;;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,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;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;IAyDjC;;OAEG;IACH,OAAO,CAAC,IAAI;IAkBZ;;OAEG;YACW,YAAY;IAuD1B;;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

@@ -45,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
@@ -130,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);
     }
     /**
@@ -177,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');
@@ -188,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');
@@ -197,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
@@ -215,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
@@ -224,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>
@@ -254,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) {
@@ -297,17 +294,16 @@ class FeedbackWidget {
             turnstileContainer.setAttribute('data-widget-id', widgetId);
         }
         catch (error) {
-            console.error('Triagly: Failed to render Turnstile widget:', error);
+            console.error('Triagly: Failed to render Turnstile widget:', error instanceof Error ? error.message : 'Unknown error');
         }
     }
     /**
      * 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');
@@ -321,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
@@ -388,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 */
@@ -496,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;
@@ -556,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 {
@@ -625,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;
@@ -690,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 {
@@ -731,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);
     }
@@ -818,10 +814,14 @@ class FeedbackWidget {
 }
 
 // API Client
-const DEFAULT_API_URL = 'https://bssghvinezdawvupcyci.supabase.co/functions/v1';
+const API_URLS = {
+    production: 'https://iipkklhhafrjesryscjh.supabase.co/functions/v1',
+    staging: 'https://bssghvinezdawvupcyci.supabase.co/functions/v1',
+};
 class TriaglyAPI {
-    constructor(publishableKey, apiUrl, getToken, turnstileSiteKey) {
-        this.apiUrl = (apiUrl || DEFAULT_API_URL).replace(/\/$/, ''); // Remove trailing slash
+    constructor(publishableKey, environment = 'production', apiUrl, getToken, turnstileSiteKey) {
+        // apiUrl override takes precedence, then environment-based URL
+        this.apiUrl = (apiUrl || API_URLS[environment]).replace(/\/$/, ''); // Remove trailing slash
         this.publishableKey = publishableKey;
         this.getToken = getToken;
         // Always use Triagly's Turnstile site key (can be overridden for testing)
@@ -859,7 +859,7 @@ class TriaglyAPI {
                 }
             }
             catch (error) {
-                console.warn('Failed to get Turnstile token:', error);
+                console.warn('Failed to get Turnstile token:', error instanceof Error ? error.message : 'Unknown error');
             }
         }
         return null;
@@ -883,7 +883,7 @@ class TriaglyAPI {
                 hardenedToken = await this.getToken();
             }
             catch (error) {
-                console.error('Failed to get hardened token:', error);
+                console.error('Failed to get hardened token:', error instanceof Error ? error.message : 'Unknown error');
                 throw new Error('Failed to authenticate. Please try again.');
             }
         }
@@ -896,7 +896,6 @@ class TriaglyAPI {
                 consoleLogs: data.consoleLogs,
             },
             tags: data.tags,
-            screenshot: data.screenshot,
             reporterEmail: data.reporterEmail,
             reporterName: data.reporterName,
             turnstileToken,
@@ -983,34 +982,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
  */
@@ -1063,7 +1034,7 @@ class RateLimiter {
             localStorage.setItem(this.key, JSON.stringify(data));
         }
         catch (error) {
-            console.error('Failed to store rate limit data:', error);
+            console.error('Failed to store rate limit data:', error instanceof Error ? error.message : 'Unknown error');
         }
     }
 }
@@ -1168,7 +1139,7 @@ class ConsoleLogger {
         }
         catch (error) {
             // Don't let logging break the app
-            this.originalConsole.error('Failed to capture log:', error);
+            this.originalConsole.error('Failed to capture log:', error instanceof Error ? error.message : 'Unknown error');
         }
     }
     /**
@@ -1231,7 +1202,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.',
@@ -1242,7 +1213,7 @@ class Triagly {
             apiKey,
             publishableKey: apiKey, // Keep for backward compatibility
         };
-        this.api = new TriaglyAPI(apiKey, this.config.apiUrl, this.config.getToken, this.config.turnstileSiteKey);
+        this.api = new TriaglyAPI(apiKey, this.config.environment || 'production', this.config.apiUrl, this.config.getToken, this.config.turnstileSiteKey);
         // Always pass Turnstile site key to widget (from API which has default)
         this.config.turnstileSiteKey = this.api.getTurnstileSiteKey();
         this.widget = new FeedbackWidget(this.config);
@@ -1286,17 +1257,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
@@ -1311,10 +1276,9 @@ class Triagly {
             if (this.config.onSuccess) {
                 this.config.onSuccess(response.id);
             }
-            console.log('Feedback submitted successfully:', response.id);
         }
         catch (error) {
-            console.error('Failed to submit feedback:', error);
+            console.error('Failed to submit feedback:', error instanceof Error ? error.message : 'Unknown error');
             // Dispatch error event for UI layer
             document.dispatchEvent(new CustomEvent('triagly:error', {
                 detail: error