Atoms Widget SDK

A React-based widget SDK for seamlessly integrating Atoms AI chat and voice functionality into web applications. Built with TypeScript and modern React patterns for enterprise-grade reliability.

Features

$3

- Real-time Chat: Full-featured chat implementation with typing indicators and message history
- Voice Calling: Complete voice conversation support
- Dual Integration: React component for modern frameworks and HTML custom element for vanilla projects
- TypeScript First: Full type safety with comprehensive IntelliSense support
- Responsive Design: Adaptive UI that works across all device sizes

$3

- Flexible Positioning: 4 position options (bottom-right, bottom-left, top-right, top-left)
- Size Variants: Tiny, compact, and full-size layouts
- Color Theming: Complete color customization for branding consistency
- Consent Management: Built-in privacy consent flow with customizable content

Installation

$3

``bash
npm install atoms-widget-core
`

`jsx
import { AtomsWidget } from "atoms-widget-core";

function App() {
return (
assistantId="your-assistant-id"
mode="chat"
position="bottom-right"
size="full"
accentColor="#2d9d9f"
title="AI Assistant"
chatPlaceholder="How can I help you today?"
/>
);
}
`

$3

`html






assistant-id="your-assistant-id"
mode="chat"
position="bottom-right"
size="full"
accent-color="#2d9d9f"
base-color="#ffffff"
cta-button-color="#000000"
cta-button-text-color="#ffffff"
title="AI Assistant"
chat-placeholder="How can I help you today?"
>


`

⚙️ Configuration

$3

| Property | Type | Description |
| ------------- | -------- | ----------------------- |
| assistantId | string | Your Atoms assistant ID |

$3

| Property | Type | Default | Description |
| -------------- | --------------------------------------------------------------------------------- | ---------------- | ----------------------- |
| mode | "chat" \| "voice" | "chat" | Interaction mode |
| position | "bottom-right" \| "bottom-left" \| "top-right" \| "top-left" | "bottom-right" | Widget position |
| size | "tiny" \| "compact" \| "full" | "full" | Widget size |
| borderRadius | number | 16 | Border radius in pixels |

$3

| Property | Type | Default | Description |
| -------------------- | -------- | ----------- | -------------------------------- |
| baseColor | string | "#ffffff" | Background color |
| accentColor | string | "#2d9d9f" | Primary accent color |
| ctaButtonColor | string | "#000000" | CTA button background |
| ctaButtonTextColor | string | "#ffffff" | CTA button text color |
| agentBubbleColor | string | "#F3F4F6" | Agent message bubble color |
| textOnAccentColor | string | "#ffffff" | Text color on accent backgrounds |
| secondaryTextColor | string | "#6B7280" | Secondary text color |
| primaryTextColor | string | "#111827" | Primary text color |

$3

| Property | Type | Default | Description |
| ----------------- | -------- | ------------------------ | ----------------------- |
| title | string | "Talk with AI" | Widget title |
| ctaName | string | "Chat with us" | CTA button text |
| startButtonText | string | "Start" | Voice start button text |
| endButtonText | string | "End Call" | Voice end button text |
| chatPlaceholder | string | "Type your message..." | Chat input placeholder |
| avatarUrl | string | "" | Avatar image URL |

$3

| Property | Type | Description |
| ------------------------- | -------- | -------------------------------------- |
| voiceEmptyMessage | string | Message shown when voice is inactive |
| voiceActiveEmptyMessage | string | Message shown during active voice call |
| chatEmptyMessage | string | Message shown in empty chat |
| hybridEmptyMessage | string | Message shown in hybrid mode |

$3

| Property | Type | Default | Description |
| ------------------- | --------- | --------------------- | ---------------------------- |
| consentRequired | boolean | false | Require privacy consent |
| consentTitle | string | "Privacy Agreement" | Consent dialog title |
| consentContent | string | Default privacy text | Consent dialog content |"consent-accepted" | localStorage key for consent |

Usage Examples

$3

`jsx
import { AtomsWidget } from "atoms-widget-core";

export default function SupportWidget() {
return (
assistantId="support-assistant-123"
mode="chat"
position="bottom-right"
size="full"
accentColor="#3B82F6"
baseColor="#ffffff"
title="Customer Support"
ctaName="Need Help?"
chatPlaceholder="Describe your issue..."
consentRequired={true}
consentTitle="Privacy Notice"
consentContent="We collect conversation data to improve our service."
/>
);
}
`

$3

`jsx
import { AtomsWidget } from "atoms-widget-core";

export default function VoiceAssistant() {
return (
assistantId="voice-assistant-456"
mode="voice"
position="bottom-center"
size="tiny"
accentColor="#10B981"
title="Voice Assistant"
ctaName="Start Voice Chat"
/>
);
}
`

$3

`html







assistant-id="your-assistant-id"
mode="chat"
position="bottom-left"
size="compact"
accent-color="#8B5CF6"
base-color="#F8FAFC"
title="AI Helper"
chat-placeholder="Ask me anything..."
consent-required="true"
>


``

Built with ❤️ by the Atoms team