Customer support chat widget for Ticketping - Intercom-like experience with real-time messaging
npm install @ticketping/chat-widgetA modern, customizable customer support chat widget with real-time messaging capabilities. Built for seamless integration into any website.


This widget is meant to be used with Ticketping - Customer support meets Slack
- Real-time messaging with WebSocket support
- Fully customizable themes and colors
- Mobile responsive design
- Conversation history and persistence
- File attachments support
- Secure authentication with JWT
- Lightweight (< 50KB gzipped)
| | URL |
|----------------|---------------------------------------------------------------------|
| Documentation | docs.ticketping.com |
| Demo | Ticketping |
| Email | support@ticketping.com |
| Issues | GitHub Issues |
| NPM | NPM Package |
``bash`
npm install @ticketping/chat-widget
Or via CDN:
`html`
`html`
`javascript
import TicketpingChat from '@ticketping/chat-widget';
import '@ticketping/chat-widget/style';
const chat = new TicketpingChat({
appId: 'your-app-id',
teamSlug: 'your-team-slug',
teamLogoIcon: 'cdn-link-to-your-logo-square',
});
`
`javascript`
// Install the package and React
npm install @ticketping/chat-widget react
`jsx
import React, { useRef } from 'react';
import TicketpingChat from '@ticketping/chat-widget/react';
function App() {
const chatRef = useRef();
return (
export default App;
`
#### Custoizing theme and troubleshooting
Read more on react docs.
#### React Component Props
| Prop | Type | Default | Description |
|------|------|---------|-------------|
| appId | string | '' | Your Ticketping app ID |teamSlug
| | string | '' | Your team slug |teamLogoIcon
| | string | '' | URL to your team logo |apiBase
| | string | 'https://api.ticketping.com' | API base URL |wsBase
| | string | 'wss://api.ticketping.com' | WebSocket base URL |userJWT
| | string | '' | User authentication token |debug
| | boolean | false | Enable debug mode |analytics
| | boolean | true | Enable analytics |theme
| | object | null | Custom theme configuration |open
| | boolean | false | Control widget open state |
#### Svelte 5 (Recommended)
`javascript`
// Install the package and Svelte
npm install @ticketping/chat-widget
`svelte
teamSlug="your-team-slug"
teamLogoIcon="cdn-link-to-your-logo-square"
/>
`
#### Svelte 4
`javascript`
// Install the package and Svelte 4
npm install @ticketping/chat-widget svelte@^4.0.0
`svelte
teamSlug="your-team-slug"
teamLogoIcon="cdn-link-to-your-logo-square"
/>
`
#### Svelte Component Props
| Prop | Type | Default | Description |
|------|------|---------|-------------|
| appId | string | '' | Your Ticketping app ID |teamSlug
| | string | '' | Your team slug |teamLogoIcon
| | string | '' | URL to your team logo |apiBase
| | string | 'https://api.ticketping.com' | API base URL |wsBase
| | string | 'wss://api.ticketping.com' | WebSocket base URL |userJWT
| | string | '' | User authentication token |debug
| | boolean | false | Enable debug mode |analytics
| | boolean | true | Enable analytics |theme
| | object | null | Custom theme configuration |open
| | boolean | false | Control widget open state |userData
| | object | null | User identification data |
`javascript`
window.TicketpingChat.init({
// Required
appId: 'your-app-id',
teamSlug: 'your-team-slug',
teamLogoIcon: 'cdn-link-to-your-logo-square',
// Optional - API endpoints
apiBase: 'https://api.ticketping.com',
wsBase: 'wss://ws.ticketping.com',
// Optional - Authentication
userJWT: 'your-user-jwt-token',
// Optional - Behavior
autoOpen: false,
position: 'bottom-right' // or 'bottom-left'
});
`javascript`
window.TicketpingChat.init({
appId: 'your-app-id',
teamSlug: 'your-team-slug',
teamLogoIcon: 'cdn-link-to-your-logo-square',
theme: {
// Primary colors
primaryColor: '#3b82f6', // Main brand/accent color
primaryButtonText: '#ffffff', // Text color on primary buttons
primaryHover: '#2563eb', // Hover state for primary color
iconColor: '#ffffff', // Icon color (e.g., in chat bubble)
// Text colors
textPrimary: '#374151', // Main text color
textSecondary: '#747d8f', // Secondary text color
textMuted: '#c3c5ca', // Muted/disabled text color
// Background colors
background: '#ffffff', // Main background color
backgroundSecondary: '#f9fafb', // Secondary background areas
backgroundTertiary: '#e5e7eb', // Tertiary background areas
// Border colors
border: '#e9e9e9', // Default border color
borderLight: '#f3f3f3', // Light border color
// Status colors
notificationBg: '#ff4757', // Notification badge background
successColor: '#4caf50', // Success state color
offlineColor: '#9e9e9e', // Offline status color
// Error colors
errorBg: '#ffebee', // Error background color
errorText: '#c62828', // Error text color
errorBorder: '#f44336', // Error border color
// Shadow colors (for advanced customization)
shadowLight: 'rgba(15, 15, 15, 0.06)', // Light shadow
shadowMedium: 'rgba(15, 15, 15, 0.16)', // Medium shadow
shadowDark: 'rgba(9, 14, 21, 0.06)', // Dark shadow
}
});
The widget supports extensive theming through CSS custom properties:
`css
:root {
/ Primary colors /
--tp-primary-color: #3b82f6;
--tp-primary-button-text: #ffffff;
--tp-primary-hover: #2563eb;
--tp-icon-color: #ffffff;
/ Text colors /
--tp-text-primary: #374151;
--tp-text-secondary: #747d8f;
--tp-text-muted: #c3c5ca;
/ Background colors /
--tp-background: #ffffff;
--tp-background-secondary: #f9fafb;
--tp-background-tertiary: #e5e7eb;
/ Border colors /
--tp-border: #e9e9e9;
--tp-border-light: #f3f3f3;
/ Status colors /
--tp-notification-bg: #ff4757;
--tp-success-color: #4caf50;
--tp-offline-color: #9e9e9e;
/ Error colors /
--tp-error-bg: #ffebee;
--tp-error-text: #c62828;
--tp-error-border: #f44336;
/ Shadow colors /
--tp-shadow-light: rgba(15, 15, 15, 0.06);
--tp-shadow-medium: rgba(15, 15, 15, 0.16);
--tp-shadow-dark: rgba(9, 14, 21, 0.06);
}
`
`javascript`
window.TicketpingChat.init({
appId: 'your-app-id',
teamSlug: 'your-team-slug',
teamLogoIcon: 'cdn-link-to-your-logo-square',
// Event callbacks
onReady: () => console.log('Widget ready'),
onOpen: () => console.log('Widget opened'),
onClose: () => console.log('Widget closed'),
onMessageSent: (message) => console.log('Message sent:', message),
onMessageReceived: (message) => console.log('Message received:', message),
onConversationStarted: (id) => console.log('Conversation started:', id),
onError: (error) => console.error('Widget error:', error)
});
After initialization, you can control the widget programmatically:
`javascript
const chat = window.TicketpingChat;
// Open/close the widget
chat.open();
chat.close();
// Identify the current user
chat.identify({
id: 'user-123',
email: 'user@example.com',
name: 'John Doe',
userJWT: 'your-user-jwt'
});
// Start a new conversation
chat.startConversation();
// Clean up
chat.destroy();
`
- Chrome/Edge 80+
- Firefox 75+
- Safari 13+
- Mobile browsers (iOS Safari, Chrome Mobile)
`bashInstall dependencies
npm install
Examples
Check out the
/examples` directory for integration examples with:MIT © Ticketping
- 🌐 Website: Ticketping
- 📧 Email: support@ticketping.com
- 🐛 Issues: GitHub Issues
- 📖 Documentation: docs.ticketping.com