# Embedding the Page

The page embed enables you to integrate your portal seamlessly into your website or documentation. You can maintain your existing website header and footer, ensuring a consistent user experience across your site.

{% 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 channel ID

[Copy the channel ID](https://docs.released.so/guide/resources/how-tos/finding-the-channel-id) 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="https://1499735372-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FCU5VgN3YVTfigwSnbdbk%2Fuploads%2FE05ucWion8IauZpdjr2K%2FSettings%20-%20Install%20instructions.png?alt=media&#x26;token=1d81a4bf-33f7-4288-8d38-7b86835181a0" 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-page 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 `CHANNEL_ID` attribute.

```markup
<released-page channel-id="CHANNEL_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-page channel-id="CHANNEL_ID" auth-token="AUTH_TOKEN"></released-page>
```

{% endstep %}
{% endstepper %}

## Optional steps

{% stepper %}
{% step %}

### **Add a notification badge**

To notify users about the availability of a new post, you can enhance the user experience by incorporating a notification badge on the link or button leading to the embedded page. This badge functions similarly to the notification badge found in the widget.

Add the following code snippet to the `<body>` section of your site where you want the badge to render.

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

{% endstep %}

{% step %}

### **Customize the page**&#x20;

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).
