Controlling widgets

Every widget can hide its own trigger and be opened from your button — from any component, not just inside the widget.

Prop	Type	Description
`FeedbackWidget`	`useFeedback() · feedbackController`	`hideTriggerButton`
`FeedbackModal`	`useFeedbackModal() · feedbackModalController`	`hideTriggerButton`
`ReferralWidget`	`useReferralPopup() · referralController`	`hideTriggerButton` or `renderTrigger`
`Ratings`	`useRating() · ratingController`	The button is its own `<RatingTrigger>` — leave it out

From a component

Your own triggers

import { ReferralWidget, FeedbackModal, useReferralPopup, useFeedbackModal } from "@roastnest/react";

// Mount the widgets once, without their floating buttons…
<ReferralWidget hideTriggerButton />
<FeedbackModal hideTriggerButton />

// …and open them from your own menu, anywhere in the app.
function AccountMenu() {
  const referral = useReferralPopup();
  const feedback = useFeedbackModal();
  return (
    <>
      <MenuItem onClick={referral.open}>Invite friends</MenuItem>
      <MenuItem onClick={feedback.open}>Send feedback</MenuItem>
    </>
  );
}

useFeedbackModal() and useReferralPopup() return { isOpen, open, close, toggle, setTriggerButtonVisibility }. useFeedback() keeps its names: { isFeedbackOpen, toggleFeedback, openFeedback, closeFeedback, setTriggerButtonVisibility }. For ratings, useRating().requestRating() opens the popup.

Outside React

Controller

import { feedbackModalController } from "@roastnest/react";

api.interceptors.response.use(undefined, (error) => {
  if (error.response?.status >= 500) feedbackModalController.open();
  return Promise.reject(error);
});

Controllers have open(), close(), toggle(), isOpen() and setTriggerButtonVisibility(visible). ratingController has request(), close() and hasRated().

Showing and hiding the trigger

At runtime

const { setTriggerButtonVisibility } = useFeedback();

// Hide the floating button during checkout, bring it back afterwards.
useEffect(() => {
  setTriggerButtonVisibility(false);
  return () => setTriggerButtonVisibility(true);
}, []);

Good to know

The widget must be mounted for open() to work; otherwise it logs an error and does nothing.
setTriggerButtonVisibility() overrides the hideTriggerButton prop until the page reloads.
A ReferralWidget with a controlled visible prop stays controlled by it.