Vanilla JavaScript Installation

Add FeedbackJar to any HTML website without frameworks.

Basic Installation

Add this code before the closing </body> tag:

<script src="https://cdn.feedbackjar.com/sdk.js"></script>
<script>
  window.fj.init('YOUR_WIDGET_ID');
</script>

That’s it! The widget will appear automatically.

Configuration Options

Customize the widget on initialization:

<script>
  window.fj.init('YOUR_WIDGET_ID', {
    position: 'right',
    theme: 'auto',
    trigger: 'default'
  });
</script>

User Identification

Identify users when they log in:

// After user logs in
function onUserLogin(user) {
  window.fj.identify({
    id: user.id,
    email: user.email,
    firstName: user.firstName,
    lastName: user.lastName,
    avatar: user.avatarUrl
  });
}

Custom Trigger Button

Hide the default button and create your own:

<button id="feedback-btn">Send Feedback</button>

<script>
  // Initialize without default button
  window.fj.init('YOUR_WIDGET_ID', {
    trigger: 'custom'
  });

  // Trigger with custom button
  document.getElementById('feedback-btn').addEventListener('click', function() {
    window.fj.showWidget();
  });
</script>

Show/Hide Programmatically

// Show widget
window.fj.showWidget();

// Hide widget
window.fj.hideWidget();

// Show with custom message
window.fj.showWidget({
  message: 'Tell us what you think!'
});

Theme Toggle

Switch between light and dark themes:

// Auto (follows system preference)
window.fj.setTheme('auto');

// Light theme
window.fj.setTheme('light');

// Dark theme
window.fj.setTheme('dark');

Position Control

Change widget position dynamically:

// Move to left side
window.fj.setWidgetPosition('left');

// Move to right side
window.fj.setWidgetPosition('right');

// Disable widget (hides button)
window.fj.setWidgetEnabled(false);

// Enable widget
window.fj.setWidgetEnabled(true);

const state = await window.fj.getWidgetState();
console.log(state);
// { isOpen: false, section: 'feedback' }

Cleanup

Remove widget from page:

window.fj.destroy();