Skip to content

Commit 0701406

Browse files
sybohyclaude
sybohy
and
claude
committed
docs: replace retired supported-device-table with custom-device-db-web
The internal device-db endpoint that powered <seam-supported-device-table> has been retired. Update the "Make a Supported Devices Page" guide to use <device-list-by-capability> from seamapi/custom-device-db-web, served from the Seam CDN, including the API-token request step and version pinning guidance. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
1 parent 4b3b680 commit 0701406

1 file changed

Lines changed: 69 additions & 50 deletions

File tree

‎docs/guides/ui-components/overview/make-a-supported-devices-page.md‎

Lines changed: 69 additions & 50 deletions
Original file line numberDiff line numberDiff line change
@@ -1,104 +1,123 @@
11
---
2-
description: Use Seam Components to make a Supported Devices page
2+
description: >-
3+
Embed the Seam Custom Device Database web component to show a filterable list
4+
of compatible devices on your site
35
---
46

57
# Make a Supported Devices Page
68

79
## Overview
810

9-
Seam adds supports for smart devices every week and by integrating with Seam, you get access to these new devices too!
11+
Seam adds support for new smart devices every week, and by integrating with Seam, you get access to those new devices too.
1012

11-
This guide will show you how to add a [supported device table](https://react.seam.co/?path=/docs/components-supporteddevicetable--docs) to your website or application. You can use plain HTML, React, or any framework that supports web components.
13+
This guide shows you how to embed a filterable list of devices on your site using the [Seam Custom Device Database web component](https://github.com/seamapi/custom-device-db-web). The component is a standard custom element served from the Seam CDN, so it works in plain HTML and any framework that supports web components.
1214

13-
## 1 - Get a Publishable Key from the Seam Console
15+
{% hint style="warning" %}
16+
**Migrating from the previous version?** The earlier `<seam-supported-device-table>` component has been retired and will no longer load. If your site embeds it today, replace it with `<device-list-by-capability>` as shown below.
17+
{% endhint %}
1418

15-
To access the Seam API, you'll need a publishable key. This key identifies your application when making requests to Seam and is safe to embed in your frontend code.
19+
## 1 — Request an API Token
1620

17-
Go to [console.seam.co](https://console.seam.co) and select "Client Sessions" from the sidebar. You should then see a "Publishable Key" that you can copy.
21+
The `<device-list-by-capability>` component reads from Seam's Custom Device Database, which requires an API token. Email [support@seam.co](mailto:support@seam.co) to request a token for your workspace.
1822

19-
## 2 — Add Seam Components
23+
## 2 — Add the Component
2024

2125
{% tabs %}
2226
{% tab title="Plain HTML" %}
23-
Seam Components are implemented in React, but may be used as native web components.
24-
25-
Create a plain HTML page with the content below. You can serve this anyway you like, or even open it directly in your browser. The version in the script tag can be any [released version](https://github.com/seamapi/react/releases).
27+
Add the script tag and custom element anywhere on your page. You can serve this any way you like, or even open it directly in your browser.
2628

2729
```html
2830
<!DOCTYPE html>
2931
<html lang="en">
3032
<head>
3133
<meta charset="utf-8" />
3234
<meta name="viewport" content="width=device-width, initial-scale=1" />
33-
<title>Seam Components</title>
35+
<title>Supported Devices</title>
3436
</head>
3537
<body>
3638
<main>
37-
<seam-supported-device-table
38-
publishable-key="your_publishable_key"
39-
></seam-supported-device-table>
39+
<device-list-by-capability
40+
capability-name="remoteunlock"
41+
token="your-api-token"
42+
></device-list-by-capability>
4043
</main>
4144
<script
4245
type="module"
43-
src="https://react.seam.co/v/1.42.1/dist/elements.js"
46+
src="https://cdn.devicedb.seam.co/v/latest/DeviceListByCapability.global.js"
4447
></script>
4548
</body>
4649
</html>
4750
```
51+
4852
{% endtab %}
4953

50-
{% tab title="React" %}
51-
Install `@seamapi/react` in your React application
54+
{% tab title="Any JavaScript Framework" %}
55+
Because `<device-list-by-capability>` is a standard custom element, you can use it in any framework that supports web components, including React, Vue, Angular, and Svelte.
5256

53-
```bash
54-
npm install --save @seamapi/react
55-
```
57+
Include the script tag once in your application's entrypoint (for example, `index.html`):
5658

57-
Add the components anywhere in your React app
59+
```html
60+
<script
61+
type="module"
62+
src="https://cdn.devicedb.seam.co/v/latest/DeviceListByCapability.global.js"
63+
></script>
64+
```
5865

59-
```javascript
60-
import { SupportedDeviceTable, SeamProvider } from "@seamapi/react"
66+
Then render the element wherever you need the device list:
6167

62-
export const App = () => {
63-
return (
64-
<SeamProvider publishableKey="your_publishable_key">
65-
<main>
66-
<SupportedDeviceTable />
67-
</main>
68-
</SeamProvider>
69-
)
70-
}
68+
```html
69+
<device-list-by-capability
70+
capability-name="remoteunlock"
71+
token="your-api-token"
72+
></device-list-by-capability>
7173
```
74+
75+
Some frameworks require additional configuration to enable web component support. See the [Angular](getting-started-with-seam-components/angular.md) and [Vue](getting-started-with-seam-components/vue.md) guides for examples.
7276
{% endtab %}
77+
{% endtabs %}
7378

74-
{% tab title="Any JavaScript Framework" %}
75-
Install `@seamapi/react` in your application
79+
{% hint style="warning" %}
80+
**Pin to a specific version in production.** The `/v/latest/` URL tracks the most recent release. To avoid surprise updates, pin to an immutable version such as `https://cdn.devicedb.seam.co/v/0.0.6/DeviceListByCapability.global.js`. See the [release list](https://github.com/seamapi/custom-device-db-web/releases) for available versions.
81+
{% endhint %}
7682

77-
```bash
78-
npm install --save @seamapi/react
79-
```
83+
## 3 — Configure the Component
8084

81-
Then import the custom elements bundle in your application entrypoint:
85+
The `<device-list-by-capability>` element accepts the following attributes:
8286

83-
```javascript
84-
import "@seamapi/react/elements.js"
85-
```
87+
| Attribute | Type | Default | Description |
88+
| -------------------- | ------- | ------- | ------------------------------------------------------------------------------------------------------ |
89+
| `capability-name` | string | — | **Required.** Comma-separated capability names, for example `remoteunlock` or `remoteunlock,walletkeys`. |
90+
| `token` | string | — | **Required.** API token issued by Seam. |
91+
| `max-visible-rows` | number | `4` | Maximum device rows shown per manufacturer before a "show more" control appears. |
92+
| `hide-search` | boolean | `false` | Hide the search input. |
93+
| `manufacturers` | string | — | Comma-separated manufacturer slugs to restrict the device list. |
94+
| `initial-capability` | string | — | Which capability to display first when `capability-name` contains multiple values. |
95+
96+
### Show multiple capabilities
8697

87-
Add the components where your framework renders HTML. Some frameworks may require additional configuration to enable web component support, e.g., [Angular](getting-started-with-seam-components/angular.md) or [Vue](getting-started-with-seam-components/vue.md).
98+
When you provide more than one capability, the component renders a dropdown selector. Use `initial-capability` to control which capability is active on load.
8899

89100
```html
90-
<seam-supported-device-table publishable-key="your_publishable_key"></seam-supported-device-table>
101+
<device-list-by-capability
102+
capability-name="remoteunlock,walletkeys"
103+
initial-capability="remoteunlock"
104+
token="your-api-token"
105+
></device-list-by-capability>
91106
```
92-
{% endtab %}
93-
{% endtabs %}
94107

95-
You should see a list of device models like what's shown below:
108+
### Filter to specific manufacturers
96109

97-
<figure><img src="https://3624860916-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FxnN2A67918om1UthYWsF%2Fuploads%2FyvmI7GxNyxhebqR99ZwF%2FScreen%20Shot%202023-06-30%20at%209.46.33%20AM.png?alt=media&#x26;token=18a6ad74-0f9f-4e18-8c15-57371c461044" alt=""><figcaption></figcaption></figure>
110+
```html
111+
<device-list-by-capability
112+
capability-name="remoteunlock"
113+
manufacturers="schlage,yale"
114+
token="your-api-token"
115+
></device-list-by-capability>
116+
```
98117

99118
## Next Steps
100119

101-
* View and play with other components in the [interactive storybook component library](https://react.seam.co/)
102-
* Check out some [Full Example Apps](https://github.com/seamapi/react/tree/main/examples)
120+
- Browse live examples in the [interactive component storybook](https://seamapi.github.io/custom-device-db-web).
121+
- Review source, release notes, and version history in the [`custom-device-db-web` repository](https://github.com/seamapi/custom-device-db-web).
103122

104-
If you have any questions or want to report an issue, email us at support@seam.co.
123+
If you have any questions or want to report an issue, email us at [support@seam.co](mailto:support@seam.co).

0 commit comments

Comments
 (0)