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

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

Get a session token from your backend

3

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.
AttributeTypeDefaultDescription
tokenstring—Connect session token from your backend
modeintegration-pickerintegration-pickerHub mode
base-urlstringhttps://api.stackone.comStackOne API base URL
app-urlstringhttps://app.stackone.comStackOne App URL
heightstring500pxComponent height
themelight | dark | JSON objectlightTheme keyword or a JSON-encoded PartialMalachiteTheme
account-idstring—Pre-select a specific account to edit
on-close-labelstringCloseCustom label for the close button
show-footer-linksboolean attributetrueToggle footer visibility

​
Events

Callbacks are dispatched as CustomEvents on the host element with bubbles: true and composed: true.
Eventevent.detail
success{ id: string; provider: string }
closeundefined

​
Next steps

Backend setup

Generate session tokens from your backend.

Filter connectors

Restrict the Hub to a single provider or category.