Skip to content

Update docs for Dashboard Extension #21

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
matthias-own3d wants to merge 3 commits into
base: main
Choose a base branch
from
Open

Update docs for Dashboard Extension #21

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
d37f3fc
Fix the table
matthias-own3d Nov 17, 2025
2d5ad60
Add description for the new compatibility constants
matthias-own3d Nov 17, 2025
b4ba879
Add docs for DashboardExtension module
matthias-own3d Nov 20, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 2 additions & 2 deletions docs/docs/extensions/README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -37,8 +37,8 @@ Here is a list of all supported compatibilities:

| ID | Name | Description |
|----|-------------------------------|-----------------------------------------------------------------------------------------------------------------------------------------------------|
| 2 | Standalone Extension | The `browser-source` compatibility allows the extension to be used as a Scene Editor Widget. |
| 4 | Scene Editor Widget Extension | The `standalone` compatibility allows the extension to be used as a Standalone App in the OWN3D Pro Dashboard. |
| 2 | Standalone Extension | The `standalone` compatibility allows the extension to be used as a Standalone App in the OWN3D Pro Dashboard. |
| 4 | Scene Editor Widget Extension | The `browser-source` compatibility allows the extension to be used as a Scene Editor Widget. |
| 5 | Configuration Page | The `config` compatibility allows you to add a configuration page to your extension details page allowing the streamer to configure your extension. |

Other compatibilities are planned for the future.
Expand Down
39 changes: 39 additions & 0 deletions docs/docs/extensions/sdk.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -139,6 +139,22 @@ const { user, context } = storeToRefs(extensionStore)
```
<!-- @formatter:on -->

## Compatibility
To define the current [compatibility](./README.md#compatibilities) of the Extension, you can use the `COMPATIBILITY_*` constants provided by the SDK. These constants help you specify which type of extension you are building, such as a Dashboard Extension or a Scene-Builder Widget.

You are required to set `COMPATIBILITY_DASHBOARD_EXTENSION` for a Dashboard Extension to function correctly inside the OWN3D Pro Dashboard. For all other types of extensions, setting the compatibility is optional and not needed right now.

```ts
import {
createExtension,
COMPATIBILITY_DASHBOARD_EXTENSION,
COMPATIBILITY_SCENE_BUILDER_WIDGET,
COMPATIBILITY_CONFIGURATION_PAGE
} from '@own3d/sdk'

const extension = createExtension(COMPATIBILITY_DASHBOARD_EXTENSION)
```

## Modules

### Auth
Expand Down Expand Up @@ -175,6 +191,29 @@ onContext((context, changed) => {
})
```

### DashboardExtension
The DashboardExtension module provides methods to interact with the OWN3D Pro Dashboard. It allows you to define tabs for your Dashboard Extension and set the active tab. You can also listen for tab change events. Tabs can have different labels for different languages.

```js
import { initializeExtension, useDashboardExtension, COMPATIBILITY_DASHBOARD_EXTENSION } from '@own3d/sdk'
const extension = initializeExtension(COMPATIBILITY_DASHBOARD_EXTENSION)

const { defineDashboardTabs, setDashboardTab, onDashboardTabChanged } = useDashboardExtension(extension)

defineDashboardTabs([
{ key: 'tab1', labels: { en: 'Tab 1', de: 'Reiter 1' } },
{ key: 'tab2', labels: { en: 'Tab 2', de: 'Reiter 2' } },
])

setDashboardTab('tab1')

onDashboardTabChanged((key) => {
console.log('Active tab changed to:', key)
})

```


### Notifications

The Notifications module provides API methods to send notifications to the user. Notifications can have different types
Expand Down