Embed Texture Connect

curl -X POST https://api.texturehq.com/v1/connections \
  -H "Content-Type: application/json" \
  -H "Texture-Api-Key: your_api_key" \
  -d '{
    "mode": "headless",
    "manufacturerFilters": { "manufacturers": ["tesla"] },
    "customerId": "cllh2buhk000008la0ln6cb80",
    "siteId": "cllh2buhk000008la0ln6cb81",
    "redirectUrl": "https://yourapp.com/oauth/callback"
  }'

curl -X POST https://api.texturehq.com/v1/connections \
  -H "Content-Type: application/json" \
  -H "Texture-Api-Key: your_api_key" \
  -d '{
    "mode": "headless",
    "manufacturerFilters": { "manufacturers": ["tesla"] },
    "customerInfo": {
      "firstName": "Jane",
      "lastName": "Smith",
      "email": "jane@example.com",
      "location": {
        "streetOne": "123 Main St",
        "city": "Austin",
        "state": "TX",
        "postalCode": "78701",
        "country": "US"
      }
    },
    "redirectUrl": "https://yourapp.com/oauth/callback"
  }'

{
  "customerId": "cllh2buhk000008la0ln6cb80",
  "linkUrl": "https://connect.texturehq.com/link_...",
  "linkToken": "link_e47b6d39dd3e6b3ab55969f55dc88ae6",
  "linkSessionId": "cllh2buhk000008la0ln6cb82",
  "expiresAt": "2026-04-20T12:30:00Z",
  "siteId": "cllh2buhk000008la0ln6cb81",
  "authorization": {
    "type": "oauth_redirect",
    "url": "https://auth.tesla.com/oauth2/v3/authorize?client_id=..."
  }
}

const params = new URLSearchParams(window.location.search);
const error = params.get("texture_error");
 
if (error) {
  const errorRaw = params.get("texture_error_raw"); // only present when error === "unknown_error"
  console.error("OAuth failed:", error, errorRaw);
} else {
  const scopedKey = params.get("texture_scoped_key");
  const customerId = params.get("texture_customer_id");
  // Store scopedKey securely and use it for subsequent API calls
}

<script src="https://unpkg.com/@texturehq/connect-sdk@0.8.1/dist/connect-sdk.iife.js"></script>

import { createConnectSession } from "@texturehq/connect-sdk";
 
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",
    tags: ["tag1", "tag2"],
    manufacturerFilters: { manufacturers: ['honeywell', 'daikin'] },
    customerInfo: {
      email: "example@example.com",
      phone: "555-555-0100",
      firstName: "John",
      lastName: "Doe",
    },
  },
  onSuccess: ({ scopedKey }) => {
    // Send scopedKey to your backend and store it — do not log it.
    // It is a bearer token for this customer's devices. See /api/scoped-keys.
  },
  onError: ({ type, reason }) => {
    // type 'popup-blocked' — popup window was blocked
    // type 'popup-closed' — user closed popup before completing the flow
  },
});
 
// Open the popup
texture.open();
 
// Optional: control popup dimensions
texture.open({ width: 500, height: 600 });
 
// Close programmatically
texture.close();
 
// Get the connect URL
const url = texture.url;

import { useCreateConnectSession } from "@texturehq/react-connect-sdk";
 
function App() {
  const { open } = useCreateConnectSession({
    connectApiKey: "<connect-api-key>",
    connectOptions: {
      referenceId: "<reference-id-from-your-system>",
      clientName: "Name for your application",
      redirectUrl: "https://your-application.com/redirect",
      tags: ["tag1", "tag2"],
      manufacturerFilters: { manufacturers: ['honeywell', 'daikin'] },
      customerInfo: {
        email: "example@example.com",
        phone: "555-555-0100",
        firstName: "John",
        lastName: "Doe",
      },
    },
    onSuccess: ({ scopedKey }) => {
      // Send scopedKey to your backend and store it against the customer record.
      // It is a bearer token scoped to this customer's devices — see /api/scoped-keys.
    },
    onError: ({ type, reason }) => {
      // type 'popup-blocked' — popup window was blocked
      // type 'popup-closed' — user closed popup before completing the flow
    },
  });
 
  return (
    <button onClick={() => open()}>Connect your device</button>
  );
}

import { TextureConnect } from '@texturehq/react-native-connect-sdk';
import { Text } from 'react-native';
import { GestureHandlerRootView } from 'react-native-gesture-handler';
 
export default function ConnectScreen() {
  return (
    <GestureHandlerRootView style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
      <TextureConnect
          connectApiKey="<YOUR_CONNECT_API_KEY>"
          connectOptions={{
            clientName: 'Name for your application',
            referenceId: '123',
            redirectUrl: 'example://',
            manufacturerFilters: { manufacturers: ['honeywell', 'daikin'] },
            customerInfo: {
              email: "example@example.com",
              phone: "555-555-0100",
              firstName: "John",
              lastName: "Doe",
            },
          }}
          onError={(type, reason) => { /* handle error */ }}
          onSuccess={(scopedKey) => { /* send scopedKey to your backend — do not log */ }}
        >
            <Text>Tap here to connect a device.</Text>
        </TextureConnect>
    </GestureHandlerRootView>
  );
}