nylas-feedback-form

The nylas-feedback-form element displays the feedback form card.

PreviewCode

import { NylasFeedbackForm } from '@nylas/react';

export default function NylasFeedbackFormExample() {
return (
<div className="inline-block border border-dashed border-gray-300 min-w-[400px] rounded-md p-4 justify-center">
  <NylasFeedbackForm />
</div>
);
}

Standalone properties

The following props are automatically configured when used within NylasScheduling. Set these props manually only if you’re using the component independently.

themeConfig?

Name	themeConfig
Description	The theme configuration.
Type	any

Events

Event	Description
feedbackModalClosed	Feedback modal close event.
feedbackSubmitted	Feedback submitted event.
triggerValidation	An internal event that is used to trigger validation on the form.

CSS parts

Part	Description
nfbf	The feedback form card host.
nfbf__button-outline	The close button CTA.
nfbf__cancel-cta	The cancel button CTA.
nfbf__card	The feedback form card.
nfbf__close-button
nfbf__description	The description of the feedback form card.
nfbf__reschedule-cta	The reschedule button CTA.
nfbf__title	The title of the feedback form card.
nfbfc__card

Code samples

The nylas-feedback-form element is automatically included in the main NylasScheduling component. The following code samples show how to use the element on its own.

StandaloneEvent handlersCustom theme

<nylas-feedback-form
  booking-id="booking-123"
  is-visible="true"
  on-feedback-submitted="handleFeedbackSubmitted"
  on-feedback-form-closed="handleFeedbackFormClosed">
</nylas-feedback-form>

// Listen for feedback submission
element.addEventListener('feedbackSubmitted', (event) => {
  const { rating, comment, bookingId } = event.detail;
  console.log('Feedback submitted:', { rating, comment, bookingId });

  // Send feedback to your backend
  submitFeedback(rating, comment, bookingId);
});

// Listen for form closure
element.addEventListener('feedbackFormClosed', (event) => {
  console.log('Feedback form closed');
  // Hide the form or navigate away
});

<nylas-feedback-form
  booking-id="booking-123"
  is-visible="true"
  theme-config='{
    "--nylas-primary": "#007bff",
    "--nylas-base-100": "#ffffff",
    "--nylas-border-radius": "8px"
  }'>
</nylas-feedback-form>