react
React
Install @ownichat/react and wrap your app in the provider.
Install in a React app
Recommended — the official package
npm install @ownichat/react
import { OwniChatProvider } from '@ownichat/react';
export function App() {
return (
<OwniChatProvider projectKey="YOUR_PROJECT_KEY">
<Routes />
</OwniChatProvider>
);
}
That is the whole installation. To open the chat from your own button:
import { useOwniChat } from '@ownichat/react';
function HelpButton() {
const chat = useOwniChat();
return <button onClick={chat.open}>Chat with us</button>;
}
The package also provides <OwniChatInline /> for an always-open panel inside your
layout, and useOwniEvent('lead', …) to hook captured leads into your analytics.
Using Next.js? Install @ownichat/next instead — see the Next.js guide.
Manual alternative
Add the script to index.html before </body>:
<script async src="https://app.owni.chat/widget/embed.js" data-project-key="YOUR_PROJECT_KEY"></script>
Ready to install?
Create a free account, open your project Installation page, and paste the embed code.
Start free