Customization

One customize object controls the form copy, the trigger button and the notification bubbles. Every field is optional and falls back to a sensible default.

Customized widget

<FeedbackWidget
  customize={{
    form: {
      messageInput: { placeholder: "What went wrong?" },
      submitButton: { label: "Send report" },
      cancelButton: { label: "Never mind" },
      successMessage: "Thanks — we're on it.",
      errorMessage: "That didn't send. Try again?",
    },
    triggerButton: {
      mode: "icon",
      placement: "right-bottom",
      label: "Report a bug",
    },
    notifications: {
      enable: true,
      repeatDelay: 30,
      messages: [
        { message: "Spotted a bug?", type: "hint" },
      ],
    },
  }}
/>

Cloud mode owns this object

When a widget is explicitly typed with mode="cloud", passing customize is a compile-time error — the dashboard is the source of truth so the two configurations cannot drift apart. Edit these values in your project settings instead. See Modes.

Form

Everything under customize.form controls the panel the user types into.

Prop	Type	Default	Description
`form.messageInput.placeholder`	`string`	`"Leave your Feedback!"`	Placeholder text in the message textarea.
`form.messageInput.className`	`string`	—	Extra classes on the textarea.
`form.submitButton.label`	`string`	`"Send Feedback"`	Submit button text.
`form.submitButton.className`	`string`	—	Extra classes on the submit button.
`form.cancelButton.label`	`string`	`"Cancel"`	Cancel button text.
`form.cancelButton.className`	`string`	—	Extra classes on the cancel button.
`form.successMessage`	`string`	`"Message Submitted"`	Shown when submission resolves successfully.
`form.errorMessage`	`string`	`"Failed to submit message"`	Shown when submission fails.
`form.className`	`string`	—	Extra classes on the form container.

Screenshot output

Both captures are on by default. Excluding one reduces payload size and shortens the pause between selecting an element and the form opening.

Prop	Type	Default	Description
`form.output.excludeFullPageScreenshot`	`boolean`	`false`	Skip the whole-page capture.
`form.output.excludeSelectedElementScreenshot`	`boolean`	`false`	Skip the capture scoped to the selected element.

Trigger button

The floating button that puts the page into selection mode. Set hideTriggerButton on the widget itself if you would rather supply your own.

Prop	Type	Default	Description
`triggerButton.mode`	`"default" \| "icon"`	`"default"`	"default" shows a labelled switch; "icon" collapses it to an icon only.
`triggerButton.placement`	`"left-center" \| "left-bottom" \| "right-center" \| "right-bottom" \| "bottom-left" \| "bottom-right"`	`"left-center"`	Which edge of the viewport the button anchors to.
`triggerButton.label`	`string`	`"Feedback Mode"`	Button text in "default" mode.
`triggerButton.className`	`string`	—	Extra classes on the button.
`triggerButton.switchButton.className`	`string`	—	Extra classes on the switch track.
`triggerButton.switchButton.thumb.className`	`string`	—	Extra classes on the switch thumb.

Notifications

Small bubbles that surface near the trigger to remind users the widget exists. They cycle through your message list on an interval.

Notification config

notifications: {
  enable: true,
  repeatDelay: 15,          // seconds between bubbles
  displayDuration: 5,       // seconds each bubble stays up
  allowDismissal: true,
  allowParmanentDismissal: true,
  paramanentDismissalExpiryDays: 7,
  messages: [
    { message: "Spotted a bug?", type: "hint" },
    { message: "Feedback earns credit", type: "reward" },
  ],
}

Prop	Type	Default	Description
`notifications.enable`	`boolean`	`true`	Turns the bubble system on or off entirely.
`notifications.messages`	`NotificationMessage[]`	—	The rotation. Each entry is a message and a type; keep messages short, since the bubble is sized for roughly 22 characters.
`notifications.repeatDelay`	`number`	`15`	Seconds between one bubble disappearing and the next.
`notifications.displayDuration`	`number`	`5`	Seconds each bubble stays on screen.
`notifications.repeatAllowed`	`boolean`	—	Whether the rotation loops once every message has been shown.
`notifications.allowDismissal`	`boolean`	`true`	Lets the user close the current bubble.
`notifications.allowParmanentDismissal`	`boolean`	`false`	Offers a don't-show-again action that suppresses bubbles across sessions.
`notifications.paramanentDismissalExpiryDays`	`number`	`7`	How long a permanent dismissal lasts before bubbles resume.

Message types

type selects the bubble's icon and accent. Available values are info, hint, offer, reward, social and urgent.

Notifications are opt-out, not opt-in

They are enabled by default with a stock message rotation. If the pattern is not right for your product, turn them off explicitly:

Disable notifications

<FeedbackWidget customize={{ notifications: { enable: false } }} />

How cloud config merges

When a widget runs in cloud mode without an explicit mode prop, any local customize object is deep-merged with the configuration fetched from your dashboard. The merge is per-leaf, not per-object, so a single dashboard field never blanks out unrelated local settings.

Merge behaviour

// Cloud mode deep-merges your local customize object with the
// dashboard config. Setting form.errorMessage on the dashboard does
// not wipe out a locally configured form.submitButton.label.