diff --git a/docs/guides/SUMMARY.md b/docs/guides/SUMMARY.md index 5b6e805c2..a65268b53 100644 --- a/docs/guides/SUMMARY.md +++ b/docs/guides/SUMMARY.md @@ -148,7 +148,6 @@ * [Update Access Code Form](ui-components/overview/react-components/update-access-code-form.md) * [Seam Provider](ui-components/overview/react-components/seam-provider.md) * [Connect Account Button](ui-components/overview/react-components/connect-account-button.md) - * [Make a Supported Devices Page](ui-components/overview/make-a-supported-devices-page.md) * [Using User Identities to Scope Users' Device Access](ui-components/overview/using-user-identities-to-scope-users-device-access.md) * [Seam Mobile Components](ui-components/seam-mobile-components/README.md) * [Seam Mobile Components for iOS](ui-components/seam-mobile-components/seam-mobile-components-for-ios/README.md) diff --git a/docs/guides/ui-components/overview/make-a-supported-devices-page.md b/docs/guides/ui-components/overview/make-a-supported-devices-page.md deleted file mode 100644 index af6d373d5..000000000 --- a/docs/guides/ui-components/overview/make-a-supported-devices-page.md +++ /dev/null @@ -1,123 +0,0 @@ ---- -description: >- - Embed the Seam Custom Device Database web component to show a filterable list - of compatible devices on your site ---- - -# Make a Supported Devices Page - -
- -## 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](https://github.com/seamapi/custom-device-db-web). 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. - -{% hint style="warning" %} -**Migrating from the previous version?** The earlier `` component has been retired and will no longer load. If your site embeds it today, replace it with `` as shown below. -{% endhint %} - -## 1 — Request an API Token - -The `` component reads from Seam's Custom Device Database, which requires an API token. Email [support@seam.co](mailto:support@seam.co) to request a token for your workspace. - -## 2 — Add the Component - -{% tabs %} -{% tab title="Plain HTML" %} -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. - -```html - - - - - - Supported Devices - - -
- -
- - - -``` -{% endtab %} - -{% tab title="Any JavaScript Framework" %} -Because `` 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`): - -```html - -``` - -Then render the element wherever you need the device list: - -```html - -``` - -Some frameworks require additional configuration to enable web component support. Refer to your framework's documentation — for example, the [Vue web components guide](https://vuejs.org/guide/extras/web-components.html) or Angular's `CUSTOM_ELEMENTS_SCHEMA`. -{% endtab %} -{% endtabs %} - -{% hint style="warning" %} -**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](https://github.com/seamapi/custom-device-db-web/releases) for available versions. -{% endhint %} - -## 3 — Configure the Component - -The `` element accepts the following attributes: - -| Attribute | Type | Default | Description | -| -------------------- | ------- | ------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | -| `capability-name` | string | — | **Required.** Comma-separated [Seam capability flag names](../../capability-guides/device-and-system-capabilities.md), 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. - -```html - -``` - -### Filter to specific manufacturers - -```html - -``` - -## Next Steps - -* Browse live examples in the [interactive component storybook](https://seamapi.github.io/custom-device-db-web). - -If you have any questions or want to report an issue, email us at [support@seam.co](mailto:support@seam.co).