Aether Support JavaScript SDK

The official JavaScript/TypeScript SDK for integrating Aether Support into your applications.

Installation

npm install @aether-support/sdk
# or
yarn add @aether-support/sdk
# or
pnpm add @aether-support/sdk

Quick Start

Vanilla JavaScript

import { createAetherSupport } from '@aether-support/sdk';

const support = createAetherSupport({
  appId: 'your-app-id',
  user: {
    email: '[email protected]',
    name: 'John Doe',
    plan: 'pro',
  },
});

// Initialize the widget
support.init();

// Open the support widget
support.open();

// Close the widget
support.close();

// Update user information
support.identify({
  email: '[email protected]',
  metadata: { company: 'Acme Inc' },
});

React

import { AetherProvider, useAetherSupport, SupportButton, useTickets } from '@aether-support/sdk/react';

function App() {
  return (
    <AetherProvider
      config={{
        appId: 'your-app-id',
        position: 'bottom-right',
        theme: 'auto',
      }}
    >
      <YourApp />
    </AetherProvider>
  );
}

function SupportSection() {
  const { open, identify } = useAetherSupport();
  const { tickets, loading, createTicket } = useTickets(authToken);

  // Identify user on login
  useEffect(() => {
    identify({
      email: user.email,
      name: user.name,
      plan: user.subscription,
    });
  }, [user]);

  return (
    <div>
      <SupportButton>Need Help?</SupportButton>

      {/* Or programmatically */}
      <button onClick={open}>Open Support</button>

      {/* Display tickets */}
      {loading ? (
        <p>Loading tickets...</p>
      ) : (
        <ul>
          {tickets.map((ticket) => (
            <li key={ticket.ticket_id}>{ticket.subject}</li>
          ))}
        </ul>
      )}
    </div>
  );
}

Script Tag (CDN)

<script src="https://cdn.aether-support.com/sdk/v1/aether-support.min.js"></script>
<script>
  const support = new AetherSupport({
    appId: 'your-app-id',
  });
  support.init();
</script>

Configuration Options

| Option | Type | Default | Description | |--------|------|---------|-------------| | appId | string | Required | Your Aether Support App ID | | apiUrl | string | Production URL | Custom API endpoint | | user | object | undefined | Pre-fill user information | | position | 'bottom-right' \| 'bottom-left' | 'bottom-right' | Widget position | | primaryColor | string | App default | Custom primary color | | theme | 'light' \| 'dark' \| 'auto' | 'auto' | Theme mode | | onOpen | () => void | undefined | Callback when widget opens | | onClose | () => void | undefined | Callback when widget closes | | onMessageSent | (message: string) => void | undefined | Callback when message is sent | | onTicketCreated | (ticketId: string) => void | undefined | Callback when ticket is created |

API Methods

Widget Control

// Open the widget
support.open();

// Close the widget
support.close();

// Toggle the widget
support.toggle();

User Identification

// Identify user
support.identify({
  id: 'user-123',
  email: '[email protected]',
  name: 'John Doe',
  plan: 'enterprise',
  metadata: {
    company: 'Acme Inc',
    role: 'Admin',
  },
});

// Clear user data (logout)
support.logout();

Ticket Management

// Get user's tickets
const tickets = await support.getTickets(authToken);

// Get specific ticket
const ticket = await support.getTicket(authToken, 'ticket-id');

// Create new ticket
const newTicket = await support.createTicket(authToken, {
  subject: 'Help needed',
  description: 'I need assistance with...',
  category: 'technical',
});

// Reply to ticket
const updatedTicket = await support.replyToTicket(authToken, 'ticket-id', {
  content: 'Thanks for the response!',
});

Cleanup

// Remove widget and cleanup
support.destroy();

React Hooks

useAetherSupport()

Access the SDK instance and widget controls.

const { sdk, isLoaded, open, close, toggle, identify, logout } = useAetherSupport();

useTickets(token)

Manage user tickets with built-in loading states.

const {
  tickets,      // Ticket[]
  loading,      // boolean
  error,        // Error | null
  refetch,      // () => Promise<void>
  createTicket, // (request) => Promise<Ticket>
  replyToTicket // (ticketId, request) => Promise<Ticket>
} = useTickets(authToken);

TypeScript Support

The SDK is written in TypeScript and provides full type definitions:

import type {
  AetherConfig,
  Ticket,
  TicketMessage,
  CreateTicketRequest,
  ReplyRequest,
} from '@aether-support/sdk';

License

MIT