🚀 Usage
Learn how to use Threadwp in your WordPress site, from basic implementation to advanced customization.
For Users
Add Chat to Pages
Add the chat interface to any page or post using a simple shortcode
WordPress Shortcode
[threadwp-chat]Additional Parameters:
width- Set chat width (default: 100%)height- Set chat height (default: 400px)theme- light or dark theme
User Actions
Basic actions users can perform in the chat interface
1
Start Conversations
Click "New Chat" to start messaging
2
Send Messages
Type and press Enter or click Send
3
Manage Conversations
View all chats in the sidebar
For Developers
REST API Endpoints
Available endpoints for chat operations
API Endpoints
// Get user threads
GET /wp-json/threadwp-chat/v1/threads
// Create new thread
POST /wp-json/threadwp-chat/v1/threads
// Get thread messages
GET /wp-json/threadwp-chat/v1/threads/{id}/messages
// Send message
POST /wp-json/threadwp-chat/v1/threads/{id}/messages
// Update typing status
POST /wp-json/threadwp-chat/v1/threads/{id}/typing
// Mark messages as read
POST /wp-json/threadwp-chat/v1/threads/{id}/readWebSocket Events
Real-time events for Socket.IO integration
Socket.IO Events
// Client to Server
socket.emit('join_thread', { thread_id: 1 });
socket.emit('send_message', { thread_id: 1, content: 'Hello!' });
socket.emit('typing', { thread_id: 1, is_typing: true });
// Server to Client
socket.on('message_received', (message) => { /* handle */ });
socket.on('typing_status', (status) => { /* handle */ });
socket.on('user_joined', (user) => { /* handle */ });WordPress Hooks & Filters
Customize chat behavior with WordPress hooks
Hooks and Filters
// Customize user chat permissions
add_filter('threadwp_user_can_access_chat', function($can_access, $user, $request) {
return $user->has_cap('read'); // Customize logic
}, 10, 3);
// Modify thread access
add_filter('threadwp_user_can_access_thread', function($can_access, $user_id, $thread_id, $thread) {
return true; // Customize access logic
}, 10, 4);
// Chat message sent hook
add_action('threadwp_message_sent', function($message, $thread, $user) {
// Custom logic after message sent
}, 10, 3);Customization Examples
Common customization scenarios
Custom Styling and Logic
// Add custom CSS
add_action('wp_head', function() {
echo '<style>
.threadwp-chat-container {
--chat-primary-color: #your-color;
--chat-border-radius: 12px;
}
</style>';
});
// Customize user display name
add_filter('threadwp_user_display_name', function($display_name, $user) {
return $user->display_name . ' (' . $user->user_login . ')';
}, 10, 2);Mobile Usage
Mobile Optimization
Touch Gestures
- • Swipe to navigate between conversations
- • Long press for message options
- • Pull to refresh conversation list
- • Tap to focus message input
Responsive Features
- • Collapsible sidebar on small screens
- • Optimized keyboard handling
- • Touch-friendly button sizes
- • Auto-scroll to new messages
Integration Examples
Theme Integration
// In your theme's functions.php
function add_chat_to_pages() {
if (is_user_logged_in()) {
echo do_shortcode('[threadwp-chat]');
}
}
add_action('wp_footer', 'add_chat_to_pages');Custom Post Type
// Add chat to custom post type
function add_chat_to_products($content) {
if (is_singular('product')) {
$content .= do_shortcode('[threadwp-chat]');
}
return $content;
}
add_filter('the_content', 'add_chat_to_products');