Advanced

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'
  locale: 'auto' // Language: 'auto' or specific locale code
});

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();
};

locale

Type: 'auto' | string Default: 'auto'

Sets the widget’s display language. The widget supports multiple languages and will load translations on demand.

• 'auto' - Automatically detects language based on:
  1. Your workspace’s public language setting (if configured in the dashboard)
  2. The user’s browser language preference
• Specific locale code - Forces a particular language

Supported languages:

// Force French language
window.uj.init('YOUR_PROJECT_ID', {
  widget: true,
  locale: 'fr-FR'
});

// Auto-detect (default behavior)
window.uj.init('YOUR_PROJECT_ID', {
  widget: true,
  locale: 'auto'
});

If a requested locale is not supported, the widget falls back to English.

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' });
});

Localized widget

// Spanish widget for Latin American users
window.uj.init('YOUR_PROJECT_ID', {
  widget: true,
  locale: 'es-ES'
});

// Detect language from user's app settings
const userLocale = getUserLocale(); // Your app's locale

window.uj.init('YOUR_PROJECT_ID', {
  widget: true,
  locale: userLocale // e.g., 'de-DE', 'fr-FR', etc.
});