Make a Supported Devices Page

Use Seam Components to make a Supported Devices page

PreviousConnect Account Button NextUsing User Identities to Scope Users' Device Access

Last updated 10 months ago

Was this helpful?

Make a Supported Devices Page

Use Seam Components to make a Supported Devices page

Overview

Seam adds supports for smart devices every week and by integrating with Seam, you get access to these new devices too!

This guide will show you how to add a to your website or application. You can use plain HTML, React, or any framework that supports web components.

1 - Get a Publishable Key from the Seam Console

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.

Go to and select "Client Sessions" from the sidebar. You should then see a "Publishable Key" that you can copy.

2 — Add Seam Components

Seam Components are implemented in React, but may be used as native web components.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>Seam Components</title>
  </head>
  <body>
    <main>
      <seam-supported-device-table
        publishable-key="your_publishable_key"
      ></seam-supported-device-table>
    </main>
    <script
      type="module"
      src="https://react.seam.co/v/1.42.1/dist/elements.js"
    ></script>
  </body>
</html>

Install @seamapi/react in your React application

npm install --save @seamapi/react

Add the components anywhere in your React app

import { SupportedDeviceTable, SeamProvider } from "@seamapi/react"

export const App = () => {
  return (
    <SeamProvider publishableKey="your_publishable_key">
      <main>
        <SupportedDeviceTable />
      </main>
    </SeamProvider>
  )
}

Install @seamapi/react in your application

npm install --save @seamapi/react

Then import the custom elements bundle in your application entrypoint:

import "@seamapi/react/elements.js"

<seam-supported-device-table publishable-key="your_publishable_key"></seam-supported-device-table>

You should see a list of device models like what's shown below:

Next Steps

If you have any questions or want to report an issue, email us at support@seam.co.