Widget Configuration

Customize the appearance and behavior of the BugPin widget.

Configuration Methods

Widget settings can be configured in three ways (in order of priority):

1. Script data attributes - Highest priority, set in HTML
2. Admin panel - Configure in project settings
3. Default values - Built-in defaults

Position

Control where the widget button appears on the screen.

Value	Description
bottom-right	Bottom right corner (default)
bottom-left	Bottom left corner
top-right	Top right corner
top-left	Top left corner

<script
  src="https://bugs.example.com/widget.js"
  data-api-key="your-api-key"
  data-position="bottom-left"
  async
></script>

Button Appearance

Button Shape

Value	Description
rectangle	Rectangular button (default)
round	Circular button

Button Text

Set custom text to display on the button. If not set, only the icon is shown.

Button Icon

Choose from available icons or use the default bug icon. The icon is displayed alongside any button text.

Icon Customization

Option	Default	Description
buttonIconSize	18	Icon size in pixels
buttonIconStroke	2	Icon stroke width

Theme

The widget supports light and dark modes.

Value	Description
auto	Match user's system preference (default)
light	Always use light mode
dark	Always use dark mode

<script
  src="https://bugs.example.com/widget.js"
  data-api-key="your-api-key"
  data-theme="dark"
  async
></script>

Colors

Customize colors for both light and dark modes. All colors should be valid CSS color values (hex, rgb, etc.).

Launcher Button Colors (Light Mode)

Option	Default	Description
lightButtonColor	#6366f1	Button background color
lightTextColor	#ffffff	Button text/icon color
lightButtonHoverColor	#4f46e5	Button background on hover
lightTextHoverColor	#ffffff	Text/icon color on hover

Launcher Button Colors (Dark Mode)

Option	Default	Description
darkButtonColor	#818cf8	Button background color
darkTextColor	#1e1b4b	Button text/icon color
darkButtonHoverColor	#a5b4fc	Button background on hover
darkTextHoverColor	#1e1b4b	Text/icon color on hover

Dialog Colors

The dialog (popup) has separate color settings for its buttons:

Light Mode Dialog:

Option	Default	Description
dialogLightButtonColor	#ebebeb	Dialog button background
dialogLightTextColor	#575757	Dialog button text
dialogLightButtonHoverColor	#ebebeb	Dialog button hover background
dialogLightTextHoverColor	#575757	Dialog button hover text

Dark Mode Dialog:

Option	Default	Description
dialogDarkButtonColor	#3c3c3c	Dialog button background
dialogDarkTextColor	#c3c3c3	Dialog button text
dialogDarkButtonHoverColor	#3c3c3c	Dialog button hover background
dialogDarkTextHoverColor	#c3c3c3	Dialog button hover text

Tooltip

Show a tooltip when users hover over the widget button.

Option	Default	Description
tooltipEnabled	false	Show tooltip on hover
tooltipText	null	Custom tooltip text

Hover Effects

Option	Default	Description
enableHoverScaleEffect	true	Scale button slightly on hover

Feature Toggles

Enable or disable specific widget features.

Option	Default	Description
enableScreenshot	true	Allow screenshot capture
enableAnnotation	true	Allow screenshot annotation
enableConsoleCapture	true	Capture browser console logs

Screenshot Settings

Capture Method

Value	Description
visible	Capture only the visible viewport (default)
fullpage	Capture the entire scrollable page
element	Capture a specific element

Screen Capture API

Option	Default	Description
useScreenCaptureAPI	false	Use browser's Screen Capture API

The Screen Capture API provides higher quality screenshots but requires user permission.

Maximum Screenshot Size

Option	Default	Description
maxScreenshotSize	5242880	Maximum size in bytes (5MB)

Complete Configuration Example

Here's an example using programmatic initialization with all options:

BugPin.init({
  apiKey: 'your-api-key',
  serverUrl: 'https://bugs.example.com',

  // Position
  position: 'bottom-right',

  // Button appearance
  buttonText: 'Report Bug',
  buttonShape: 'rectangle',
  buttonIcon: 'bug',
  buttonIconSize: 18,
  buttonIconStroke: 2,

  // Theme
  theme: 'auto',

  // Light mode colors
  lightButtonColor: '#6366f1',
  lightTextColor: '#ffffff',
  lightButtonHoverColor: '#4f46e5',
  lightTextHoverColor: '#ffffff',

  // Dark mode colors
  darkButtonColor: '#818cf8',
  darkTextColor: '#1e1b4b',
  darkButtonHoverColor: '#a5b4fc',
  darkTextHoverColor: '#1e1b4b',

  // Tooltip
  tooltipEnabled: true,
  tooltipText: 'Found a bug? Click here!',

  // Effects
  enableHoverScaleEffect: true,

  // Features
  enableScreenshot: true,
  enableAnnotation: true,
  enableConsoleCapture: true,

  // Screenshot settings
  captureMethod: 'visible',
  useScreenCaptureAPI: false,
  maxScreenshotSize: 5 * 1024 * 1024
});

Admin Panel Configuration

Most settings can be configured through the BugPin admin panel:

1. Go to Projects and select your project
2. Click on Widget Settings
3. Configure appearance, colors, and features
4. Changes apply immediately to all sites using that project's API key

Settings configured via script data attributes will override admin panel settings.