Events

Listen for submission events to update your page or run your own client-side handler.

Info

This feature is available on the Professional and Unlimited plans.

Events overview

The feedback widget emits the following events:

• feedbackSent: Emitted when feedback is successfully submitted. See Feedback event object format for the payload shape.
• feedbackError: Emitted if there is an error during feedback submission.

How to listen for events

Add listeners to document to capture events from any widget on the page. These examples assume the widget is installed.

JavaScript

document.addEventListener('DOMContentLoaded', () => {
  document.addEventListener('feedbackSent', (event) => {
    const feedback = event.detail.feedback;
    console.log('Feedback submitted:', feedback);
  });

  document.addEventListener('feedbackError', (event) => {
    const error = event.detail.error;
    console.error('Feedback submission error:', error);
  });
});

React

import React, { useEffect } from 'react';

const FeedbackListener = () => {
  useEffect(() => {
    const handleFeedbackSent = (event) => {
      const feedback = event.detail.feedback;
      console.log('Feedback submitted:', feedback);
    };

    const handleFeedbackError = (event) => {
      const error = event.detail.error;
      console.error('Feedback submission error:', error);
    };

    document.addEventListener('feedbackSent', handleFeedbackSent);
    document.addEventListener('feedbackError', handleFeedbackError);

    return () => {
      document.removeEventListener('feedbackSent', handleFeedbackSent);
      document.removeEventListener('feedbackError', handleFeedbackError);
    };
  }, []);

  return null;
};

export default FeedbackListener;

Feedback event object format

The feedbackSent event includes a detail object whose feedback property has the following structure:

interface FeedbackSentDetail {
  feedback: {
    id: string; // ID returned by the API
    url: string; // Page where feedback was submitted
    message: string; // Empty for rating-only submissions
    project: string; // Project identifier
    rating: number; // Rating, or -1 if no rating was selected
    ratingMode: string; // Rating mode
    session: string; // Session ID from localStorage
    metadata?: string; // Metadata supplied to the widget
    email?: string; // Included by the modal form
    screenshot?: string | null; // Screenshot data, when attached
    verification?: string; // Modal form verification field
    recaptchaToken?: string; // Included when reCAPTCHA is enabled
  };
}

Rating-only submissions from <feedback-button submit="true"> omit the modal form fields.

The feedbackError event also includes a detail object with the following structure:

interface FeedbackErrorDetail {
  error: {
    status: number; // HTTP status, or 500 for client errors
    message: string | Error; // Server response text or client error
  };
}