Customizing Connect Webviews

You can customize the look and feel, brand list, and behavior of your Connect Webviews.

You can use Seam Console to customize the Connect Webviews that you present to your users through your app.

You can customize the following characteristics of your Connect Webviews:

Look and feel
Brands (manufacturers) to display
Device types (capabilities) to connect
Behavior settings, including automatically_manage_new_devices and wait_for_device_creation

Customize the Look and Feel of Your Connect Webviews

You can customize the look and feel of your Connect Webviews in the following ways:

Inviter name: Define the name to display in your Connect Webviews as the entity requesting user authorization for Seam to access their device or access control system account.
Logo: Choose a logo for your Connect Webviews. Ensure that the image file size does not exceed 1 MB.
Logo shape: Select the shape of your logo displayed in Connect Webviews. Choices are Circle (default) or Square.
Primary button style: Customize the background and text colors of the action button in your Connect Webview flow using a hex color code. The default color is #232426, which is almost black, and the default text color on the button is white.
Success message: Customize the message that the Connect Webview displays when the connection completes successfully.

It is important to note that any changes you make to the customization features will apply to all of your new Connect Webviews.

You can customize the look and feel of Connect Webviews.

To customize the look and feel of your Connect Webviews:

In the top navigation pane of Seam Console, click Developer.
In the left navigation pane, click Webviews.
On the Webviews page, click Configure your webview.
In the Customize your Webview pane, configure any of the following features:
Feature
Instructions
Inviter name
In the Inviter Name area, click Edit.
Type the desired inviter name and then click Save.
Logo
In the Logo area, click Upload new logo.
Navigate to and select the image file that contains the desired logo. The image file size cannot exceed 1 MB.
Click Open.
Logo shape
In the Logo Shape area, click Edit.
Select Circle or Square and then click Save.
Primary button style
In the Primary Button Style area, click Edit.
Click the Button Background Color field and specify the desired color. Default: #232426 (almost black).
Click the Button Text Color field and specify the desired color. Default: #ffffff (white).
Click Save.
Success message
In the Success Message area, click Edit.
In the Message field, type the desired success message.
To reset the success message, click Clear.
Click Save.

Customize the Brands to Display in Your Connect Webviews

When you create a Connect Webview, you can customize the providers—that is, the brands—that it displays. In the Create Connect Webview request, include the desired set of device provider keys in the accepted_providers parameter. Seam supports the following device provider keys:

Provider Name

Device Provider Key

my_2n

four_suites

akiles

akuvox

assa_abloy_credential_service

visionline

august

avigilon_alta

brivo

controlbyweb

doorking

dormakaba_oracode

ecobee

genie

honeywell_resideo

igloohome

kwikset

latch

linear

lockly

minut

google_nest

noiseaware

nuki

pti

salto_ks

salto_space

schlage

sensi

smartthings

tedee

ttlock

wyze

yale

To help you decide which providers to include in a Connect Webview, you can use the List Device Providers method to learn about each provider. The information that this method returns for each provider includes a set of capability flags, such as device_provider.can_remotely_unlock. If at least one supported device from a provider has a specific capability, the corresponding capability flag is true.

If you omit the accepted_providers parameter, the Connect Webview displays all of the stable providers that Seam supports, by default. For more information about provider categories, see Step 1: Create a Connect Webview.

The following Connect Webview creation request specifies that the Connect Webview should only display August and Schlage:

Request:

seam.connect_webviews.create(
  accepted_providers = ["august", "schlage"]
)

Response:

ConnectWebview(
  connect_webview_id='1139e5a5-4bfd-4c78-9a89-83a439ad538e',
  status='pending',
  url='https://connect.getseam.com/connect_webviews/view?connect_webview_id=1139e5a5-4bfd-4c78-9a89-83a439ad538e&auth_token=5g6Nt1sunJamS1huj7pwztKaMaBpvKhLc',
  accepted_providers=[
    'august',
    'schlage'
  ],
  ...
 )

Request:

curl -X 'POST' \
  'https://connect.getseam.com/connect_webviews/create' \
  -H 'accept: application/json' \
  -H 'Authorization: Bearer ${API_KEY}' \
  -H 'Content-Type: application/json' \
  -d '{
  "accepted_providers": [
    "august",
    "schlage"
  ]
}'

Response:

{
  "connect_webview": {
    "connect_webview_id": "1139e5a5-4bfd-4c78-9a89-83a439ad538e",
    "status": "pending",
    "url": "https://connect.getseam.com/connect_webviews/view?connect_webview_id=f5fa50b8-b7e3-45ed-b636-354c17df5d8a&auth_token=6w2tZqeYN4xEYcMf8ySsGgpwFAQgET6Lb",
    "accepted_providers": [
      "august",
      "schlage"
    ],
    ...
  },
  "ok": true
}

Request:

await seam.connectWebviews.create({
  accepted_providers: ["august", "schlage"]
})

Response:

{
  connect_webview_id: '1139e5a5-4bfd-4c78-9a89-83a439ad538e',
  status: 'pending',
  url: 'https://connect.getseam.com/connect_webviews/view?connect_webview_id=8cf491d8-cf67-4ad0-907d-3a8ae3764019&auth_token=C4vLHdKqpMavg6HYBbejQkE1dZ8KDcetS',
  accepted_providers: [
    'august',
    'schlage'
  ],
  ...
}

Request:

client.connect_webviews.create(
  accepted_providers: ["august", "schlage"]
)

Response:

<Seam::ConnectWebview:0x00438
  connect_webview_id="1139e5a5-4bfd-4c78-9a89-83a439ad538e"
  status="pending"
  url="https://connect.getseam.com/connect_webviews/view?connect_webview_id=f3d344bb-e506-4f70-bc9d-8d78c307c324&auth_token=C1e5tgjokyrrQ1mQj9YUdSW8BxHs98D7P"
  accepted_providers=[
    "august",
    "schlage"
  ]
  ...
>

Request:

List<Seam.Api.ConnectWebviews.CreateRequest.AcceptedProvidersEnum> acceptedProviders = new() {
  Seam.Api.ConnectWebviews.CreateRequest.AcceptedProvidersEnum.August,
  Seam.Api.ConnectWebviews.CreateRequest.AcceptedProvidersEnum.Schlage
};

seam.ConnectWebviews.Create(
  acceptedProviders: acceptedProviders
);

Response:

{
  "connect_webview_id": "f69fa3b8-c89d-4fd4-b6fc-feb456d07234",
  "status": "pending",
  "url": "https://connect.getseam.com/connect_webviews/view?connect_webview_id=f69fa3b8-c89d-4fd4-b6fc-feb456d07234&auth_token=MCh7Vm2fnvyiPhtjB8Lemqr93aeHXhJhM",
  "accepted_providers": [
    "august",
    "schlage"
  ],
  ...
}

Request:

seam.connectWebviews().create(ConnectWebviewsCreateRequest.builder()
  .acceptedProviders(List.of(
    AcceptedProvider.AUGUST,
    AcceptedProvider.SCHLAGE))
  .build());

Response:

{
  "connect_webview_id" : "172c1d65-8904-4d43-9eee-099780ba6558",
  "status": "pending",
  "url" : "https://connect.getseam.com/connect_webviews/view?connect_webview_id=172c1d65-8904-4d43-9eee-099780ba6558&auth_token=7hpz4wGsaphJmBcs2TKr4H3ZkGgmqpPma",
  "accepted_providers" : [
    "august",
    "schlage"
  ],
  ...
}

Customize the Types of Devices to Connect

Currently, the only provider that supports multiple device types is SmartThings.

Some providers support multiple device types, like smart locks and thermostats. To specify which types of devices your users can connect to Seam for a provider that supports multiple device types, use the accepted_capabilities parameter when creating a Connect Webview. This parameter is especially applicable when the Connect Webview automatically_manage_new_devices parameter is true. Set accepted_capabilities to an array containing one or more of the following values to indicate the capabilities of the devices that the Connect Webview can accept:

lock
thermostat
noise_sensor

Seam maintains a default value for this parameter for each provider. For example, for SmartThings, the default value for accepted_capabilities is ["locks"]. To begin accepting SmartThings-connected thermostats, as well as locks, set accepted_capabilities to ["locks", "thermostats"]. For Honeywell Resideo, the default value is ["thermostats"].

Customize the Behavior Settings of Your Connect Webviews

You can use the following two properties to customize the behavior of your Connect Webviews:

You configure these properties when you are creating the Connect Webview. Consequently, you can customize these two characteristics for each of your Connect Webviews.

`automatically_manage_new_devices`

Seam charges fees for different parts of the API, like connecting a device, creating an access code or thermostat schedule, and creating an access control system user. To learn more, contact our team. You can exclude specific devices from your bill by marking them as "unmanaged."

The default value for automatically_manage_new_devices is true. Consequently, by default, Seam imports all devices and makes them available for use. However, if you set this property to false, Seam sets the is_managed property for all new devices to false (that is, unmanaged) when a user first connects their account to Seam.

`wait_for_device_creation`

This property enables you to specify whether Seam should finish syncing all devices in a newly-connected account before completing the associated Connect Webview.

The default value for wait_for_device_creation is false. If wait_for_device_creation is false, you should wait for connected_account.completed_first_sync before retrieving your devices. This event indicates that Seam has finished the first sync of the connected account, and the connected devices are available.

Alternately, if you set wait_for_device_creation to true, Seam finishes syncing all devices in the newly-connected account before proceeding to the final page of the Connect Webview. In this case, you can fetch your devices immediately upon the completion of the Connect Webview.

PreviousFiltering Connect Webviews by Custom Metadata NextDevices

Last updated 10 days ago

Was this helpful?