Layout

The feedback widget accepts HTML attributes to control its position, style, rating mode, and visibility options.

Usage

To customize the properties, you need to set the appropriate attributes on the <feedback-button> element in your HTML. For example:

<feedback-button project="YOUR_PROJECT_ID" button-style="dark" hide-icon="true">Feedback</feedback-button>

Properties

The table below lists all the available properties you can set:

Property	Description
project	Required Type: string The project ID.
api-key	Type: string Default value: "" Required when the project has require a submit key enabled. Use a key scoped to feedback:submit only: see API key security.
button-position	Type: string Default value: default Available values: default, bottom-right, bottom-left, top-right, top-left, center-right, center-left Position of the button. Use center-right or center-left to display the button as a vertical tab attached to the edge of the screen.
button-style	Type: string Default value: default Available values: default, dark, light Style of the button.
click-outside-close	Type: boolean Default value: true Whether clicking outside the feedback modal closes it. Any message typed by the user is kept, so an accidental click does not discard their input. Also applies to the screenshot editor, where clicking outside returns to the feedback form. See Accessibility.
custom-font	Type: boolean Default value: false When set to true, the Inter font will not be loaded. Useful if your site already uses a different font, enabling a quicker load time.
email-address	Type: string Initial value for the email input field.
escape-close	Type: boolean Default value: true Whether pressing Esc closes the feedback modal. Like clicking outside, any message typed by the user is kept. Also applies to the screenshot editor. Set to false if your site already binds Esc to something else. See Accessibility.
hide-email	Type: boolean Default value: false Whether to hide the email input.
hide-icon	Type: boolean Default value: false Whether to hide the button icon.
hide-mobile	Type: boolean Default value: false When set to true, hides the feedback button on mobile devices.
hide-privacy-policy	Type: boolean Default value: true Whether to hide the privacy policy checkbox.
hide-rating	Type: boolean Default value: false Wether to hide the ratings input.
hide-screenshot-button	Type: boolean Default value: false Whether to hide the screenshot button.
history-close	Type: boolean Default value: true Whether pressing the browser back button while the feedback modal is open closes it instead of navigating away. Especially useful on mobile, where going back is the natural way to dismiss an overlay.
is-email-required	Type: boolean Default value: false When set to true, users must provide an email address to submit feedback. Tip: Remember to also update the email-placeholder property to remove "(optional)" from the text when using this option.
metadata	Type: string Default value: `` Any metadata to tag feedback submissions. This can be used to attach additional context or categorization information to the feedback.
modal-position	Type: string Default value: center Available values: center, sidebar-right, sidebar-left, top-right, top-left, bottom-right, bottom-left, center-right, center-left Position of the feedback modal.
rating	Type: number Default value: -1 (neutral) Rating selected by default. Available values: stars mode: 1...5. thumbs mode: 0 dislike and 1 like. -1 means neutral in both modes.
rating-mode	Type: string Default value: thumbs Available values: thumbs, stars Type of rating system.
recaptcha-text	Type: string Default value: This form is protected by reCAPTCHA and the Google <a href="https://policies.google.com/privacy" target="_blank" rel="noopener noreferrer">Privacy Policy</a> and <a href="https://policies.google.com/terms" target="_blank" rel="noopener noreferrer">Terms of Service</a> apply. Text displayed in the footer when reCAPTCHA is enabled. Supports a limited set of HTML tags (a, b, br, code, em, i, p, small, span, strong, u) and attributes (href, target, rel, title).
sessionId	Type: string Default value: Autogenerated Identifies the current user session. By default, this value is autogenerated if not provided. You can override it to specify a custom session ID, which can be useful for tracking or linking specific sessions across different analytics tools.
submit	Type: boolean Default: false If set to true, submits feedback automatically without opening the modal, using the provided rating value. If not set, the default rating of 0 (negative feedback) is sent.
privacy-policy-text	Type: string Default value: I have read and expressly consent to the terms of the <a href='https://pushfeedback.com/privacy'>Privacy Policy</a>. Privacy policy text.

Examples

Here you'll find practical examples to guide you in customizing the PushFeedback button for various use cases.

Change the button style

Create a floating button

Add the widget to any button

Like / dislike buttons

Change modal position

info

For an optimal viewing experience of this demo, select the 0.25x zoom level on CodePen.

Prefill email

Enable privacy policy

Enable stars rating