# Embedding the Widget

The embed widget offers a seamless way to integrate your portal into your application or website. With a simple click on a trigger in form of a link or button, users can access a dialog box displaying the most recent announcements. Additionally, the trigger conveniently displays a badge indicating the presence of new announcements.

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

## Installation instructions

{% stepper %}
{% step %}

#### Copy the channel ID

[Copy the channel ID](/guide/resources/how-tos/finding-the-channel-id.md) for the embed widget.
{% endstep %}

{% step %}

#### **Select which modules to include**

Choose whether to embed the Changelog, the Roadmap, or both by selecting which modules to include in the embed.

<figure><img src="/files/I2Nqb7IXCsI3ltJCtHoC" alt=""><figcaption><p>Select which modules to include</p></figcaption></figure>
{% 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-widget element to your page**

Add the following code snippet to the `<body>` section of your site. The widget will not be rendered inline, so it does not matter where in the body you position the element. Ensure you replace the `CHANNEL_ID` attribute.

```markup
<released-widget channel-id="CHANNEL_ID"></released-widget>
```

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

```
<released-page channel-id="CHANNEL_ID" auth-token="AUTH_TOKEN"></released-page>
```

{% endstep %}
{% endstepper %}

## Optional step

{% stepper %}
{% step %}

#### **Customize the widget (optional)**

Customize the widget to match your brand and app design using the widget 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](/guide/product/portals/portal/widget.md).
{% endstep %}
{% endstepper %}

## Example

View an example of how to embed the widget 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-widget.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.
