All install guides

react

React

Install @ownichat/react and wrap your app in the provider.

Install in a React app

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