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

# Vanilla HTML

> Embed StackOne Hub in a plain HTML page using the <stackone-hub> custom element

`@stackone/hub` ships a framework-agnostic custom element (`<stackone-hub>`) you can drop into any HTML page with a `<script>` tag.

<Steps>
  <Step title="Add the script">
    Point a `<script>` tag at the IIFE bundle on a CDN. The script is side-effecting — it registers `<stackone-hub>` on `customElements`.

    ```html theme={null}
    <script src="https://unpkg.com/@stackone/hub/dist/webcomponent.js"></script>
    ```

    If you'd rather install via npm and bundle the script yourself, see the framework guides ([React](/guides/web-component-react), [Vue](/guides/web-component-vue), [Svelte](/guides/web-component-svelte), [Angular](/guides/web-component-angular)) for the `import '@stackone/hub/webcomponent'` pattern.
  </Step>

  <Step title="Get a session token from your backend">
    <Snippet file="guides/web-component-token-step.mdx" />
  </Step>

  <Step title="Add the element and listen for events">
    ```html theme={null}
    <stackone-hub id="hub" mode="integration-picker" height="600px"></stackone-hub>

    <script type="module">
      const hub = document.getElementById('hub');
      const token = await retrieveConnectSessionToken();
      hub.setAttribute('token', token);

      hub.addEventListener('success', (event) => {
        console.log('Connected:', event.detail.id, event.detail.provider);
      });

      hub.addEventListener('close', () => {
        console.log('Closed');
      });
    </script>
    ```
  </Step>
</Steps>

## Attribute reference

All scalar `StackOneHub` props map to kebab-case HTML attributes.

| Attribute           | Type                             | Default                    | Description                                             |
| ------------------- | -------------------------------- | -------------------------- | ------------------------------------------------------- |
| `token`             | string                           | —                          | Connect session token from your backend                 |
| `mode`              | `integration-picker`             | `integration-picker`       | Hub mode                                                |
| `base-url`          | string                           | `https://api.stackone.com` | StackOne API base URL                                   |
| `app-url`           | string                           | `https://app.stackone.com` | StackOne App URL                                        |
| `height`            | string                           | `500px`                    | Component height                                        |
| `theme`             | `light` \| `dark` \| JSON object | `light`                    | Theme keyword or a JSON-encoded `PartialMalachiteTheme` |
| `account-id`        | string                           | —                          | Pre-select a specific account to edit                   |
| `on-close-label`    | string                           | `Close`                    | Custom label for the close button                       |
| `show-footer-links` | boolean attribute                | `true`                     | Toggle footer visibility                                |

## Events

Callbacks are dispatched as `CustomEvent`s on the host element with `bubbles: true` and `composed: true`.

| Event     | `event.detail`                     |
| --------- | ---------------------------------- |
| `success` | `{ id: string; provider: string }` |
| `close`   | `undefined`                        |

## Next steps

<CardGroup cols={2}>
  <Card title="Backend setup" icon="server" href="/platform/connect-your-backend-with-stackone">
    Generate session tokens from your backend.
  </Card>

  <Card title="Filter connectors" icon="filter" href="/guides/embedding-stackone-hub#hub-behavior-customization">
    Restrict the Hub to a single provider or category.
  </Card>
</CardGroup>