Docs Developers Status ForumSpark Hub
Connect · JS SDK

JavaScript SDK

Every forum page exposes a global window.ForumSpark object that injected scripts can use to interact with the page.

Page context

Read the current page context to know where the user is:

ForumSpark.context.board  // { name: "My Forum", slug: "my-forum" }
ForumSpark.context.page   // "Forum Index" (page title string)
ForumSpark.context.forum  // { id: 5, name: "General", slug: "general" } or null
ForumSpark.context.topic  // { id: 42, title: "Hello", slug: "hello" } or null

ForumSpark.currentUser    // User object or null for guests

Event bus

Subscribe to and emit events. All events are also dispatched as DOM CustomEvents on document.

// Subscribe to an event
const unsub = ForumSpark.on('livewire:message-sent', (data) => {
    console.log('New message sent!', data);
});

// Unsubscribe later
unsub();

// Or manually unsubscribe
ForumSpark.off('livewire:message-sent', myHandler);

// Emit your own events (for inter-extension communication)
ForumSpark.emit('my-extension:loaded', { version: '1.0' });

// Listen via standard DOM events
document.addEventListener('forumspark:init', () => {
    console.log('ForumSpark initialized!');
});

Bridged Livewire events

These real-time Livewire events are automatically bridged to the ForumSpark event bus, prefixed with livewire::

EventFires when
livewire:attachment-uploadedA file was attached to a reply (contains fileId, url, filename, mimeType)
livewire:file-uploadedA single file upload completed
livewire:topic-watchedThe user started watching the current topic
livewire:topic-unwatchedThe user stopped watching the current topic
livewire:message-sentA private message was sent
livewire:chat-dock-new-messageA new chat message was received via polling
livewire:multiquote-updatedThe multi-quote selection changed
livewire:themeEditorSavedTheme editor settings were saved
livewire:themeEditorDiscardedTheme editor changes were discarded
livewire:style-savedTheme stylesheet was saved

Mini profile widgets

Register custom content blocks that appear in user profile popup cards:

ForumSpark.registerMiniProfileWidget({
    name: 'steam-status',
    state: (user) => ({ online: false }),
    onInit: (user) => {
        // Fetch data when widget initialises for this user
    },
    render: (user, storeRef) => {
        return `<div x-data x-text="$store['${storeRef}'].online
            ? 'Online on Steam' : 'Offline'"></div>`;
    }
});

Dark mode

ForumSpark.darkMode           // true or false (getter)
ForumSpark.getDarkMode()      // same as above
ForumSpark.toggleDarkMode()   // toggles and persists (saves to user pref or cookie)