@cipiti/widget

Embeddable chat widget for Cipiti.ai - Add live chat support to any website.

Installation

npm install @cipiti/widget
# or
yarn add @cipiti/widget
# or
pnpm add @cipiti/widget

Usage

React

import { LetsChatWidget } from '@cipiti/widget/react'

function App() {
  return (
    <LetsChatWidget
      organizationId="your-org-id"
      primaryColor="#2563eb"
      position="bottom-right"
      visitor={{
        email: "[email protected]",
        name: "John Doe"
      }}
      onOpen={() => console.log('Widget opened')}
      onClose={() => console.log('Widget closed')}
    />
  )
}

React Hook (Imperative Control)

import { LetsChatWidget, useLetsChatWidget } from '@cipiti/widget/react'

function App() {
  const { open, close, identify } = useLetsChatWidget()

  return (
    <>
      <LetsChatWidget organizationId="your-org-id" />
      <button onClick={open}>Open Chat</button>
      <button onClick={close}>Close Chat</button>
      <button onClick={() => identify({ email: '[email protected]' })}>
        Update User
      </button>
    </>
  )
}

Vanilla JavaScript

<script>
  window.LetsChatSettings = {
    organizationId: 'your-org-id',
    primaryColor: '#2563eb',
    position: 'bottom-right',
    visitor: {
      email: '[email protected]',
      name: 'John Doe'
    }
  };
</script>
<script src="https://widget.cipiti.ai/embed.js" async></script>

ES Modules

import { init, open, close, identify, destroy } from '@cipiti/widget'

// Initialize the widget
init({
  organizationId: 'your-org-id',
  primaryColor: '#2563eb',
})

// Control the widget programmatically
open()
close()
identify({ email: '[email protected]', name: 'John' })
destroy()

Configuration Options

| Option | Type | Default | Description | |--------|------|---------|-------------| | organizationId | string | required | Your organization ID from the dashboard | | position | 'bottom-right' \| 'bottom-left' | 'bottom-right' | Widget position | | primaryColor | string | '#2563eb' | Primary theme color | | greeting | string | 'Hi there! How can we help?' | Initial greeting message | | placeholder | string | 'Type your message...' | Input placeholder text | | openOnLoad | boolean | false | Auto-open widget on page load | | soundEnabled | boolean | true | Enable notification sounds | | visitor | object | undefined | Pre-identify the visitor | | visitor.email | string | - | Visitor's email | | visitor.name | string | - | Visitor's name | | visitor.metadata | object | - | Custom metadata |

API

init(config)

Initialize the widget with the given configuration.

destroy()

Remove the widget from the page.

open()

Open the chat window.

close()

Close the chat window.

identify(visitor)

Update visitor information.

Events

The widget dispatches custom events you can listen to:

window.addEventListener('letschat:open', () => {
  console.log('Widget opened')
})

window.addEventListener('letschat:close', () => {
  console.log('Widget closed')
})

window.addEventListener('letschat:message', (event) => {
  console.log('New message:', event.detail)
})

Self-Hosted

If you're self-hosting LetsChat, specify your API endpoints:

init({
  organizationId: 'your-org-id',
  apiUrl: 'https://your-domain.com',
  socketUrl: 'https://socket.your-domain.com',
})

License

MIT