Vanilla HTML

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

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.

<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, Vue, Svelte, Angular) for the import '@stackone/hub/webcomponent' pattern.

Get a session token from your backend

Add the element and listen for events

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

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 CustomEvents on the host element with bubbles: true and composed: true.

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

Quickstart

Connect Tools

Dashboard

Build Connectors

Attribute reference

Events

Next steps

Backend setup

Filter connectors

​Attribute reference

​Events

​Next steps

Backend setup

Filter connectors

Attribute reference

Events

Next steps