> ## Documentation Index
> Fetch the complete documentation index at: https://docs.duckpost.app/llms.txt
> Use this file to discover all available pages before exploring further.

# Widget

> Install the DuckPost widget, review setup examples, and manage widget settings.

<p align="center">
  <img className="rounded-lg" src="https://mintcdn.com/duckpost/aAhMZODiV5dM3w5v/brand/widget.webp?fit=max&auto=format&n=aAhMZODiV5dM3w5v&q=85&s=3c8f0fb8b1075d6d66eec908b9d157e1" alt="DuckPost widget" width="720" data-path="brand/widget.webp" />
</p>

The DuckPost widget lets customers read updates without leaving your product. You configure it from [**Integration**](https://duckpost.app/integration) and load it from `https://widget.duckpost.app/widget.js?v=1.0.0`.

## What the widget does

* Shows published releases inside your app or website
* Keeps an unread state for visitors
* Lets customers open release details in-product
* Supports reaction feedback
* Can run as a floating launcher or from your own button

## Widget quick setup

Add the script before the closing `</body>` tag:

```html theme={null}
<script
  async
  src="https://widget.duckpost.app/widget.js?v=1.0.0"
  data-org-id="<your-org-id>"
  data-theme="light"
></script>
```

Replace `<your-org-id>` with the organization ID shown in [**Integration**](https://duckpost.app/integration).

This creates the floating DuckPost launcher automatically.

## Widget setup example

If you want to mount the widget from your own button, use the JavaScript API:

```html theme={null}
<button id="product-updates" type="button">Product updates</button>
<script src="https://widget.duckpost.app/widget.js?v=1.0.0"></script>
<script>
  DuckPostWidget.init({
    organizationId: "<your-org-id>",
    mode: "button",
    renderBadge: false,
    target: "#product-updates",
    theme: "light",
    type: "modal"
  });
</script>
```

## Widget behavior

The widget supports:

* `light` and `dark` themes
* Floating or button-triggered launch
* Popup or modal presentation
* Unread badge handling
* In-app feedback reactions

## Domain allowlist

Owners can restrict widget usage to approved domains.

* Up to 5 domains are supported
* Each entry must be a valid hostname such as `app.example.com`
* `localhost` is allowed for development
* The allowlist only applies when it is enabled

If the allowlist is enabled, widget requests from unapproved origins are rejected.

## Recommended widget flow

<Steps>
  <Step title="Publish a release first">
    The widget is most useful once you already have published updates to display.
  </Step>

  <Step title="Copy the install snippet">
    Open [duckpost.app/integration](https://duckpost.app/integration) and copy the widget script for your organization.
  </Step>

  <Step title="Install and test">
    Verify the widget loads the correct organization and opens inside the right product surface.
  </Step>

  <Step title="Lock down domains">
    Turn on the domain allowlist after you confirm the widget works in your intended environments.
  </Step>
</Steps>

## Helpful links

* [Open Integration](https://duckpost.app/integration)
* [View widget showcase](https://showcase-widget.duckpost.app/)
* [Public page](/integrations/public-page)