# Choosing placement

## 1. Head over to the "Placement" card

On the “Content” tab of a project’s page, the “Placement” card is located next to the “Design” card.

<figure><img src="https://318042386-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FxNObIMtbqqV5r1oc0cmU%2Fuploads%2Frgx6lmEWbmf1eBxhPW6R%2Fimage.png?alt=media&#x26;token=39998eed-5d4d-49b1-ae71-7745928e746e" alt=""><figcaption><p>"Placement" card</p></figcaption></figure>

## 2. Choose placement mode

We offer 3 different placement mode depending on your use case.

| Placement mode | Definition                                                                                                            |
| -------------- | --------------------------------------------------------------------------------------------------------------------- |
| Automatic      | Place your feedback button at pre-defined positions of your site (ex: bottom right, bottom left, top right, top left) |
| Manual         | You can decide where to render the button. Refer to the “Manual” placement guide below for further information.       |
| Hidden         | The button will not be visible. However, the function will still be operational.                                      |

## 3. Edit placement settings

### 3.A - Automatic placement

Select a position for your button from our list, and we’ll take care of the rest.

<figure><img src="https://318042386-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FxNObIMtbqqV5r1oc0cmU%2Fuploads%2FUogvMV5vXsUxjLoY8oVU%2Fimage.png?alt=media&#x26;token=f0b147c7-9250-4fd8-8403-cd29f1b78c21" alt=""><figcaption><p>Automatic placement</p></figcaption></figure>

### 3.B - Manual placement

When you select “Manual” placement, you will get the option to define on where to place your button. When using this option, the button will render inside the HTML element with the ID of what you written in the “*Container’s ID*” input.

<figure><img src="https://318042386-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FxNObIMtbqqV5r1oc0cmU%2Fuploads%2FTbcm1BjpuWAkJUVA2q8A%2Fimage.png?alt=media&#x26;token=50830f34-df5b-4df0-8cb8-594ea6904ddf" alt=""><figcaption><p>Manual placement</p></figcaption></figure>

In this example, when the page loads, the feedback button will be rendered inside the HTML element with the ID “<mark style="color:blue;">**feedbackButtonWrapper**</mark>”. We recommend to go with `div` as the wrapper element.

### 3.C - Hidden placement

<figure><img src="https://318042386-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FxNObIMtbqqV5r1oc0cmU%2Fuploads%2F6bJj6HQc9BBGCIANJ2rk%2Fimage.png?alt=media&#x26;token=9dc46899-fdab-40e7-8516-8a617d67f4c4" alt=""><figcaption><p>Hidden placement</p></figcaption></figure>

Under this mode, the button will not be visible. This option is for users who wish to create their own feedback button. In this scenario, you can activate the button’s functionality by calling this public method "openUserHelpButton" from the windows interface. Below is a sample code using Javascript:

```javascript
if(window.isUserHelpReady == true) {
    window.openUserHelpButton()
}
```

{% hint style="success" %}
After selecting your preferred placement, you are one step closing in adding the feedback button into your site. Refer to the next guide on how to do so.
{% endhint %}