Quickstart

Texture makes your energy systems visible, responsive, and connected—without rebuilding your stack. It works with your existing infrastructure—no migration, no disruptions. Start with a single integration or use case, and expand as you go.

Introduction

This guide will walk you through the process of generating a link that allows your customers to connect their devices with Texture.

Generate a setup link

There are three ways to generate a link:

The Texture API
The Texture SDK (Javascript, React, or React Native)
The Texture Dashboard

Texture API and SDK

Get Your API Key

Go to the Texture Dashboard and click the Developer sidebar link to obtain an API key

Generate a link

Node v18 + required

#!/usr/bin/env node
 
const textureApiUrl = "https://api.texturehq.com";
const apiKey = process.env.TEXTURE_API_KEY || "<your-api-key-goes-here>";
 
console.log(`Using API key: ${apiKey}`);
 
// Node v18 has fetch built in
fetch("https://api.texturehq.com/v1/connections", {
  method: "POST",
  headers: {
    "Content-Type": "application/json",
    "Texture-Api-Key": apiKey,
  },
  body: JSON.stringify({
    referenceId: "9bb290c8-fe97-46ce-92a8-952823164277",
    redirectUrl: "http://localhost:8000",
    tags: ["tag1", "tag2"],
    clientName: "Energy Demo"
    customerInfo: {
      email: "example@example.com",
      phone: "555-555-0100",
      firstName: "John",
      lastName: "Doe",
    },
  }),
})
  .then((response) => {
    if (response.ok) {
      return response.json();
    }
    throw new Error(
      `Failed to make request: ${response.status}, ${response.statusText}`
    );
  })
  .then((responseJSON) => {
    console.log(responseJSON);
  })
  .catch((error) => {
    console.error("Failed to make request", error);
  });

url = "https://api.texturehq.com/v1/connections"

headers = { "Texture-Api-Key": "", "Content-Type": "application/json", }

data = { "referenceId": "9bb290c8-fe97-46ce-92a8-952823164277", "redirectUrl": "http://localhost:8000", "tags": ["tag1", "tag2"], "clientName": "Energy Demo", "customerInfo": { "email": "example@example.com", "phone": "555-555-0100", "firstName": "John", "lastName": "Doe", }, }

response = requests.post(url, headers=headers, json=data)

if response.status_code == 200: print("Successfully sent POST request.") print("Response:", response.json()) else: print(f"Failed to send POST request. Status code: {response.status_code}") print("Response:", response.text)

</TabItem>

<TabItem value="js-sdk" label="JavaScript SDK">

Install using npm:
``` bash
$ npm install @texturehq/connect-sdk

Or, install using yarn:

$ yarn add @texturehq/connect-sdk

Create a button to generate a setup link:

 
const texture = createConnectSession({
  connectApiKey: "<your-api-key-goes-here>",
  connectOptions: {
    referenceId: "9bb290c8-fe97-46ce-92a8-952823164277",
    clientName: "Name for your application",
    redirectUrl: "http://localhost:8000",
    tags: ["tag1", "tag2"],
    manufacturerFilters: { manufacturers: ['honeywell', 'daikin'] },
    customerInfo: {
      email: "example@example.com",
      phone: "555-555-0100",
      firstName: "John",
      lastName: "Doe",
    },
  },
  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
  },
});
 
document.querySelector("#app").innerHTML = `
  <div>
      <button id="texture-connect" type="button">Connect device(s) with Texture</button>
  </div>
`;
 
const textureConnectButton = document.querySelector("#texture-connect");
textureConnectButton.addEventListener("click", () =>
  texture.open({
    width: 600,
    height: 800,
  })
);

Install using npm:

$ npm install @texturehq/react-connect-sdk

Or, install using yarn:

$ yarn add @texturehq/react-connect-sdk

Create a button to generate a setup link:

 
function App() {
  const { open } = useCreateConnectSession({
    connectApiKey: "<your-api-key-goes-here>",
    connectOptions: {
      referenceId: "9bb290c8-fe97-46ce-92a8-952823164277",
      clientName: "Name for your application",
      redirectUrl: "http://localhost:8000",
      tags: ["tag1", "tag2"],
      manufacturerFilters: { manufacturers: ['honeywell', 'daikin'] },
      customerInfo: {
        email: "example@example.com",
        phone: "555-555-0100",
        firstName: "John",
        lastName: "Doe",
      },
    },
    onSuccess: (session) => {
      console.log(session);
    },
    onError: (error) => {
      console.log(error);
    },
  });
 
  return (
    <>
      <div className="card">
        <div style={{ display: 'flex', justifyContent: 'center' }}>
          <button onClick={() => open()}>Open Texture</button>
        </div>
      </div>
    </>
  );
}
 
export default App;

Install using npm:

$ npm install @texturehq/react-native-connect-sdk

Or, install using yarn:

$ yarn add @texturehq/react-native-connect-sdk

Create a button to generate a setup link:

To do this, wrap TextureConnect around a component, and your component will become a button that opens the Connect flow from your React Native code.

//...
  return (
    <GestureHandlerRootView style={styles.container}>
      <TextureConnect 
          connectApiKey="<your-api-key-goes-here>"
          connectOptions={{
            clientName: 'Texture Connect',
            referenceId: '123',
            redirectUrl: 'exp+react-native-example://',
            manufacturerFilters: { manufacturers: ['honeywell', 'daikin'] },
          }}
          onError={(type, reason) => console.log(type, reason)}
          onSuccess={(scopedKey) => console.log("Texture Scoped Key", scopedKey)}
        >
        <Text>Texture Connect</Text>
      </TextureConnect>
      <StatusBar style="auto" />
    </GestureHandlerRootView>
  );

Texture Dashboard

Go to the Texture Dashboard.
Enter the user's information.
Click submit.

Dashboard Link

Customer Device Connect Flow

Once the user follows the link or is prompted to set up their device, they will be guided through the Texture Connect flow. This process is designed to be user-friendly and intuitive. Here's what the user can expect:

Welcome Screen: The user is greeted with a welcome screen that introduces the connection process.
User Information: The user enters their name, contact, and address information.
Device Set Up: The user selects their device manufacturer, signs into their account, and selects devices to connect.
Success: The user's device is set up! When they click continue they will be sent to the redirectUrl you provided.