> ## Documentation Index > Fetch the complete documentation index at: https://docs.seam.co/llms.txt > Use this file to discover all available pages before exploring further. # Supported Device Table > Embed Seam's live table of supported devices on your own website, filtered by the capabilities and manufacturers you care about. export const DeviceList = ({manufacturers, capabilityName, token = "6c51f0a4-d421-429e-8295-d02271aa4f23"}) => { const cdn = "https://cdn.devicedb.seam.co/v/0.0.15/DeviceListByCapability.global.js"; const close = ""; const srcDoc = ['', "", ` ``` Add the `device-list-by-capability` element wherever you want the table to appear, and set `capability-name` to the capability your customers care about. ```html theme={null} ``` Open the page on one of the domains you registered with Seam. You should see devices grouped by manufacturer with a search box above them. If you see nothing or an error, see [Troubleshooting](#troubleshooting). The component renders inside a [shadow root](https://developer.mozilla.org/en-US/docs/Web/API/Web_components/Using_shadow_DOM) and brings its own styles, so it cannot inherit from or interfere with the CSS on the rest of your page. ## How the Embed Token Works An embed token is **not** a Seam API key and carries no account access. It identifies your embed, and it only works on the domains you registered. Seam matches the browser's `Origin` header against the origins registered for your token: * A request from a registered origin succeeds. * A request from any other origin returns `403 Origin not allowed for this token`. * A request with no `Origin` header at all also returns `403`. Matching is on the whole origin string, scheme included. `https://example.com` and `http://example.com` are different origins, and so is the same host on a different port. Because of this, the token is safe to include in your page's HTML, where anyone can read it. Someone who copies it cannot use it on their own site. Because a missing `Origin` is rejected too, the token will not work from `curl`, from a page opened over `file://`, or from a native app shell that sends no `Origin` header. The component expects a page served over HTTP(S) from a domain you have registered. To add or remove domains later, email [support@getseam.com](mailto:support@getseam.com). ## How Support Is Reported Each device row carries a support badge for the selected capability, rather than a plain yes-or-no: | Badge | Meaning | | ----------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------- | | **Live** | The device supports the capability outright. | | **Conditionally** | Supported, but with requirements—for example, a compatible [Seam Bridge](/capability-guides/seam-bridge) may be needed. Expand the row to see what applies. | | **No** | The device does not support the capability. | | **Unknown** | Seam has no compatibility data for this device and capability yet. | A device is reported as **Conditionally** whenever caveats exist, even if the underlying record says the capability is supported. The same applies when a device matches the capability more than once and those matches disagree—the table reports the more cautious answer rather than the optimistic one. This is the main reason to embed the table instead of publishing a static list: your customers see the caveat attached to the specific model they own, and it updates as Seam's compatibility data changes. Use `initial-supported-filter="true"` to open the table with only supported devices shown. ## Attributes Seam can also preset any of these on your token, so the table renders the way you want without you repeating attributes on every page. Attributes you set on the element always win over the presets, so you can override a default on a single page. Ask support if you'd like defaults configured. | Attribute | Type | Default | Description | | -------------------------- | ------- | -------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------ | | `capability-name` | string | — | **Required.** One or more [capabilities](#capabilities), comma-separated. Supplying more than one adds a dropdown so your customers can switch between them. | | `token` | string | — | **Required.** Your embed token. | | `manufacturers` | string | — | Comma-separated manufacturer slugs. When set, only these manufacturers appear. | | `excluded-manufacturers` | string | — | Comma-separated manufacturer slugs to leave out. | | `initial-capability` | string | first in `capability-name` | Which capability is selected when the table loads. | | `initial-supported-filter` | boolean | `false` | When `true`, the table opens with the "supported only" filter already applied. | | `unsupported-systems` | string | — | Comma-separated slugs to display as unsupported rather than omit. Use this to be explicit about systems you do not support. | | `max-visible-rows` | number | `4` | How many device rows to show per manufacturer before a "show more" control appears. | | `hide-search` | boolean | `false` | Hides the search input. | | `locale` | string | `en` | Display language: `en`, `fr`, or `pt`. | ## Capabilities Set `capability-name` to one or more of the following. These are the same capability flags the [Seam API](/capability-guides/device-and-system-capabilities) reports on a device, so a capability you filter by here is one you can check in code later. | Capability | Shown in the table as | | ---------------------------------------- | --------------------- | | `can_remotely_unlock` | Remote Unlock | | `can_remotely_lock` | Remote Lock | | `can_program_online_access_codes` | Online Access Codes | | `can_program_offline_access_codes` | Offline Codes | | `can_provision_mobile_keys` | Mobile Keys | | `can_provision_wallet_keys` | Wallet Keys | | `can_encode_plastic_cards` | Plastic Cards | | `can_hvac_heat` | HVAC Heat | | `can_hvac_cool` | HVAC Cool | | `can_hvac_fan` | HVAC Fan | | `can_hvac_auto` | HVAC Auto | | `can_program_thermostat_weekly_programs` | Weekly Program | | `can_monitor` | Monitoring | Use the full `can_*` flag names exactly as written above. Shorthand names such as `remoteunlock` are not recognized, and the table renders empty when it receives one. ## Examples ### Offer several capabilities Pass multiple capabilities to give your customers a dropdown, and use `initial-capability` to choose which one loads first. ```html theme={null} ``` ### Show only the manufacturers you integrate with ```html theme={null} ``` ### Exclude specific manufacturers Useful when you want the full catalog minus a few brands you do not resell. ```html theme={null} ``` ### Build a compact thermostat table Hide the search box, show more rows per manufacturer, and open with only supported devices visible. ```html theme={null} ``` ### Render the table in French ```html theme={null} ``` `en`, `fr`, and `pt` are available. Seam can also set a default locale on your token, so the table renders in your language without the attribute. ## Dark Mode The table follows a `dark` class on any ancestor element rather than the browser's color-scheme preference. This lets it match whatever your site's own theme toggle does. ```html theme={null}

``` If your theme switcher toggles a class on `` or ``, the table picks up the change automatically—no extra wiring required. ## Pin a Version Versioned CDN URLs are immutable: the contents of `/v/0.0.16/` never change once published. Pin an explicit version in production so a new release cannot alter your page unexpectedly. ```html theme={null} ``` `https://cdn.devicedb.seam.co/v/latest/DeviceListByCapability.global.js` also works and always serves the newest release. It is convenient for a quick trial, but avoid it in production. To upgrade, change the version in the URL. To roll back, point at the previous version. ## Framework Notes The table is a standard [custom element](https://developer.mozilla.org/en-US/docs/Web/API/Web_components/Using_custom_elements), so plain HTML, Vue, Svelte, and Angular render it directly. **React needs one extra step.** React does not manage custom elements the way it manages its own components, and a component that mutates the DOM during hydration can throw a hydration error. Rendering the table inside an `