Localization

Multi-language support, RTL layouts, locale detection, and adding new translations

Chatify ships with English and Arabic translations and supports adding custom locales. The frontend loads translations dynamically and supports right-to-left (RTL) layouts.

Supported languages

Out of the box:

Locale	Language	Direction
`en`	English	LTR
`ar`	Arabic	RTL

Publishing language files

To customize or add translations, publish the language files:

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

This copies translation files to:

lang/vendor/chatify/
├── en/
│   └── chatify.php
└── ar/
    └── chatify.php

Adding a new locale

Publish the language files (if you haven't already)
Copy the en folder to your new locale:

cp -r lang/vendor/chatify/en lang/vendor/chatify/fr

Translate the strings in lang/vendor/chatify/fr/chatify.php
If the locale is RTL, add it to the RTL list in config

RTL support

RTL locales are defined in config/chatify.php:

'rtl_locales' => ['ar', 'he', 'fa', 'ur'],

When a user's locale matches one of these, the frontend renders with RTL layout. Add any new RTL locales to this array.

Locale detection middleware

Chatify includes a SetLocaleFromRequest middleware that automatically detects the user's preferred language. It is enabled by default and prepended to the API middleware stack.

Detection order

The middleware tries these sources in order and uses the first match:

Priority	Source	Config key	How it works
1	HTTP header	`locale.header`	Reads `Accept-Language` header
2	Fallback header	`locale.fallback_header`	Reads `X-Chatify-Locale` header
3	Query parameter	`locale.query_parameter`	Reads `?locale=fr` from the URL
4	User attribute	`locale.user_attribute`	Reads `$user->locale` from the authenticated user model
5	App locale	--	Falls back to `app()->getLocale()`

Configuration

'locale' => [
    'middleware'       => env('CHATIFY_LOCALE_MIDDLEWARE', true),
    'detect_via'       => ['header', 'query', 'user', 'app'],
    'header'           => 'Accept-Language',
    'fallback_header'  => 'X-Chatify-Locale',
    'query_parameter'  => 'locale',
    'user_attribute'   => 'locale',
],

To disable automatic locale detection:

CHATIFY_LOCALE_MIDDLEWARE=false

Frontend translations

The frontend loads translations from the API endpoint:

GET /api/chatify/v1/translations

This returns all translation strings for the current locale (as determined by the middleware). The Vue app uses these strings for all UI text.

Setting locale from the frontend

Send the Accept-Language or X-Chatify-Locale header with API requests:

fetch('/api/chatify/v1/translations', {
    headers: {
        'Accept-Language': 'fr',
    },
});

Or use the query parameter:

GET /api/chatify/v1/translations?locale=fr

User settings locale

Users can set their preferred locale through the settings API:

PATCH /api/chatify/v1/settings

{
  "locale": "ar"
}

This is stored in ch_user_settings and used for locale detection when the user source is in the detect_via list.

Localization

On this page