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

<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: '[email protected]',
    name: 'John Doe'
  });
</script>

Configuration Options

Initialization

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

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

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

// Identify user
Engage.identify({
  id: 'unique-user-id',
  email: '[email protected]',
  first_name: 'User',
  last_name: 'Name',
  // Add custom attributes
  plan: 'premium',
  signupDate: '2024-01-01'
});

Chat

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

Help

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

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

# 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

# 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
• Support: [email protected]
• Status Page: https://status.engage.so