@ownichat/react
v0.1.0
Published
React components and hooks for the owni.chat AI chat widget.
Maintainers
dev2studioReadme
@ownichat/react
React components and hooks for the owni.chat AI chat widget.
npm install @ownichat/react| | |
| --- | --- |
| 🫧 One provider | Drop in <OwniChatProvider> and the widget is live |
| 🎛️ Full control | useOwniChat() to open, close and prefill from your own UI |
| 📥 Events | useOwniEvent('lead', …) to pipe captured leads into analytics |
| 🖼️ Inline mode | <OwniChatInline> for a dedicated support page |
SSR-safe, StrictMode-safe, no runtime dependencies. React 18 and 19.
Using Next.js? Install
@ownichat/nextinstead — it wraps this package with a server component and server-side helpers.
Quick start
Wrap your app once with your public project key (pk_…, from the owni.chat dashboard):
import { OwniChatProvider } from '@ownichat/react';
export function App() {
return (
<OwniChatProvider projectKey="pk_your_key">
<Routes />
</OwniChatProvider>
);
}That's the whole installation — the provider loads the widget script and the floating bubble appears. Appearance, position and welcome message come from your dashboard settings, not from props.
Controlling the widget
import { useOwniChat } from '@ownichat/react';
export function HelpButton() {
const chat = useOwniChat();
return (
<button onClick={chat.open} aria-expanded={chat.isOpen}>
Chat with us
</button>
);
}useOwniChat() returns:
| | |
| --- | --- |
| open() / close() / toggle() | Show or hide the panel |
| isOpen | Live open state — updates when the visitor opens it too |
| sendMessage(text) | Opens the widget and sends a message as the visitor |
| setVisitor({ name, email, phone }) | Pre-fills who the visitor is, e.g. for a logged-in user |
| ready | true once the widget has mounted |
Calls made before the script finishes loading are queued and replayed, so you never
need to guard on ready.
Reacting to events
import { useOwniEvent } from '@ownichat/react';
export function LeadTracking() {
useOwniEvent('lead', (fields) => {
analytics.track('chat_lead_captured', fields);
});
return null;
}Events: ready, open, close, message ({ role, text }), lead (the submitted
form values, fired at the same moment owni.chat sends its lead_captured webhook).
The handler is read from a ref, so passing an inline arrow function does not resubscribe on every render.
Inline chat panel
Render the chat inside your layout instead of floating in a corner — useful for a dedicated support page:
import { OwniChatInline } from '@ownichat/react';
export function SupportPage() {
return <OwniChatInline height={600} className="rounded-xl border" />;
}Inline embeds are always open and fill their container. Several can coexist on one page, and alongside the floating widget.
Identifying logged-in users
const chat = useOwniChat();
useEffect(() => {
if (user) {
chat.setVisitor({ name: user.name, email: user.email });
}
}, [chat, user]);Self-hosted instances
<OwniChatProvider projectKey="pk_…" scriptUrl="https://chat.example.com/widget/embed.js" />Loading the widget yourself
Set autoLoad={false} when you want to decide where the script tag goes (for example
in a Next.js layout), and keep the provider only for the hooks:
<OwniChatProvider projectKey="pk_…" autoLoad={false}>
<App />
</OwniChatProvider>Notes
- SSR-safe: nothing touches
windowduring render. - The script is injected at most once per project key, so StrictMode's double effect and hot reloads do not create a second widget.
- The project key is public by design — it identifies a project, it does not authorize
anything. Server credentials belong in
@ownichat/sdk. - The widget picks its language from
navigator.languageand the page's<html lang>.
Related packages
| Package | For |
| --- | --- |
| @ownichat/sdk | Server-side API: catalog sync, knowledge sources, webhook verification |
| @ownichat/next | Next.js server component and server helpers |
Not on React? owni.chat also ships official plugins for WordPress/WooCommerce, Shopify and OpenCart — see owni.chat/integrations.
License
MIT © owni.chat