Skip to main content

​
1. Download and Upload

You can download the extension files from one of the following sources: Once downloaded, upload the extracted files into your Pterodactyl installation directory.

​
2. Register Livechat Routes

Open /routes/admin.php in your Pterodactyl installation and add the following route group: 
/*
|--------------------------------------------------------------------------
| Livechat Routes
|--------------------------------------------------------------------------
|
| Endpoint: /admin/livechat
|
*/
Route::group(['prefix' => 'livechat'], function () {
    Route::get('/', [Admin\Livechat\LiveChatController::class, 'index'])->name('admin.livechat');
    Route::post('/', [Admin\Livechat\LiveChatController::class, 'save']);
    Route::post('/reset', [Admin\Livechat\LiveChatController::class, 'reset'])->name('admin.livechat.reset');
});
Add this below the existing line: 
Route::get('/', [Admin\BaseController::class, 'index'])->name('admin.index');

​
3. Add Livechat Menu Item

Open /resources/views/layouts/admin.blade.php and add this menu item: 
<li class="{{ ! starts_with(Route::currentRouteName(), 'admin.livechat') ?: 'active' }}">
    <a href="{{ route('admin.livechat') }}">
        <i data-lucide="message-square"></i><span>Livechat</span>
    </a>
</li>
Place it below the existing menu item for settings: 
<li class="{{ ! starts_with(Route::currentRouteName(), 'admin.settings') ?: 'active' }}">
    <a href="{{ route('admin.settings') }}">
        <i data-lucide="settings"></i> <span>Settings</span>
    </a>
</li>
If your installation uses a custom theme, add it under the corresponding theme menu section.

​
4. Register Livechat API Routes

Open /app/Providers/RouteServiceProvider.php and add this inside the map method or where routes are grouped: 
// Livechat API
Route::middleware('web')
    ->prefix('/api/livechat')
    ->group(base_path('routes/api-livechat.php'));
Add this below the existing route groups, for example below: 
Route::middleware('web')->group(function () {
    Route::middleware(['auth.session', RequireTwoFactorAuthentication::class])
        ->group(base_path('routes/base.php'));

    Route::middleware(['auth.session', RequireTwoFactorAuthentication::class, AdminAuthenticate::class])
        ->prefix('/admin')
        ->group(base_path('routes/admin.php'));

    Route::middleware('guest')->prefix('/auth')->group(base_path('routes/auth.php'));
});

​
5. Load Livechat Script on Frontend

Open /resources/scripts/components/elements/PageContentBlock.tsx and add the following useEffect hook: 
useEffect(() => {
    fetch('/api/livechat')
        .then(res => res.text())
        .then(html => {
            const wrapper = document.createElement('div');
            wrapper.innerHTML = html;

            const scripts = wrapper.querySelectorAll('script');
            scripts.forEach(script => {
                const s = document.createElement('script');
                if (script.src) {
                    s.src = script.src;
                    s.async = script.async;
                } else {
                    s.textContent = script.textContent;
                }
                document.body.appendChild(s);
            });
        })
        .catch(e => console.error('Failed to load livechat script', e));
}, []);
Add this below the existing useEffect that sets the document title: 
useEffect(() => {
    if (title) {
        document.title = title;
    }
}, [title]);
If no such title useEffect exists, simply add the above code directly below the line 
const PageContentBlock: React.FC<PageContentBlockProps> =

​
✅ You’re Done!

The extension has been successfully installed and works as it should. You can now configure it via the Pterodactyl admin panel. Good luck!
⌘I