Guides
30 December 2025
Bug Reporter Installation
Sanjay
Adding the Bug Reporter widget to your website
Add the following code to your website inside the head tag:
1<script src="https://unpkg.com/saasbox-bug-reporter@1.0.11/dist/bug-reporter.min.js"></script>
2
3 <script>
4 BugReporter.init({
5 apiEndpoint: "https://saasbox.app/api/bug-reports",
6 saasBoxKey: "YOUR_KEY_HERE",
7 saasBoxSecret: "YOUR_SECRET_HERE",
8 // Screenshot capture mode
9 screenshotMode: "selection", // 'selection' with native screen capture for accurate cropping
10
11 // Trigger button customization
12 position: "bottom-left",
13 offsetX: 30,
14 offsetY: 30,
15 buttonSize: 55,
16 buttonShape: "rounded", // 'circle', 'rounded', 'square'
17 buttonIcon: "🐛",
18 buttonColor: "linear-gradient(135deg, #667eea 0%, #764ba2 100%)",
19 buttonShadow: "0 6px 20px rgba(102, 126, 234, 0.4)",
20
21 // Modal customization
22 modalTitle: "Report a Bug",
23 modalHeaderColor: "linear-gradient(135deg, #667eea 0%, #764ba2 100%)", // linear-gradient(135deg, #667eea 0%, #764ba2 100%)
24 modalHeaderTextColor: "#ffffff",
25 modalPrimaryColor: "#667eea",
26 modalDescriptionLabel: "Describe the issue",
27 modalDescriptionPlaceholder: "Please tell us what went wrong...",
28 modalSubmitText: "Submit",
29 modalCancelText: "Cancel",
30 });
31 </script>You can get the SAASBOXKEY and SAASBOX_SECRET from here.
If you are using a framework like NextJS, you can also add the widget like shown below:
1"use client";
2
3import Script from "next/script";
4
5declare global {
6 interface Window {
7 BugReporter?: {
8 init: (config: {
9 apiEndpoint: string;
10 saasBoxKey: string;
11 saasBoxSecret: string;
12 screenshotMode?: string;
13 position?: string;
14 offsetX?: number;
15 offsetY?: number;
16 buttonSize?: number;
17 buttonShape?: string;
18 buttonIcon?: string;
19 buttonColor?: string;
20 buttonShadow?: string;
21 modalTitle?: string;
22 modalHeaderColor?: string;
23 modalHeaderTextColor?: string;
24 modalPrimaryColor?: string;
25 modalDescriptionLabel?: string;
26 modalDescriptionPlaceholder?: string;
27 modalSubmitText?: string;
28 modalCancelText?: string;
29 }) => void;
30 };
31 }
32}
33
34export function BugReporter() {
35 return (
36 <Script
37 src="https://unpkg.com/saasbox-bug-reporter@1.0.11/dist/bug-reporter.min.js"
38 strategy="afterInteractive"
39 onLoad={() => {
40 if (typeof window !== "undefined" && window.BugReporter) {
41 const isMobile = window.innerWidth <= 768;
42 if (isMobile) return;
43
44 window.BugReporter.init({
45 apiEndpoint: `${process.env.NEXT_PUBLIC_SITE_URL}/api/bug-reports`,
46 saasBoxKey: `${process.env.NEXT_PUBLIC_SAASBOX_CREDENTIAL_KEY}`,
47 saasBoxSecret: `${process.env.NEXT_PUBLIC_SAASBOX_CREDENTIAL_SECRET}`,
48 screenshotMode: "selection",
49 position: "bottom-left",
50 offsetX: 15,
51 offsetY: 15,
52 buttonSize: 55,
53 buttonShape: "rounded",
54 buttonIcon: "🐞",
55 buttonColor: "#FDACAC",
56 buttonShadow: "0 6px 20px #FD7979",
57 modalTitle: "Report a Bug",
58 modalHeaderColor: "#FD7979",
59 modalHeaderTextColor: "#f3f4f6",
60 modalPrimaryColor: "#FD7979",
61 modalDescriptionLabel: "Describe the issue",
62 modalDescriptionPlaceholder: "Please tell us what went wrong...",
63 modalSubmitText: "Submit",
64 modalCancelText: "Cancel",
65 });
66 }
67 }}
68 />
69 );
70}
71CDN Options
You can use any of these CDN's.
- https://unpkg.com/saasbox-bug-reporter@1.0.11/dist/bug-reporter.min.js
- https://cdn.jsdelivr.net/npm/saasbox-bug-reporter@1.0.11/dist/bug-reporter.min.js
Customization Options
1BugReporter.init({
2 // Required
3 apiEndpoint: 'https://saasbox.app/api/bug-reporter',
4 saasBoxKey: 'your-saasbox-key',
5 saasBoxSecret: 'your-saasbox-secret',
6
7 // Screenshot Capture Mode
8 screenshotMode: 'selection', // 'selection' (area selection) or 'full' (full viewport)
9
10 // Trigger Button Customization
11 position: 'bottom-right', // 'top-left', 'top-right', 'bottom-left', 'bottom-right'
12 offsetX: 20, // Distance from horizontal edge (pixels)
13 offsetY: 20, // Distance from vertical edge (pixels)
14 buttonSize: 60, // Button size in pixels
15 buttonShape: 'circle', // 'circle', 'rounded' (12px radius), 'square' (4px radius)
16 buttonIcon: '🐛', // Any text, emoji, or HTML
17 buttonColor: 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)',
18 buttonShadow: '0 4px 12px rgba(0, 0, 0, 0.15)',
19 buttonIconColor: '#ffffff', // Icon/text color
20
21 // Modal Customization
22 modalTitle: 'Report a Bug',
23 modalHeaderColor: 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)',
24 modalHeaderTextColor: '#ffffff',
25 modalBodyColor: '#ffffff',
26 modalBodyTextColor: '#333333',
27 modalPrimaryColor: '#667eea', // Used for focus states and accents
28 modalDescriptionLabel: 'Describe the issue',
29 modalDescriptionPlaceholder: 'Please describe what went wrong...',
30 modalDescriptionTextColor: '#333333',
31 modalDescriptionPlaceholderColor: '#999999',
32 modalSubmitText: 'Submit Report',
33 modalCancelText: 'Cancel',
34 modalSubmitButtonColor: '#ffffff',
35 modalCancelButtonColor: '#6c757d',
36
37 // Advanced Color Customization
38 buttonShadowHover: '0 6px 16px rgba(0, 0, 0, 0.2)',
39 modalBorderColor: '#e1e5e9',
40 modalDisabledButtonColor: '#cccccc',
41 modalCancelButtonBackground: 'transparent',
42 messageBackgroundColor: '#f8f9fa',
43 messageTextColor: '#333',
44 messageBorderColor: '#dee2e6',
45 messageInfoBackground: '#d1ecf1',
46 messageInfoText: '#0c5460',
47 messageInfoBorder: '#bee5eb',
48 messageErrorBackground: '#f8d7da',
49 messageErrorText: '#721c24',
50 messageErrorBorder: '#f5c6cb',
51 messageSuccessBackground: '#d4edda',
52 messageSuccessText: '#155724',
53 messageSuccessBorder: '#c3e6cb',
54 selectionOverlayColor: 'rgba(0, 0, 0, 0.7)',
55 selectionBorderColor: '#667eea',
56 selectionInfoBackground: 'rgba(0, 0, 0, 0.8)',
57 selectionInfoText: 'white',
58 overlayColor: 'rgba(0, 0, 0, 0.5)',
59 toolbarBackgroundColor: '#667eea',
60 toolbarButtonBackground: 'rgba(255, 255, 255, 0.2)',
61 toolbarButtonColor: 'white',
62 toolbarButtonHoverBackground: 'rgba(255, 255, 255, 0.3)',
63 toolbarButtonActiveBackground: 'rgba(255, 255, 255, 0.4)',
64 toolbarButtonDisabledBackground: 'rgba(255, 255, 255, 0.1)',
65 toolbarButtonActiveShadow: '0 2px 8px rgba(0, 0, 0, 0.2)',
66 colorButtonBackground: '#ef4444',
67 colorButtonBorder: 'rgba(255, 255, 255, 0.3)',
68 colorButtonHoverBorder: 'rgba(255, 255, 255, 0.6)',
69 colorButtonActiveBorder: '#ffffff',
70 colorButtonActiveShadow: '0 0 0 2px rgba(255, 255, 255, 0.5)',
71 textAnnotationBackground: 'rgba(255, 255, 255, 0.8)',
72 textAnnotationColor: '#ef4444',
73 textAnnotationBorder: 'transparent'
74});Theming Examples
Support Widget Theme
1BugReporter.init({
2 apiEndpoint: 'https://saasbox.app/api/bug-reporter',
3 saasBoxKey: 'your-saasbox-key',
4 saasBoxSecret: 'your-saasbox-secret',
5 screenshotMode: 'full',
6 buttonIcon: '💬',
7 buttonColor: '#4CAF50',
8 modalTitle: 'Contact Support',
9 modalHeaderColor: '#4CAF50',
10 modalPrimaryColor: '#4CAF50',
11 modalSubmitText: 'Send Message'
12});Feedback Widget Theme
1BugReporter.init({
2 apiEndpoint: 'https://saasbox.app/api/bug-reporter',
3 saasBoxKey: 'your-saasbox-key',
4 saasBoxSecret: 'your-saasbox-secret',
5 screenshotMode: 'selection',
6 buttonIcon: '📝',
7 buttonColor: '#FF9800',
8 buttonShape: 'rounded',
9 position: 'bottom-left',
10 modalTitle: 'Share Feedback',
11 modalHeaderColor: '#FF9800',
12 modalPrimaryColor: '#FF9800',
13 modalDescriptionLabel: 'Your feedback',
14 modalDescriptionPlaceholder: 'Tell us what you think...',
15 modalSubmitText: 'Send Feedback'
16});Custom Brand Colors
1BugReporter.init({
2 apiEndpoint: 'https://saasbox.app/api/bug-reporter',
3 saasBoxKey: 'your-saasbox-key',
4 saasBoxSecret: 'your-saasbox-secret',
5 screenshotMode: 'selection',
6 buttonColor: 'linear-gradient(135deg, #f093fb 0%, #f5576c 100%)',
7 buttonShadow: '0 6px 20px rgba(245, 87, 108, 0.4)',
8 modalHeaderColor: 'linear-gradient(135deg, #f093fb 0%, #f5576c 100%)',
9 modalPrimaryColor: '#f5576c',
10 offsetX: 30,
11 offsetY: 30,
12 buttonSize: 70,
13 toolbarBackgroundColor: '#f5576c',
14 selectionBorderColor: '#f5576c'
15});Dark Mode Theme
1BugReporter.init({
2 apiEndpoint: 'https://saasbox.app/api/bug-reporter',
3 saasBoxKey: 'your-saasbox-key',
4 saasBoxSecret: 'your-saasbox-secret',
5 screenshotMode: 'selection',
6 buttonColor: '#1a1a1a',
7 buttonIconColor: '#ffffff',
8 modalBodyColor: '#1a1a1a',
9 modalBodyTextColor: '#ffffff',
10 modalHeaderColor: '#333333',
11 modalPrimaryColor: '#4fc3f7',
12 modalDescriptionTextColor: '#ffffff',
13 modalDescriptionPlaceholderColor: '#999999',
14 messageBackgroundColor: '#2a2a2a',
15 messageTextColor: '#ffffff',
16 toolbarBackgroundColor: '#333333',
17 selectionOverlayColor: 'rgba(0, 0, 0, 0.8)',
18 overlayColor: 'rgba(0, 0, 0, 0.7)'
19});Minimalist Theme
1BugReporter.init({
2 apiEndpoint: 'https://saasbox.app/api/bug-reporter',
3 saasBoxKey: 'your-saasbox-key',
4 saasBoxSecret: 'your-saasbox-secret',
5 screenshotMode: 'full',
6 buttonIcon: '⚠️',
7 buttonColor: '#ffffff',
8 buttonShadow: '0 2px 8px rgba(0, 0, 0, 0.15)',
9 buttonIconColor: '#333333',
10 modalTitle: 'Report Issue',
11 modalBodyColor: '#fafafa',
12 modalHeaderColor: '#ffffff',
13 modalHeaderTextColor: '#333333',
14 modalPrimaryColor: '#333333',
15 borderColor: '#e0e0e0',
16 toolbarBackgroundColor: '#333333'
17});