atoms-widget-core
Advanced tools
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.
npm install atoms-widget-core
import { AtomsWidget } from "atoms-widget-core";
function App() {
return (
<AtomsWidget
assistantId="your-assistant-id"
mode="chat"
position="bottom-right"
size="full"
accentColor="#2d9d9f"
title="AI Assistant"
chatPlaceholder="How can I help you today?"
/>
);
}
<!DOCTYPE html>
<html>
<head>
<script src="https://unpkg.com/atoms-widget-core@latest/dist/embed/widget.umd.js"></script>
</head>
<body>
<atoms-widget
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?"
></atoms-widget>
</body>
</html>
| 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 |
import { AtomsWidget } from "atoms-widget-core";
export default function SupportWidget() {
return (
<AtomsWidget
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."
/>
);
}
import { AtomsWidget } from "atoms-widget-core";
export default function VoiceAssistant() {
return (
<AtomsWidget
assistantId="voice-assistant-456"
mode="voice"
position="bottom-center"
size="tiny"
accentColor="#10B981"
title="Voice Assistant"
ctaName="Start Voice Chat"
/>
);
}
<!DOCTYPE html>
<html>
<head>
<script src="https://unpkg.com/atoms-widget-sdk/dist/embed/widget.umd.js"></script>
<style>
atoms-widget {
--atoms-accent-color: #8b5cf6;
--atoms-base-color: #f8fafc;
}
</style>
</head>
<body>
<atoms-widget
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"
></atoms-widget>
</body>
</html>
Built with ❤️ by the Atoms team
FAQs
Atoms Widget SDK for React applications
The npm package atoms-widget-core receives a total of 381 weekly downloads. As such, atoms-widget-core popularity was classified as not popular.
We found that atoms-widget-core demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Multiple high-impact npm maintainers confirm they have been targeted in the same social engineering campaign that compromised Axios.
Security News
Axios compromise traced to social engineering, showing how attacks on maintainers can bypass controls and expose the broader software supply chain.
Security News
Node.js has paused its bug bounty program after funding ended, removing payouts for vulnerability reports but keeping its security process unchanged.