Atoms Widget SDK for React applications
npm install atoms-widget-coreA 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.
- 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
- 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
``bash`
npm install atoms-widget-core
`jsx
import { AtomsWidget } from "atoms-widget-core";
function App() {
return (
mode="chat"
position="bottom-right"
size="full"
accentColor="#2d9d9f"
title="AI Assistant"
chatPlaceholder="How can I help you today?"
/>
);
}
`
`html`
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?"
>
| Property | Type | Description |
| ------------- | -------- | ----------------------- |
| assistantId | string | Your Atoms assistant ID |
| 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 |
| 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 |
| 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 |
| 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 |
| 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 |
`jsx
import { AtomsWidget } from "atoms-widget-core";
export default function SupportWidget() {
return (
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."
/>
);
}
`
`jsx
import { AtomsWidget } from "atoms-widget-core";
export default function VoiceAssistant() {
return (
mode="voice"
position="bottom-center"
size="tiny"
accentColor="#10B981"
title="Voice Assistant"
ctaName="Start Voice Chat"
/>
);
}
`
`html``
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