Add UserJot widget to your website

The UserJot widget allows you to embed a feedback widget directly on your website, making it easy for users to submit feedback without leaving your site.

The widget provides access to your product roadmap, changelog, and automatically notifies users about new updates, keeping them engaged and informed about your product’s progress.

Installation

Add the following script tag to your website, preferably before the closing </body> tag:

<script>window.$ujq=window.$ujq||[];window.uj=window.uj||new Proxy({},{get:(_,p)=>(...a)=>window.$ujq.push([p,...a])});document.head.appendChild(Object.assign(document.createElement('script'),{src:'https://cdn.userjot.com/sdk/v1/uj.js',async:!0}));</script>

Basic Initialization

Initialize the widget with your project ID:

window.uj.init('YOUR_PROJECT_ID');

Replace YOUR_PROJECT_ID with your actual project ID, which you can find in your UserJot dashboard.

Configuration Options

You can customize the widget during initialization:

window.uj.init('YOUR_PROJECT_ID', {
  widget: true, // Enable the floating widget button (default: false)
  position: 'right', // Widget position: 'left' or 'right' (default: 'right')
  theme: 'auto' // Theme: 'auto', 'light', or 'dark' (default: 'auto')
});

Identifying Users

For logged-in users, you can identify them to pre-fill their information. For more details on automatic login and secure authentication, see our Auto-login guide:

window.uj.identify({
  id: 'user123', // Required: unique user ID
  email: 'user@example.com', // Optional
  firstName: 'John', // Optional
  lastName: 'Doe', // Optional
  avatar: 'https://...' // Optional: URL to user's avatar
});

Widget Methods

Show/Hide Widget

// Show the widget (defaults to feedback section)
window.uj.showWidget();

// Show a specific section
window.uj.showWidget({ section: 'feedback' }); // 'feedback', 'roadmap', or 'updates'

// Hide the widget
window.uj.hideWidget();

Change Widget Position

// Move widget to the left
window.uj.setWidgetPosition('left');

// Move widget to the right
window.uj.setWidgetPosition('right');

Change Theme

// Set theme to light mode
window.uj.setTheme('light');

// Set theme to dark mode
window.uj.setTheme('dark');

// Set theme to auto (follows system preference)
window.uj.setTheme('auto');

Enable/Disable Widget

// Disable the widget temporarily
window.uj.setWidgetEnabled(false);

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

Complete Example

Here’s a complete example showing how to add UserJot to your website with user identification:

<!-- UserJot Widget -->
<script>window.$ujq=window.$ujq||[];window.uj=window.uj||new Proxy({},{get:(_,p)=>(...a)=>window.$ujq.push([p,...a])});document.head.appendChild(Object.assign(document.createElement('script'),{src:'https://cdn.userjot.com/sdk/v1/uj.js',async:!0}));</script>

<script>
  // Initialize with your project ID
  window.uj.init('YOUR_PROJECT_ID', {
    widget: true, // Enable the widget
    position: 'right',
    theme: 'auto'
  });

  // If you have a logged-in user, identify them
  // This should be called after your authentication logic
  if (userIsLoggedIn) {
    window.uj.identify({
      id: currentUser.id,
      email: currentUser.email,
      firstName: currentUser.firstName,
      lastName: currentUser.lastName
    });
  }
</script>