Make a Supported Devices Page
Embed the Seam Custom Device Database web component to show a filterable list of compatible devices on your site
Overview
Seam adds support for new smart devices every week, and by integrating with Seam, you get access to those new devices too.
This guide shows you how to embed a filterable list of devices on your site using the Seam Custom Device Database web component. 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.
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.
1 — Request an API Token
The <device-list-by-capability> component reads from Seam's Custom Device Database, which requires an API token. Email [email protected] to request a token for your workspace.
2 — Add the Component
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.
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.
Include the script tag once in your application's entrypoint (for example, index.html):
Then render the element wherever you need the device list:
Some frameworks require additional configuration to enable web component support. Refer to your framework's documentation — for example, the Vue web components guide or Angular's CUSTOM_ELEMENTS_SCHEMA.
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 for available versions.
3 — Configure the Component
The <device-list-by-capability> element accepts the following attributes:
capability-name
string
—
Required. Comma-separated Seam capability flag names, for example can_program_online_access_codes or can_program_online_access_codes,can_provision_wallet_keys.
token
string
—
Required. API token issued by Seam.
max-visible-rows
number
4
Maximum device rows shown per manufacturer before a "show more" control appears.
hide-search
boolean
false
Hide the search input.
manufacturers
string
—
Comma-separated manufacturer slugs to restrict the device list.
initial-capability
string
—
Which capability to display first when capability-name contains multiple values.
Show multiple capabilities
When you provide more than one capability, the component renders a dropdown selector. Use initial-capability to control which capability is active on load.
Filter to specific manufacturers
Next Steps
Browse live examples in the interactive component storybook.
If you have any questions or want to report an issue, email us at [email protected].
Last updated
Was this helpful?