Livechat Integration for Pterodactyl

This guide will help you integrate a Livechat feature into your Pterodactyl installation by updating routes, views, providers, and frontend components.

1. Download and Upload

You can download the extension files from one of the following sources:

From SourceXchange:

Download Pterodactyl Livechat Extension

From Ricardoneud.com:

Download Pterodactyl Livechat Extension

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:

Add this below the existing line:

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:

Add this below the existing route groups, for example below:

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!

Pterodactyl Livechat

Livechat Integration for Pterodactyl#

1. Download and Upload#

2. Register Livechat Routes#

3. Add Livechat Menu Item#

4. Register Livechat API Routes#

5. Load Livechat Script on Frontend#