# Engage Browser Widget

Engage JavaScript browser widget that provides chat functionality, product tours, banners, and customer analytics tracking for web pages.

## Features

- 💬 **Real-time Chat**: WebSocket-powered chat with typing indicators
- 🗣️ **Product Tours**: Interactive guided tours with step-by-step instructions  
- 📢 **Banners**: Customizable notification banners (inline/floating)
- 📊 **Analytics**: Customer behavior tracking and analytics

## Installation

```html
<script>
  !function(n){if(!window.Engage){window[n]=window[n]||{},window[n].queue=window[n].queue||[],window.Engage=window.Engage||{};for(var e=["init","identify","addAttribute","track"],i=0;i<e.length;i++)window.Engage[e[i]]=w(e[i]);var d=document.createElement("script");d.src="//d2969mkc0xw38n.cloudfront.net/next/engage.min.js",d.async=!0,document.head.appendChild(d)}function w(e){return function(){window[n].queue.push([e].concat([].slice.call(arguments)))}}}("engage");

  Engage.init('api_key')
  // Optional: Identify user
  Engage.identify({ 
    id: 'user123',
    email: 'user@example.com',
    name: 'John Doe'
  });
</script>
```

## Configuration Options

### Initialization

```javascript
// Basic initialization
Engage.init('api_key')

// Advanced initialization
Engage.init({
  key: 'api_key',
  no_chat: true, // Disable chat widget
  ignore_anonymous: true // No tracking unless user `identify`ied
})
```

### Autotracking

Autotracking lets you automatically captures pageviews, button/link clicks and form submissions. This is off by default.

```javascript
// Enable all autotracking features
Engage.init({
  key: 'api_key',
  autotrack: true
})
```

```javascript
// Configure specific autotrack features
Engage.init({
  key: 'api_key',
  autotrack: {
    pageviews: true,  // Track page views and navigation
    buttons: true,    // Track button and link clicks
    forms: true       // Track form submissions
  }
})
```

### User Identification

```javascript
// Identify user
Engage.identify({
  id: 'unique-user-id',
  email: 'user@example.com',
  first_name: 'User',
  last_name: 'Name',
  // Add custom attributes
  plan: 'premium',
  signupDate: '2024-01-01'
});
```

### Chat

```javascript
// Toggle (open or close) chat widget 
Engage.toggleChat();
```

### Help

```javascript
// Open help article
// Engage.openHelp('id', [article|category|collection], 'locale');
Engage.openHelp('article-id', 'article', 'en');
```

### Tour Functions

Tours are automatically triggered based on URL patterns and user segments configured in your dashboard.

### Banner Configuration

Banners are configured in your dashboard and automatically displayed based on:
- URL patterns
- User segments
- Display rules (frequency, timing)

## Widget Customization

### Chat Widget Styling

The chat widget can be customized through your dashboard:

- **Colors**: Primary color, background colors
- **Position**: Bottom right (default), bottom left
- **Welcome Message**: Custom greeting text
- **Branding**: Logo and company name

### CSS Customization

```css
/* Override widget styles */
.engage-widget-container .chat-btn {
  background-color: #your-color !important;
}

.engage-widget-container .welcome {
  font-family: your-font !important;
}
```

## Development

### Building from Source

```bash
# Install dependencies
npm install

# Build for development
npm run build-dev

# Build for production
npm run build

# Run tests
npm test

# Lint code
npm run lint
```

### Testing

```bash
# Run all tests
npm test

# Run tests in watch mode
npm run test:watch

# Generate coverage report
npm run test:coverage
```

## Contributing

1. Fork the repository
2. Create a feature branch: `git checkout -b feature-name`
3. Make your changes and add tests
4. Run the test suite: `npm test`
5. Submit a pull request

## License

ISC License - see LICENSE file for details

## Support

- Documentation: [https://docs.engage.so](https://docs.engage.so)
- Support: [support@engage.so](mailto:support@engage.so)
- Status Page: [https://status.engage.so](https://status.engage.so)