Layout

The PushFeedback button is highly customizable, allowing you to customize its behavior to suit your application's needs. This page lists all available properties you can use to adjust the behavior and appearance of the PushFeedback button in your application.

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.
button-position	Type: string Default value: default Available values: default, bottom-right, center-right Position of the button.
button-style	Type: string Default value: default Available values: default, dark, light Style of the button.
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.
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.
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.
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.
screenshot-taking-text	Type: string Default value: Taking screenshot Text displayed while taking a screenshot.
canvas-editor-title	Type: string Default value: Edit screenshot Title for the canvas editor modal.
canvas-editor-cancel-text	Type: string Default value: Cancel Text for the cancel button in the canvas editor.
canvas-editor-save-text	Type: string Default value: Save Text for the save button in the canvas editor.

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