Connect Web SDK

The Connect Web SDK is a JavaScript library that allows you to easily integrate the Texture Connect flow into your web-based applications.

It works by opening a popup window that houses the Texture Connect flow and allows the user to authorize access to their devices. After a successful connection is established it then returns control back to your application along with a scoped key that can be used to make requests to the Texture API to retrieve data related to the newly connected account.

In the event that a popup window cannot be opened, the SDK will let you know via the onError handler so that you can fallback to redirecting the user directly to the hosted Texture Connect flow instead. In the event that this happens it would be recommended to provide a redirectUrl when creating the link session so that the user is redirected back to your application after a successful connection is established.

Installation

The Connect Web SDK is available via yarn/npm.

npm

npm install @texturehq/connect-sdk

yarn

yarn add @texturehq/connect-sdk

Usage

Pre-requisites

You will first need to create a Connect Api key to pass into the SDK. This can be done via the Texture Dashboard.

Example

import { createConnectSession } from "@texturehq/connect-sdk-web";

const texture = createConnectSession({
  connectApiKey: "<connect-api-key>",
  connectOptions: {
    referenceId: "<reference-id-from-your-system>",
    clientName: "Name for your application",
    redirectUrl: "https://your-application.com/redirect",
    email: "[email protected]",
    phone: "555-555-5555",
    tags: ["tag1", "tag2"],
    manufacturerFilters: { manufacturers: ["honeywell", "daikin"] },
  },
  onSuccess: ({ scopedKey }) => {
    // The scopedKey returned is a string that can be used to make requests to Texture API
    // to retrieve data related to the newly connected account
  },
  onError: ({ type, reason }) => {
    // The error object contains a type and reason
    // type is identifier for the type of error that occurred
    // reason is a string that provides more information about the error
    // type 'popup-blocked' means that the popup window was blocked from opening
    // type 'popup-closed' means that the popup window was closed before the connection was established
  },
});

// Open the popup window
texture.open();

// You can also pass in options when opening the popup window
texture.open({
  width: 500,
  height: 600,
});

// Close the popup window
texture.close();

// Get the current link/connect url
console.log(texture.url);

// Get the current scoped key (only available after a successful flow is completed)
console.log(texture.scopedKey);