Frontend Customization

Chatify ships with a fully bundled messenger UI built with Vue 3, Pinia, and Tailwind CSS. This page explains how to customize it.

Architecture

The bundled UI is served as an IIFE bundle (a single JavaScript file) that mounts a Vue 3 application into a Blade template. The build pipeline uses Vite.

Blade layout (layouts/app.blade.php)
  └── Blade page (pages/app.blade.php)
        └── #chatify-app div
              └── Vue 3 application (IIFE bundle from /vendor/chatify/)

Boot data

The Blade page injects a ChatifyBootData JSON object into the #chatify-app element. This object contains:

• API base URL and prefix
• Broadcasting configuration (driver, key, cluster, host, port, TLS)
• Feature flags (groups enabled, saved messages enabled, etc.)
• Theme and customization options
• Translations for the current locale
• Current user info

The Vue app reads this data on mount to configure itself.

Published views

After running php artisan vendor:publish --tag=chatify-views, you get:

resources/views/vendor/chatify/
├── layouts/
│   └── app.blade.php    # outer HTML layout (head, body, CSS/JS includes)
└── pages/
    └── app.blade.php    # messenger page (renders #chatify-app and injects boot data)

Edit these to change the page structure, add custom CSS, include additional scripts, or modify the boot data.

Modifying the frontend source

For deeper changes to the Vue application itself:

1. Publish the frontend source

php artisan vendor:publish --tag=chatify-frontend

This copies the Vue 3 source code to:

resources/vendor/chatify/frontend/

Or use the Chatify publish command:

php artisan chatify:publish

2. Edit the source

The source is a standard Vue 3 + Pinia + Tailwind CSS project. Modify components, stores, styles, or add new features.

3. Rebuild

php artisan chatify:build

This compiles the frontend with Vite and outputs the IIFE bundle to public/vendor/chatify/.

Asset URL override (CDN)

By default, frontend assets are served from /vendor/chatify/. To serve them from a CDN:

CHATIFY_ASSET_URL=https://cdn.example.com/chatify

// config/chatify.php
'frontend' => [
    'asset_url' => env('CHATIFY_ASSET_URL'),
],

When set, all asset references in the Blade views use this URL as the base.

Themes

Users can switch between themes in the messenger settings. Available themes are defined in config:

'themes' => [
    'enabled' => true,
    'list' => ['classic', 'day', 'tinted', 'night'],
],

To disable theme switching:

CHATIFY_THEMES_ENABLED=false

Fonts

Users can select a chat font from the available options:

'fonts' => [
    'enabled' => true,
    'list' => [
        'system', 'segoe', 'arial', 'helvetica', 'georgia',
        'times', 'courier', 'verdana', 'tahoma', 'trebuchet',
        'palatino', 'garamond', 'consolas', 'calibri', 'cambria',
        'lucida', 'impact', 'comic',
    ],
],

Colors

Users can pick an accent color for the chat interface:

'colors' => [
    'enabled' => true,
    'list' => [
        '#2180f3', '#2196F3', '#00BCD4', '#3F51B5', '#673AB7',
        '#4CAF50', '#FFC107', '#FF9800', '#ff2522', '#9C27B0',
    ],
],

Add or remove colors by editing the list array.

Wallpaper patterns

The chat background can be set to a built-in SVG pattern or a custom uploaded image:

'chat_background' => [
    'enabled' => true,
    'folder' => 'chat-backgrounds',
    'patterns_url' => '/vendor/chatify/patterns',
    'patterns' => [
        ['name' => 'Bubbles',   'filename' => 'bubbles.svg'],
        ['name' => 'Circuit',   'filename' => 'circuit-board.svg'],
        ['name' => 'Glamorous', 'filename' => 'glamorous.svg'],
        ['name' => 'Hideout',   'filename' => 'hideout.svg'],
    ],
],

Custom patterns are SVG files placed in public/vendor/chatify/patterns/.

Sounds

Configure notification sounds for chat events:

'sounds' => [
    'enabled' => true,
    'incoming_message' => [
        'enabled' => true,
        'url' => '/vendor/chatify/sounds/incoming.wav',
    ],
    'outgoing_message' => [
        'enabled' => true,
        'url' => '/vendor/chatify/sounds/outgoing.wav',
    ],
    'typing' => [
        'enabled' => false,
        'url' => '/vendor/chatify/sounds/typing.wav',
    ],
],

To use custom sounds, place your audio files in public/vendor/chatify/sounds/ and update the URLs.

Blade layout

The layout file (resources/views/vendor/chatify/layouts/app.blade.php) controls the HTML structure of the messenger page. Common customizations:

• Add your app's navigation bar
• Include additional CSS or JavaScript
• Wrap the messenger in your app's layout
• Add analytics or tracking scripts

// config/chatify.php
'web' => [
    'layout' => 'layouts.app', // use your own app layout instead
],

Building a custom frontend

If you need a completely custom frontend (React, Svelte, etc.), you can:

1. Set CHATIFY_WEB_ENABLED=false to disable the bundled UI
2. Set CHATIFY_API_MIDDLEWARE=api,auth:sanctum for token-based auth
3. Build your frontend against the API
4. Configure Broadcasting in your frontend with Laravel Echo

The API is the same regardless of which frontend consumes it.