npm package: @heyo.so/react
Description: Heyo chat widget for React / Next.js
Latest version: 1.0.4

<!--
Get your module up and running quickly.

Find and replace all on all files (CMD+SHIFT+F):
- Name: Heyo React
- Package name: @heyo.so/react
- Description: Heyo chat widget integration for React.
-->

# Heyo React

[![npm version][npm-version-src]][npm-version-href]
[![npm downloads][npm-downloads-src]][npm-downloads-href]
[![License][license-src]][license-href]
[![React][react-src]][react-href]

Heyo chat widget integration for React.

Website: [heyo.so](https://heyo.so?utm_source=npm&utm_campaign=heyo-react)

- [✨ &nbsp;Release Notes](/CHANGELOG.md)
  <!-- - [🏀 Online playground](https://stackblitz.com/github/your-org/@heyo.so/react?file=playground%2Fapp.tsx) -->
  <!-- - [📖 &nbsp;Documentation](https://example.com) -->

## Features

- ✨ &nbsp;Easy integration
- 🚀 &nbsp;Fast and lightweight
- 🎨 &nbsp;Customizable widget

## Quick Setup

Install the package in your React (or Next.js) application:

```bash
npm install @heyo.so/react
```

### 1. Initialise the widget (recommended)

```tsx
// index.tsx (or App.tsx)
import { HEYO } from '@heyo.so/react'

HEYO.init({ projectId: 'your-project-id' })
```

### 2. Automatic injection

If you only need the default behaviour, import the side-effect module once in your codebase and forget about it:

```ts
import '@heyo.so/react/autoload'
```

⚠️  By default the widget is **disabled on `localhost`**. Pass a `projectId` via `HEYO.init()` to enable it during local development.

## Configuration

`init()` accepts the following options:

| Option | Type | Description |
| ------ | ---- | ----------- |
| `projectId` | `string` | **Required in development.** Your Heyo project ID. |
| `showByDefault` | `boolean` | Whether the launcher should be visible immediately (default `true`). |

## API

This package exposes a single `HEYO` object:

| Method | Description |
| ------ | ----------- |
| `init(options?)` | Inject the Heyo embed script. Call this once early. |
| `show()` | Show the launcher / widget. |
| `hide()` | Hide the launcher / widget. |
| `open()` | Open the chat widget. |
| `close()` | Close the chat widget. |
| `identify(meta)` | Identify the current visitor with custom metadata. |

If you inject the script yourself, you can skip `init()` and still use the other methods.

## Contribution

<details>
  <summary>Local development</summary>

  ```bash
  # Install dependencies
  npm install

  # Run the development server
  npm run dev

  # Build for production
  npm run build

  # Run ESLint
  npm run lint
  ```

</details>

<!-- Badges -->

[npm-version-src]: https://img.shields.io/npm/v/@heyo.so/react/latest.svg?style=flat&colorA=020420&colorB=00DC82
[npm-version-href]: https://npmjs.com/package/@heyo.so/react
[npm-downloads-src]: https://img.shields.io/npm/dm/@heyo.so/react.svg?style=flat&colorA=020420&colorB=00DC82
[npm-downloads-href]: https://npm.chart.dev/@heyo.so/react
[license-src]: https://img.shields.io/npm/l/@heyo.so/react.svg?style=flat&colorA=020420&colorB=00DC82
[license-href]: https://npmjs.com/package/@heyo.so/react
[react-src]: https://img.shields.io/badge/React-20232A?logo=react&logoColor=61DAFB&style=flat&colorA=020420
[react-href]: https://react.dev