FeedbackJar

Vanilla JavaScript Installation

Add FeedbackJar to any HTML website without frameworks.

Basic Installation

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

html 
<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:

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

User Identification

Identify users when they log in. For linked posts and portal login, include a server-generated HMAC — see Auto-login and User Identification.

javascript 
// After user logs in — fetch signed payload from your backend
async function onUserLogin() {
  const payload = await fetch('/api/feedbackjar-identify').then((r) => r.json());
  window.fj.identify({
    id: payload.id,
    email: payload.email,
    firstName: payload.firstName,
    lastName: payload.lastName,
    avatar: payload.avatar,
    organizationId: payload.organizationId,
    signature: payload.signature,
    timestamp: payload.timestamp,
  });
}

function onUserLogout() {
  window.fj.identify(null);
}

Custom Trigger Button

Hide the default button and create your own:

html 
<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

javascript 
// 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:

javascript 
// 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:

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

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

Enable/Disable Widget

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

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

Check Widget State

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

Cleanup

Remove widget from page:

javascript 
window.fj.destroy();