← Blog

onipin-react: embed OniPin chat in your React app

Official OniChat package — floating bubble (widget) or iframe /c/{pin}. npm install onipin-react, no API keys: only the business pin.

The onipin-react package is the official component to integrate OniPin chat in React apps (Next.js, Vite, CRA…).

Installation

npm install onipin-react

Peer deps: React ≥ 18.

Floating bubble (same as the widget)

import { OniChat } from "onipin-react";

export function App() {
  return <OniChat pin="onp_your_pin" />;
}

Embedded chat on the page

import { OniChat } from "onipin-react";

export function Support() {
  return (
    <OniChat
      pin="onp_your_pin"
      mode="iframe"
      height={640}
      title="Chat with us"
    />
  );
}

Props

PropDefaultDescription
pin—Business pin (onp_…)
baseUrlhttps://onnivers.storeServer origin
mode"script""script" (widget) or "iframe" (/c/{pin})
height / width560 / 100%iframe mode only
  • HTML widget: one line with /widget.js
  • Node SDK: onipin-js
  • Python SDK: onipin · pip install onipin

Documentation → · npm →