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

# Install the widget

> Add a working Glean Feed launcher to your web app, then choose launcher or inline mode.

The widget is the fastest way to put your existing Glean Feed portal inside a web app. Choose it when you want a ready-made feedback, roadmap, and updates interface. Choose the [Headless SDK](/headless/overview) when your team needs to own the UI and interactions.

## Before you start

You need your workspace slug and the embed snippet from **Settings → Developer setup**. Confirm that the portal sections you want customers to open are visible in [portal settings](/portal/settings).

## Install from npm

Use the package when your application bundles JavaScript and you want an
explicit version in its lockfile:

```bash theme={null}
npm install @gleanfeed/widget
```

```ts theme={null}
import { init, open } from "@gleanfeed/widget";

init({
  workspace: "acme",
  portalBaseUrl: "https://gleanfeed.com",
  mode: "launcher",
  defaultView: "feedback",
});

open("roadmap");
```

For inline mode, render `<div data-glean-feed-inline></div>` before calling
`init({ mode: "inline", ... })`. The package also exports `close`, `destroy`,
`identify`, `submitFeedback`, and the headless helpers.

## Load from the CDN

Paste the dashboard-generated snippet before the closing `</body>` tag. It includes the correct CDN URL, portal origin, workspace, accent, and icon for your environment.

```html theme={null}
<script
  async
  src="https://cdn.gleanfeed.com/widget.js"
  data-workspace="acme"
  data-portal-base-url="https://gleanfeed.com"
></script>
```

Replace the example values with the values from your snippet. A script with `data-workspace` initializes launcher mode automatically.

## Confirm it works

Reload the host page. A circular launcher should appear in the lower-right corner.

1. Open the launcher.
2. Confirm the embedded portal belongs to the expected workspace.
3. Open **Feedback**, **Roadmap**, and **Updates** and confirm each enabled section matches the public portal.

If the launcher does not appear or opens the wrong portal, use [widget troubleshooting](/widget/troubleshooting).

## Inline mode

After the launcher works, switch to inline mode when you want the portal embedded in a dedicated page instead of behind a floating button. Load the script without `data-workspace`, add the mount element, and initialize it manually:

```html theme={null}
<div data-glean-feed-inline></div>
<script src="https://cdn.gleanfeed.com/widget.js"></script>
<script>
  window.GleanFeed.init({
    workspace: "acme",
    portalBaseUrl: "https://gleanfeed.com",
    mode: "inline",
    defaultView: "feedback",
  });
</script>
```

Inline mode uses a fixed-height iframe inside the first `[data-glean-feed-inline]` element. It does not render a launcher or launcher badge.

## Next steps

* Review all [configuration options and methods](/widget/configuration).
* Add [signed customer identity](/widget/identity) for seamless customer interactions.
* Learn how [notifications](/widget/notifications) appear in launcher mode.
* Review [package versions and compatibility](/widget/versions) before upgrading.