@wondeya/react

React wrapper for the wondeya inline agent component. Optional — the loader works on its own.

npm install @wondeya/react

import { WondeyaWidget } from '@wondeya/react';

<WondeyaWidget
  siteKey="wdy_site_…"
  appearance={{ primary: '#0f172a', radius: 'full', font: 'inherit' }}
/>;

The component renders a <div> and mounts the agent into it, inline: where it sits in your tree is where the agent appears. Size and place it with className/style like any other element — width follows your layout, and the height follows the conversation on its own.

appearance customizes the embedded agent over the wondeya defaults: five colors (primary, accent, surface, ink, muted as #rrggbb), radius (none|sm|md|lg|full) and font (montserrat|inter|source-serif|inherit). An invalid value is a console warning and that key falling back to its default. font: 'inherit' forwards the page's computed stack, but an iframe cannot use your web fonts — it matches only system or locally installed ones and falls back to the widget default otherwise.

Everything is removed on unmount, which is the part a plain <script> tag cannot do in a single-page app.

onEvent reports the widget's events (ready, turn-started, turn-completed, turn-failed); identify attaches display traits to the visitor:

<WondeyaWidget
  siteKey="wdy_site_…"
  identify={{ id: user.id, traits: { name: user.name } }}
  onEvent={(event) => console.log(event)}
/>;

identify is display data and not authentication: any script on the page can send it, so nothing is ever authorized by it.

Full options, events and the CSP guide: the repo README.