Compatible Apps

<seam-compatible-apps /> (preview)

Compatible Apps shows the apps that work with a device category through Seam. Narrow it to a manufacturer, a provider, or a capability to show the apps that support exactly that. A lock manufacturer can put it on a product page to answer “Which apps can I use with this lock?” without maintaining the list by hand. Each app appears as a card with its logo, name, and industries, and links to the app’s website. Featured apps come first, then the rest in alphabetical order. Visitors can search by app name, industry, or solution, and a Show more button reveals apps beyond the first 24. An app appears only where Seam or the app’s maker has declared support for that device category, manufacturer, provider, or capability. When you set provider or capability, each card also shows the app’s note about that support, if it has one.

Compatible Apps requires an embed key. See Before You Begin for how to get one and register your origins.

Add Compatible Apps to Your Page

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

<seam-compatible-apps
  embed-key="eco_live_your_embed_key"
  device-type="smartlock"
  manufacturer="schlage"
></seam-compatible-apps>

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

export function WorksWith() {
  return (
    <EcosystemProvider embedKey='eco_live_your_embed_key'>
      <CompatibleApps deviceType='smartlock' manufacturer='schlage' />
    </EcosystemProvider>
  )
}

For Vue, Angular, and other frameworks, see Add the Components to Your Site.

Attributes

Attribute	Type	Default	Description
`device-type`	string	—	Required. The device category, for example `smartlock`, `thermostat`, `sensor`, or `intercom`.
`manufacturer`	string	—	A manufacturer slug, for example `schlage`. Lists the apps that support this manufacturer’s devices.
`provider`	string	—	A provider slug, the cloud or system the devices connect through, for example `salto-ks`. Shows each app’s support note.
`capability`	string	—	A device capability, for example `can_provision_mobile_keys`. Shows each app’s support note.
`industry`	string	—	An industry slug, for example `short-term-rental`. Lists only apps in this industry.
`max-visible`	number	`24`	How many apps to show before the Show more button.
`hide-search`	boolean	`false`	Hides the search field.
`hide-title`	boolean	`false`	Hides the “Works with these apps” title.
`theme`	string	`light`	`light`, `dark`, or `auto`. See Dark Mode.

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

Examples

List all apps for a device category

<seam-compatible-apps
  embed-key="eco_live_your_embed_key"
  device-type="thermostat"
></seam-compatible-apps>

Show the apps for one manufacturer

Use this on a manufacturer’s product or integrations page.

<seam-compatible-apps
  embed-key="eco_live_your_embed_key"
  device-type="smartlock"
  manufacturer="yale"
></seam-compatible-apps>

Show the apps that support a capability through a provider

Set provider and capability together to list the apps that support, for example, mobile keys on Salto KS. Each card shows the app’s note about that support.

<seam-compatible-apps
  embed-key="eco_live_your_embed_key"
  device-type="smartlock"
  provider="salto-ks"
  capability="can_provision_mobile_keys"
></seam-compatible-apps>

Show apps for one industry

<seam-compatible-apps
  embed-key="eco_live_your_embed_key"
  device-type="thermostat"
  industry="short-term-rental"
></seam-compatible-apps>

Build a compact list

Hide the title and search field, and show six apps before the Show more button. Use this when your page already has its own heading.

<seam-compatible-apps
  embed-key="eco_live_your_embed_key"
  device-type="smartlock"
  manufacturer="schlage"
  hide-title
  hide-search
  max-visible="6"
></seam-compatible-apps>

Dark Mode

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

<seam-compatible-apps
  embed-key="eco_live_your_embed_key"
  device-type="smartlock"
  theme="auto"
></seam-compatible-apps>

Empty States

Message	Meaning
Set a device type to list compatible apps.	`device-type` is missing or empty.
No apps are listed for this selection yet.	No app has declared support for this combination of attributes. Check the slugs, or remove `provider`, `capability`, or `industry` to widen the list.
No apps found for ”…”.	The visitor’s search matched no apps. The component offers a Clear search button.

For embed key and loading errors, see Troubleshooting.

Next Steps

Show the devices that work with Seam with Supported Devices.
Set up your embed key, framework, and Content Security Policy in Ecosystem Components.
Try the component with sample data in the interactive component library.

If you have questions or want to report an issue, email support@getseam.com.

Getting Started

Use Cases

Core Concepts

Capability Guides

UI Components

Developer Tools

Industry Guides

Device Manufacturer Guidance

Low-Level APIs

Compatible Apps

<seam-compatible-apps /> (preview)

Add Compatible Apps to Your Page

Attributes

Examples

List all apps for a device category

Show the apps for one manufacturer

Show the apps that support a capability through a provider

Show apps for one industry

Build a compact list

Dark Mode

Empty States

Next Steps

​<seam-compatible-apps /> (preview)

​Add Compatible Apps to Your Page

​Attributes

​Examples

​List all apps for a device category

​Show the apps for one manufacturer

​Show the apps that support a capability through a provider

​Show apps for one industry

​Build a compact list

​Dark Mode

​Empty States

​Next Steps

<seam-compatible-apps /> (preview)

Add Compatible Apps to Your Page

Attributes

Examples

List all apps for a device category

Show the apps for one manufacturer

Show the apps that support a capability through a provider

Show apps for one industry

Build a compact list

Dark Mode

Empty States

Next Steps