# Embedding the Feedback Form

The form embed enables you to integrate a feedback form seamlessly into your app or website. Feedback from customers and stakeholders lands in the [inbox](https://docs.released.so/guide/product/feedback/inbox "mention") for easy triage.&#x20;

{% hint style="warning" %}
To enable users to log in, you must add the domain's URL to the list of [trusted domains](https://docs.released.so/guide/product/administration/trusted-domains). The URL must include the subdomain. For example `feedback.example.com`.
{% endhint %}

## Installation instructions

{% stepper %}
{% step %}

### Copy the Form ID

[Copy the form ID](https://docs.released.so/guide/resources/how-tos/finding-the-channel-id) for the embed form.
{% endstep %}

{% step %}

### Select how to display your form

<div align="left"><figure><img src="https://1499735372-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FCU5VgN3YVTfigwSnbdbk%2Fuploads%2FKuwknQYgfron1tTmPcUu%2FForm-Settings-Dialog.png?alt=media&#x26;token=7a4beeff-280b-4fb3-a218-d44cd3df42ac" alt="" width="375"><figcaption></figcaption></figure></div>

The form can be shown inline, alongside the content where you embed it, or opened programatically.&#x20;
{% endstep %}

{% step %}

### **Add the embed script**

Add the following code snippet to the `<head>` section of your site.

```markup
<script src="https://embed.released.so/1/embed.js" defer></script>
```

{% endstep %}

{% step %}

### **Add the released-**&#x66;orm **element to your page**

Add the following code snippet to the `<body>` section of your site. Unlike the widget, the page content renders where you position the element. Ensure you replace the `FORM_ID` attribute.

```markup
<released-form form-id="FORM_ID"></released-page>
```

To automatically authenticate users, you can [implement user verification](https://docs.released.so/guide/getting-started/setup-guide/implementing-user-verification) and pass in the `auth-token` attribute.

```
<released-form form-id="FORM_ID" auth-token="AUTH_TOKEN"></released-page>
```

{% endstep %}
{% endstepper %}

## Open/Closing the dialog

You can open the form programmatically using the Released API:

```javascript
// Open the feedback form
window.Released.show('form', 'your-form-id');

// Close the feedback form
window.Released.close('form', 'your-form-id');
```

Example with a button:

```jsx
const openFeedback = () => {
  window.Released?.show('form', 'your-form-id');
};

<button onClick={openFeedback}>
  Feedback
</button>
```

## Customize the page&#x20;

{% stepper %}
{% step %}
Customize the page to match your brand and app design using the page properties. Adjust the title and description, or change the colors according to your preferences.

Please see the documentation for a full list of [configuration options](https://docs.released.so/guide/product/portals/portal/announcement-page).
{% endstep %}
{% endstepper %}

## Example

View an example of how to embed the page on [CodePen](https://codepen.io/released/pen/WNaaMNx).


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.released.so/guide/getting-started/setup-guide/embedding-the-feedback-form.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.
