Supported Devices

<seam-supported-devices /> (preview)

Supported Devices shows the device models that work with Seam, grouped by manufacturer. A manufacturer can put it on a product page to show which of its models work with Seam, and an app can put it on an integrations page to show which devices its customers can connect. Each manufacturer section shows the manufacturer’s logo and its device models. Each model shows:

An image and the model name, linked to the manufacturer’s product page when one is available.
The model numbers and the providers it connects through, for example “via Schlage Engage”.
A device type badge and a badge for each capability the model supports through Seam.

Visitors can search by model name, model number, manufacturer, device type, or provider, and filter by manufacturer, device type, and capability. A filter appears only when there is more than one option to choose from, and not when you fix that value with an attribute. When the list spans several manufacturers, each section shows five models with a button to show the rest.

Add Supported Devices to Your Page

<script
  type="module"
  src="https://react.seam.co/v/5.1.0/dist/ecosystem.js"
></script>

<seam-supported-devices
  embed-key="eco_live_your_embed_key"
  manufacturer="schlage"
></seam-supported-devices>

import { EcosystemProvider, SupportedDevices } from '@seamapi/react'

export function SupportedSchlageDevices() {
  return (
    <EcosystemProvider embedKey='eco_live_your_embed_key'>
      <SupportedDevices manufacturer='schlage' />
    </EcosystemProvider>
  )
}

See Before You Begin for how to get an embed key, and Add the Components to Your Site for Vue, Angular, and other frameworks.

How Your Embed Key Changes the List

With a manufacturer key, Supported Devices defaults to your brand. You can omit manufacturer entirely, and the title reads “Supported Brand devices”:

<seam-supported-devices
  embed-key="eco_live_your_manufacturer_embed_key"
></seam-supported-devices>

An explicit manufacturer attribute always wins over the key’s default. With an app (partner) key, Supported Devices hides what you have told Seam you do not support: excluded manufacturers and device types, and providers you do not support. When you also set capability, it hides the combinations you have excluded for that capability. To change what is excluded, email support@getseam.com.

Attributes

Attribute	Type	Default	Description
`manufacturer`	string	Your manufacturer key’s brand	A manufacturer slug, for example `schlage`. Shows only this manufacturer’s devices and hides the manufacturer filter.
`device-type`	string	—	A device type slug, for example `smartlock`, `thermostat`, or `intercom`. Shows only this type and hides the device type filter.
`capability`	string	—	A capability, for example `can_program_online_access_codes`. Shows only devices that support it and hides the capability filter.
`hide-search`	boolean	`false`	Hides the search field.
`hide-filters`	boolean	`false`	Hides the manufacturer, device type, and capability filters.
`hide-title`	boolean	`false`	Hides the title.
`theme`	string	`light`	`light`, `dark`, or `auto`. See Dark Mode.

In React, pass the same options as camel-cased props on SupportedDevices, for example deviceType, hideFilters, and hideSearch. Supported Devices also accepts the shared attributes: embed-key, class-name, disable-css-injection, disable-font-injection, and ecosystem-endpoint.

Set manufacturer or device-type whenever you can. The component loads every matching device model, so a narrower list loads faster.

Capabilities

Supported Devices shows a badge for each of these capabilities. They are the same capability flags the Seam API reports on a device, so you can also set capability to any of them.

Capability	Badge
`can_remotely_unlock`	Remote unlock
`can_remotely_lock`	Remote lock
`can_program_online_access_codes`	Access codes
`can_program_offline_access_codes`	Offline access codes
`can_provision_mobile_keys`	Mobile keys
`can_provision_wallet_keys`	Wallet keys
`can_encode_plastic_cards`	Key cards
`can_hvac_heat`	Heat
`can_hvac_cool`	Cool
`can_hvac_auto`	Heat and cool
`can_hvac_fan`	Fan
`can_program_thermostat_weekly_programs`	Weekly programs
`can_monitor`	Monitoring

When a model supports a capability only under certain conditions, its badge is styled differently, and hovering over it shows the details.

Examples

Show one manufacturer’s devices

<seam-supported-devices
  embed-key="eco_live_your_embed_key"
  manufacturer="yale"
></seam-supported-devices>

Show every supported thermostat

<seam-supported-devices
  embed-key="eco_live_your_embed_key"
  device-type="thermostat"
></seam-supported-devices>

Show devices that support mobile keys

<seam-supported-devices
  embed-key="eco_live_your_embed_key"
  device-type="smartlock"
  capability="can_provision_mobile_keys"
></seam-supported-devices>

Build a compact list

Hide the title and filters but keep the search field. Use this when your page already has its own heading.

<seam-supported-devices
  embed-key="eco_live_your_embed_key"
  manufacturer="schlage"
  hide-title
  hide-filters
></seam-supported-devices>

Dark Mode

Set theme="dark" to always use the dark theme, or theme="auto" to follow the visitor’s color scheme. Manufacturers that provide a logo for dark backgrounds show it in the dark theme.

<seam-supported-devices
  embed-key="eco_live_your_embed_key"
  manufacturer="schlage"
  theme="auto"
></seam-supported-devices>

Empty States

Message	Meaning
No supported devices found.	No device models match the attributes you set. Check the slugs.
No devices match your search or filters.	The visitor’s search or filter choices matched no devices. The component offers a Clear filters button.

For embed key and loading errors, see Troubleshooting.