Aumera Chat Widget

A lightweight, customizable chat widget that can be easily integrated into any website. The widget provides a floating chat button with smooth animations and responsive design.

Installation

npm install aumera-chat-widget

Usage

Basic Implementation

Add the following script tag to your HTML:

<script
  src="df-btn.js"
  id="df-btn"
  project="your-project-id"
  width="390px"
  height="844px"
  openText="Chat"
  closeText="Close"
  logo="assets/logo.svg"
  background="#FEFFFF"
  backgroundDark="#171717"
  logoDark="assets/logo_dark.svg"
  position="right"
  animation="shake"
  shakeDuration="1000"
  shakeInterval="500"
  shakeAmplitude="5"
  shakeFrequency="1"
  showNotification="true"
></script>

Configuration Options

| Attribute | Type | Default | Description | |-----------|------|---------|-------------| | project | string | required | Your project ID | | width | string | "400px" | Width of the chat window | | height | string | "600px" | Height of the chat window | | openText | string | "Chat" | Text shown when chat is closed | | closeText | string | "Close" | Text shown when chat is open | | logo | string | - | URL to your logo image | | background | string | "#FEFFFF" | Background color of the button | | backgroundDark | string | "#171717" | Background color in dark mode | | logoDark | string | - | URL to your dark mode logo | | position | string | "right" | Position of the button ("left" or "right") | | animation | string | "message" | Animation type ("shake" or "message") | | shakeDuration | number | 3000 | Duration of shake animation in milliseconds | | shakeInterval | number | 1000 | Interval between shakes in milliseconds | | shakeAmplitude | number | 10 | Amplitude of shake animation in pixels | | shakeFrequency | number | 1 | Frequency of shake animation | | showNotification | boolean | false | Show notification bubble |

Responsive Design

The widget is fully responsive and adapts to mobile screens. On screens smaller than 720px:

• The button expands to full width
• The chat window takes up the full viewport height
• Text labels are hidden for a cleaner look

Dark Mode Support

The widget automatically supports dark mode using the prefers-color-scheme media query. You can customize the dark mode appearance using the backgroundDark and logoDark attributes.

Development

# Clone the repository
git clone https://github.com/yourusername/aumera-chat-widget.git

# Install dependencies
npm install

# Build the project
npm run build

License

MIT

Contributing

Contributions are welcome! Please feel free to submit a Pull Request.