🎨 Widget Customization

Brand Colors

Customize the primary color to match your brand identity. This affects the widget button, headers, and accent elements.

<script
  src="https://aether-support-api-1000644784414.us-central1.run.app/widget.js"
  data-app-id="your_app_id"
  data-api-key="your_api_key"
  data-primary-color="#8B5CF6"
  async
></script>

Widget Positioning

Control where the widget appears on your page. Choose from four corner positions.

<script
  src="https://aether-support-api-1000644784414.us-central1.run.app/widget.js"
  data-app-id="your_app_id"
  data-api-key="your_api_key"
  data-position="bottom-right"
  data-offset-x="20"
  data-offset-y="20"
  async
></script>

Light & Dark Themes

The widget supports both light and dark themes, and can automatically follow your site's theme.

<!-- Fixed theme -->
<script
  src="https://aether-support-api-1000644784414.us-central1.run.app/widget.js"
  data-theme="dark"
  async
></script>

<!-- Auto-detect from system preference -->
<script
  src="https://aether-support-api-1000644784414.us-central1.run.app/widget.js"
  data-theme="auto"
  async
></script>

Custom Messages

Personalize the welcome message and placeholder text to match your brand voice.

<script
  src="https://aether-support-api-1000644784414.us-central1.run.app/widget.js"
  data-app-id="your_app_id"
  data-api-key="your_api_key"
  data-welcome-message="Hi there! 👋 How can we help you today?"
  data-placeholder="Type your question..."
  data-bot-name="Support Bot"
  async
></script>

👤 User Identification

Identify logged-in users to personalize their experience, pre-fill ticket forms, and track conversations across sessions.

Method 1: Data Attributes (Simplest)

Add user info directly to the script tag. Best for server-rendered pages.

<script
  src="https://aether-support-api-1000644784414.us-central1.run.app/widget.js"
  data-app-id="your_app_id"
  data-user-id="user_123"
  data-user-email="john@example.com"
  data-user-name="John Doe"
  async
></script>

Method 2: JavaScript Config (For SPAs)

Set user info via JavaScript. Best for React, Vue, Next.js, and other SPAs where user data loads dynamically.

// Set before widget loads OR call identify() after
window.AetherSupportConfig = {
  user: {
    id: 'user_123',
    email: 'john@example.com',
    name: 'John Doe'
  }
};

// You can also call identify() at any time:
window.AetherSupport.identify({
  id: 'user_123',
  email: 'john@example.com',
  name: 'John Doe'
});

React/Next.js Example

// components/AetherSupportIdentify.tsx
'use client';
import { useEffect } from 'react';
import { useUser } from '@/context/UserContext';

export function AetherSupportIdentify() {
  const { userId, userEmail, userName } = useUser();

  useEffect(() => {
    if (userId && userEmail) {
      const user = { id: userId, email: userEmail, name: userName };

      // Set config (read during widget init)
      window.AetherSupportConfig = {
        ...window.AetherSupportConfig,
        user
      };

      // Also call identify (queued if widget not ready)
      window.AetherSupport?.identify(user);
    }
  }, [userId, userEmail, userName]);

  return null;
}

Custom CSS

For advanced styling, inject custom CSS to override default widget styles.

<style>
  /* Widget container */
  .aether-widget {
    font-family: 'Inter', sans-serif;
  }

  /* Launcher button */
  .aether-launcher {
    border-radius: 50%;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  }

  /* Chat header */
  .aether-header {
    border-radius: 16px 16px 0 0;
  }

  /* Message bubbles */
  .aether-message-bot {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  }
</style>

Advanced Options

Additional configuration options for power users.

<script
  src="https://aether-support-api-1000644784414.us-central1.run.app/widget.js"
  data-app-id="your_app_id"
  data-api-key="your_api_key"

  // Behavior
  data-auto-open="false"
  data-hide-branding="true"
  data-sound-enabled="true"

  // Visitor tracking
  data-user-id="user_123"
  data-user-email="user@example.com"
  data-user-name="John Doe"

  // Custom metadata
  data-custom='{"plan":"pro","company":"Acme"}'

  async
></script>