Heyo React

Heyo chat widget integration for React.

Website: heyo.so

• ✨  Release Notes

Features

• ✨  Easy integration
• 🚀  Fast and lightweight
• 🎨  Customizable widget

Quick Setup

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

npm install @heyo.so/react

1. Initialise the widget (recommended)

// 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:

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

# Install dependencies
npm install

# Run the development server
npm run dev

# Build for production
npm run build

# Run ESLint
npm run lint