Custom Triggers

Hide the default feedback button and trigger the widget with your own UI elements.

Why Custom Triggers?

Custom triggers let you:

Match your existing UI/UX
Place feedback prompts contextually
Use custom button styles
Trigger from menu items, help sections, etc.

Setup

Initialize with trigger: 'custom' to hide the default button:

window.fj.init('YOUR_WIDGET_ID', {
  trigger: 'custom'
});

Use showWidget() to open the feedback panel:

window.fj.showWidget();

Examples

Custom Button

<button id="feedback-btn" class="my-custom-button">
  Give Feedback
</button>

<script>
  window.fj.init('YOUR_WIDGET_ID', {
    trigger: 'custom'
  });

  document.getElementById('feedback-btn').addEventListener('click', () => {
    window.fj.showWidget();
  });
</script>

React Component

function FeedbackButton() {
  const handleClick = () => {
    window.fj.showWidget();
  };

  return (
    <button
      onClick={handleClick}
      className="btn btn-primary"
    >
      Share Feedback
    </button>
  );
}

<nav>
  <a href="#home">Home</a>
  <a href="#about">About</a>
  <a href="#" id="feedback-link">Feedback</a>
</nav>

<script>
  document.getElementById('feedback-link').addEventListener('click', (e) => {
    e.preventDefault();
    window.fj.showWidget();
  });
</script>

function HelpMenu() {
  const [isOpen, setIsOpen] = useState(false);

  const handleFeedback = () => {
    setIsOpen(false);
    window.fj.showWidget();
  };

  return (
    <Menu isOpen={isOpen} onClose={() => setIsOpen(false)}>
      <MenuItem onClick={handleDocs}>Documentation</MenuItem>
      <MenuItem onClick={handleSupport}>Support</MenuItem>
      <MenuItem onClick={handleFeedback}>Send Feedback</MenuItem>
    </Menu>
  );
}

Context-Specific Triggers

Trigger feedback for specific features:

function FeatureCard({ feature }) {
  const handleFeatureFeedback = () => {
    window.fj.showWidget({
      message: `Feedback about ${feature.name}: `
    });
  };

  return (
    <div className="feature-card">
      <h3>{feature.name}</h3>
      <p>{feature.description}</p>
      <button onClick={handleFeatureFeedback}>
        Feedback on this feature
      </button>
    </div>
  );
}

Pre-filling Feedback

Pass a message to pre-fill the textarea:

window.fj.showWidget({
  message: 'I found a bug in the checkout flow: '
});

Keyboard Shortcuts

Add keyboard shortcuts to trigger feedback:

document.addEventListener('keydown', (e) => {
  // Cmd/Ctrl + K
  if ((e.metaKey || e.ctrlKey) && e.key === 'k') {
    e.preventDefault();
    window.fj.showWidget();
  }
});

Conditional Triggers

Show feedback prompts based on user actions:

// After user completes action
function onActionComplete() {
  showSuccessMessage();

  // Optionally prompt for feedback
  setTimeout(() => {
    if (confirm('How was your experience?')) {
      window.fj.showWidget({
        message: 'I just completed [action]: '
      });
    }
  }, 1000);
}

Hybrid Approach

Use both default and custom triggers:

// Initialize with default button
window.fj.init('YOUR_WIDGET_ID', {
  trigger: 'default',
  position: 'right'
});

// Also trigger from custom buttons
document.querySelectorAll('.feedback-trigger').forEach(btn => {
  btn.addEventListener('click', () => {
    window.fj.showWidget();
  });
});

Programmatically close the panel:

window.fj.hideWidget();

Best Practices

Make It Discoverable

If using only custom triggers, ensure users can easily find the feedback option.

Use Clear Labels

Button text should clearly indicate it’s for feedback:

✅ “Send Feedback”, “Share Feedback”, “Give Feedback”
❌ “Click Here”, “Submit”, “Talk to Us”

Context Matters

Place feedback prompts where they make sense contextually (e.g., after completing a flow, in help sections).

Don’t Overwhelm

Avoid showing too many feedback prompts. Be thoughtful about when and where you ask.