Configure the UserJot Widget

Customize the widget’s appearance and behavior to match your brand and user experience.

Configuration options

All configuration happens during initialization:

window.uj.init('YOUR_PROJECT_ID', {
  widget: true, // Enable the widget (required)
  position: 'right', // Position: 'left' or 'right'
  theme: 'auto', // Theme: 'auto', 'light', or 'dark'
  trigger: 'default' // Trigger: 'default' or 'custom'
});

Options explained

widget

Type: boolean
Default: false

Enables the widget on your website. Must be set to true for the widget to appear.

window.uj.init('YOUR_PROJECT_ID', {
  widget: true
});

position

Type: 'left' | 'right'
Default: 'right'

Controls which side of the screen the widget appears on.

// Widget appears on the left side
window.uj.init('YOUR_PROJECT_ID', {
  widget: true,
  position: 'left'
});

theme

Type: 'auto' | 'light' | 'dark'
Default: 'auto'

Sets the widget’s color scheme.

• 'auto' - Follows the user’s system preference
• 'light' - Always use light theme
• 'dark' - Always use dark theme

// Force dark theme
window.uj.init('YOUR_PROJECT_ID', {
  widget: true,
  theme: 'dark'
});

trigger

Type: 'default' | 'custom'
Default: 'default'

Controls how users open the widget.

• 'default' - Shows the floating feedback button
• 'custom' - Hides the default button, use your own

// Use custom trigger buttons
window.uj.init('YOUR_PROJECT_ID', {
  widget: true,
  trigger: 'custom'
});

// Then open with your own button
document.getElementById('feedback-btn').onclick = () => {
  window.uj.showWidget();
};

Dynamic configuration

You can change some settings after initialization:

Change position

window.uj.setWidgetPosition('left');

Change theme

window.uj.setTheme('dark');

Enable/disable widget

// Temporarily disable
window.uj.setWidgetEnabled(false);

// Re-enable
window.uj.setWidgetEnabled(true);

Examples

Minimal setup

window.uj.init('YOUR_PROJECT_ID', {
  widget: true
});

Left-aligned with dark theme

window.uj.init('YOUR_PROJECT_ID', {
  widget: true,
  position: 'left',
  theme: 'dark'
});

Custom trigger button

window.uj.init('YOUR_PROJECT_ID', {
  widget: true,
  trigger: 'custom'
});

// Use your own button
document.querySelector('.my-feedback-button').addEventListener('click', () => {
  window.uj.showWidget({ section: 'feedback' });
});