<!-- @preserve -->
# Fake Chat Generator — Free Fake Conversation Maker

> Create realistic chat mockups for iMessage, Slack, WhatsApp, Messenger, Discord, and generic messaging platforms with interactive features, customizable participants, and platform-accurate styling.

The Fake Chat Generator is a powerful tool for creating authentic chat interface mockups that accurately represent real messaging platforms. Use it as a fake chat maker for marketing presentations, user research, product demos, and creative testing — or as a fake text message generator when you need a phone-accurate iMessage or WhatsApp screenshot. Exports are retina PNGs with no watermark and no signup.

## Features

### Platform Support
- **iMessage**: iPhone-style interface with proper status bar, notch, and iOS design elements
- **Slack**: Workspace-style interface with collapsible sidebar, channels, and reactions
- **WhatsApp**: Teal header and doodle wallpaper with green/white bubbles and delivery ticks
- **Messenger**: Blue-gradient bubbles with avatars and an "Active now" header
- **Discord**: Dark desktop UI with server rail, channel sidebar, and coloured usernames
- **Generic Messaging**: Clean, modern messaging interface for general use cases

### Interactive Elements
- **Collapsible Sidebar**: Slack sidebar can be collapsed/expanded for space optimization
- **Reactions**: Add and remove emoji reactions on Slack messages
- **Typing Indicators**: Realistic typing animations with configurable participants
- **Message Status**: Delivery status indicators for iMessage (delivered, read, etc.)

### Customization Options
- **Participants**: Add multiple participants with custom names, avatars, and roles
- **Message Content**: Customize message text and timestamps (attachment cards render in seeded examples; no in-tool attachment editor yet)
- **Platform Styling**: Platform-accurate colors, fonts, and layout elements
- **Metadata**: Workspace names, channel topics, and conversation settings

## Use Cases

### Marketing & Sales
- **Product Demos**: Showcase chat features in presentations and demos
- **User Research**: Create realistic scenarios for user testing and feedback
- **Sales Materials**: Generate mockups for proposals and client presentations
- **Training Materials**: Create examples for team training and onboarding

### WhatsApp & Messenger Chat Examples
Building a WhatsApp or Messenger chat example for a deck, landing page, or support story? This umbrella tool covers both platforms in one session: switch between the WhatsApp preset (teal header, green/white bubbles, delivery ticks) and the Messenger preset (blue-gradient bubbles, "Active now" header) without leaving the page — useful when a customer story spans both channels or you want to compare platform treatments side by side. Each starts from an editable example conversation, so you adapt a realistic structure instead of writing a thread from scratch. Dedicated single-platform pages also exist: the [WhatsApp Chat Generator](/resources/tools/generators/whatsapp-chat-generator) and [Messenger Chat Generator](/resources/tools/generators/messenger-chat-generator).

### Creative Testing
- **A/B Testing**: Test different messaging approaches and conversation flows
- **Content Strategy**: Visualize chat-based content and engagement strategies
- **Platform Comparison**: Compare messaging experiences across different platforms
- **User Experience**: Design and test chat interface improvements

### Development & Design
- **Prototyping**: Create realistic prototypes for chat applications
- **Design Systems**: Establish consistent chat interface patterns
- **User Stories**: Visualize user interactions and conversation flows
- **Documentation**: Create visual documentation for chat features

## Platform-Specific Features

### iMessage
- **iPhone Frame**: Accurate iPhone frame with notch and status bar
- **Status Bar**: Time, signal strength, WiFi, and battery indicators
- **Group Avatars**: Proper avatar layout for single, two, and three+ participants
- **Message Bubbles**: Brand-accurate blue/gray bubbles with proper tails
- **Composer**: iOS-style message composer with camera and text input

### Slack
- **Workspace Sidebar**: Collapsible sidebar with channels and direct messages
- **Message Reactions**: Interactive emoji reactions with hover effects
- **Channel Management**: Channel list with unread indicators and member counts
- **Thread Support**: Threaded conversations with reply counts
- **Rich Formatting**: Renders attachment cards, links, and formatted text (attachments come from seeded examples — no in-tool attachment editor yet)

### Generic Messaging
- **Modern Design**: Clean, contemporary messaging interface
- **Flexible Layout**: Adaptable design for various use cases
- **Custom Styling**: Theme-aware colors and typography
- **Attachment Support**: File and media attachment previews (rendered from seeded examples; not user-editable yet)

## Technical Implementation

### Architecture
- **React Context**: Centralized state management for conversation data
- **TypeScript**: Full type safety for message structures and participant data
- **Tailwind CSS**: Responsive styling with theme support
- **SVG Graphics**: Scalable icons and interface elements

### State Management
- **Conversation State**: Messages, participants, and metadata
- **Platform Configuration**: Platform-specific settings and styling
- **Interactive Features**: Reactions, sidebar state, and typing indicators
- **Real-time Updates**: Dynamic state updates for interactive elements

### Performance
- **Optimized Rendering**: Efficient message list rendering with virtualization
- **Memory Management**: Proper cleanup of event listeners and subscriptions
- **Responsive Design**: Mobile-first approach with desktop enhancements
- **Accessibility**: ARIA labels, keyboard navigation, and screen reader support

## Best Practices

### Content Creation
- **Realistic Conversations**: Use natural, conversational language
- **Appropriate Length**: Keep messages concise but meaningful
- **Platform Context**: Match content style to platform conventions
- **Visual Hierarchy**: Use proper message grouping and spacing

### Design Guidelines
- **Brand Consistency**: Maintain platform-accurate styling
- **Accessibility**: Ensure proper contrast and readable text
- **Mobile Optimization**: Test on various screen sizes
- **Performance**: Optimize for smooth interactions and fast loading

### Integration
- **Downloadable PNG output**: Click the Download PNG button in the controls panel to save the styled chat mockup at retina (2×) density straight to your device — no screenshot tool or design software required, and no watermarks.
- **Customization**: Extend with custom themes and components
- **Documentation**: Maintain clear documentation for team use

## Getting Started

1. **Select Platform**: Choose iMessage, Slack, or generic messaging
2. **Add Participants**: Configure participant names, avatars, and roles
3. **Create Messages**: Add conversation content with timestamps
4. **Customize Styling**: Adjust colors, fonts, and layout elements
5. **Add Interactions**: Enable reactions, typing indicators, and other features
6. **Download Result**: Click the Download PNG button to save the styled chat mockup as a retina-density PNG for use in presentations or documentation.

## Advanced Features

### Custom Themes
- **Color Schemes**: Customize platform colors and accents
- **Typography**: Adjust fonts and text styling
- **Layout Options**: Modify spacing, sizing, and positioning
- **Brand Integration**: Incorporate company branding and colors

### Capture & Export

- **Export path**: The Download PNG button in `FakeChatControls` captures the styled preview via `html2canvas` and writes a retina-density PNG through `canvas.toBlob` → `<a download>.png`, wired through the `setExporting` reducer slot in `FakeChatContext.tsx` (matching the SocialMedia and Email Thread umbrellas). Note the rendered FakeChat surface still has no in-tool import / team-sharing / version-control / commenting flows — those were aspirational claims in an earlier .md that the tool does not support.

## Also Try

- [Email Mockup Generator](/resources/tools/generators/email-thread-mockup-generator) — Gmail and Outlook conversation screenshots for the same testimonial decks.
- [ROAS Calculator](/resources/tools/calculators/roas-calculator) — Model return on ad spend after you ship the creative these mockups support.
- [ThruPlay Rate Benchmark](/resources/tools/analyzers/thruplay-rate-benchmark) — Compare video hook performance if your chat proof sits in a video ad funnel.

## Support & Resources

- **Documentation**: Comprehensive guides and tutorials
- **Examples**: Pre-built conversation templates
- **Community**: User forums and support channels (via `/about` and the linked support channels)
- **Updates**: Regular feature updates and improvements

The Fake Chat Generator empowers teams to create professional, realistic chat mockups that enhance communication, improve user experience, and drive better results in marketing and product development.