# Layout

> For the complete documentation index, see [llms.txt](/llms.txt)

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

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:

```html
<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](/security/api-keys#requiring-a-key-for-submissions).|
| `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](accessibility).|
| `custom-font`          | **Type**: `boolean`**Default value**: `false`When set to `true`, the [Inter font](https://fonts.google.com/specimen/Inter) 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 <kbd>Esc</kbd> 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 <kbd>Esc</kbd> to something else. See [Accessibility](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`](text) 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 Privacy Policy and Terms of Service 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 Privacy Policy.`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

<iframe height="700" style={{width: '100%'}}  scrolling="no" title="Feedback button styles" src="https://codepen.io/David-Garcia-the-bashful/embed/rNQrojP?default-tab=html%2Cresult&theme-id=dark" frameBorder="no" loading="lazy" allowtransparency="true" allowfullscreen="true">
  See the Pen 
  Feedback button styles by David Garcia (@David-Garcia-the-bashful)
  on CodePen.
</iframe>

### Create a floating button

<iframe height="700" style={{width: '100%'}} scrolling="no" title="Floating feedback buttons" src="https://codepen.io/David-Garcia-the-bashful/embed/PoxBXmm?default-tab=html%2Cresult&theme-id=dark" frameBorder="no" loading="lazy" allowtransparency="true" allowfullscreen="true">
  See the Pen 
  Floating feedback buttons by David Garcia (@David-Garcia-the-bashful)
  on CodePen.
</iframe>

### Add the widget to any button

<iframe height="700" style={{width: '100%'}} scrolling="no" title="Untitled" src="https://codepen.io/David-Garcia-the-bashful/embed/poQxyeY?default-tab=html%2Cresult&theme-id=dark" frameBorder="no" loading="lazy" allowtransparency="true" allowfullscreen="true">
  See the Pen 
  Untitled by David Garcia (@David-Garcia-the-bashful)
  on CodePen.
</iframe>

### Like / dislike buttons

<iframe height="700" style={{width: '100%'}}  scrolling="no" title="Feedback button styles" src="https://codepen.io/David-Garcia-the-bashful/embed/jOgWaOp?default-tab=html%2Cresult&theme-id=dark" frameBorder="no" loading="lazy" allowtransparency="true" allowfullscreen="true">
  See the Pen 
  Feedback button styles by David Garcia (@David-Garcia-the-bashful)
  on CodePen.
</iframe>

### Change modal position

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

<iframe height="700" style={{width: '100%'}}  scrolling="no" title="Feedback widget modal position" src="https://codepen.io/David-Garcia-the-bashful/embed/poQZqwZ?default-tab=html%2Cresult&theme-id=dark" frameBorder="no" loading="lazy" allowtransparency="true" allowfullscreen="true">
  See the Pen 
  Feedback widget modal position by David Garcia (@David-Garcia-the-bashful)
  on CodePen.
</iframe>

### Prefill email

<iframe height="700" style={{width: '100%'}} scrolling="no" title="Prefill email" src="https://codepen.io/David-Garcia-the-bashful/embed/yLQROXr?default-tab=html%2Cresult&theme-id=dark" frameBorder="no" loading="lazy" allowtransparency="true" allowfullscreen="true">
  See the Pen 
  Prefill email by David Garcia (@David-Garcia-the-bashful)
  on CodePen.
</iframe>

### Enable privacy policy

<iframe height="700" style={{width: '100%'}} scrolling="no" title="Feedback widget privacy policy" src="https://codepen.io/David-Garcia-the-bashful/embed/OJrQPzp?default-tab=html%2Cresult" frameBorder="no" loading="lazy" allowtransparency="true" allowfullscreen="true">
  See the Pen 
  Untitled by David Garcia (@David-Garcia-the-bashful)
  on CodePen.
</iframe>

### Enable stars rating

<iframe height="700" style={{width: '100%'}} scrolling="no" title="Feedback widget rating" src="https://codepen.io/David-Garcia-the-bashful/embed/QWYVgMX?default-tab=html%2Cresult" frameBorder="no" loading="lazy" allowtransparency="true" allowfullscreen="true">
  See the Pen 
  Feedback widget rating by David Garcia (@David-Garcia-the-bashful)
  on CodePen.
</iframe>